three.js地球案例(模仿gub主页)

地球案例地址 https://toupp.vip/example/earth


// 经纬度转成球体坐标
          function convertLatLngToSphereCoords(latitude, longitude, radius) {
            const phi = (latitude * Math.PI) / 180;
            const theta = ((longitude - 180) * Math.PI) / 180;
            const x = -(radius + -1) * Math.cos(phi) * Math.cos(theta);
            const y = (radius + -1) * Math.sin(phi);
            const z = (radius + -1) * Math.cos(phi) * Math.sin(theta);
            return {
              x,
              y,
              z,
            };
          }


//球体上的运动曲线材质
var material = new THREE.ShaderMaterial({
			        uniforms: uniforms,
			        vertexShader: `
					    varying vec3 vPosition;
					    varying vec4 vColor;
					    void main() {
					        vPosition = position;
					        vColor = vec4(1.0,0.0,1.0, 1.0);
					        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
					    }`,
			        fragmentShader: `
                        uniform vec3 targetPos; // 目标位置
					    uniform float vLength;  // 距离
					    uniform float time;
					    varying vec3 vPosition;
					    varying vec4 vColor;
					    void main() {
					        //计算2点间的距离
					        float dist = distance(vPosition, targetPos);

					        vec4 color = vec4(vColor);
					        float p = dist/vLength * 1.5 + time * 0.7;


					        if (p < 3.1415926/2.0){
					            p = 0.0;
					        }
					        if (p > 3.1415926*2.0){
					            p = 0.0;
					        }

					        float a = sin(p);
					        color.a = a;

					        gl_FragColor = color;
					    }`,
			        transparent: true,
			        vertexColors: 0xf0ff00,
              lights:false
			    });



首页
案例

评论

热门文章

暂无