webgl+gsap+three实现三维透明地球鼠标点击标注地理坐标位置效果代码-html代码-BFW代码库

webgl+gsap+three实现三维透明地球鼠标点击标注地理坐标位置效果代码

代码语言：html

所属分类：三维

代码描述：webgl+gsap+three实现三维透明地球鼠标点击标注地理坐标位置效果代码

代码标签： webgl gsap three 三维透明地球鼠标点击标注地理坐标位置

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">

  
  
  
<style>
body {
    padding: 0;
    margin: 0;
    overflow: hidden;
}

.page {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.title {
	 position: fixed;
	 bottom: 10%;
	 left: 0;
	 width: 100%;
	 text-align: center;
	 font-family: sans-serif;
}

#globe-3d, #globe-2d-overlay, #globe-popup-overlay, .globe-popup {
    display: block;
    position: absolute;
}

#globe-2d-overlay, #globe-popup-overlay {
    pointer-events: none;
}

.globe-popup {
    top: 0;
    left: 0;
    background-color: white;
    opacity: 0;
    color: #111;
    font-family: sans-serif;
    padding: 5px 10px;
    font-size: 15px;
    border-radius: 3px;
    filter: drop-shadow(0px 0px 3px #555555);
}
</style>

  
</head>

<body >
  <div class="page">
	 <div class="title">click to add a pointer</div>
    <div class="globe-wrapper">
        <canvas id="globe-3d"></canvas>
        <canvas id="globe-2d-overlay"></c.........完整代码请登录后点击上方下载按钮下载查看