WebGL +three创建地球横向滚动动画

WebGL +jquery创建地球横向滚动动画代码示例

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

<script>       let camera, scene, renderer;       let earthMesh;         init();       animate();         function init() {         // 创建相机         camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);         camera.position.z = 200;           // 创建场景         scene = new THREE.Scene();           // 创建光源         const light = new THREE.PointLight(0xffffff, 1, 0);         light.position.set(100, 100, 200);         scene.add(light);           // 创建地球         const earthGeometry = new THREE.SphereGeometry(50, 32, 32);         const earthTexture = new THREE.TextureLoader().load('mars-11012_1920.jpg');         const earthMaterial = new THREE.MeshPhongMaterial({           map: earthTexture         });         earthMesh = new THREE.Mesh(earthGeometry, earthMaterial);         scene.add(earthMesh);           // 创建渲染器         renderer = new THREE.WebGLRenderer();         renderer.setSize(window.innerWidth, window.innerHeight);         document.body.appendChild(renderer.domElement);           // 监听窗口大小变化         window.addEventListener('resize', onWindowResize);       }         function onWindowResize() {         camera.aspect = window.innerWidth / window.innerHeight;         camera.updateProjectionMatrix();         renderer.setSize(window.innerWidth, window.innerHeight);       }         function animate() {         // 使地球缓慢旋转         earthMesh.rotation.y += 0.001;           // 渲染场景         renderer.render(scene, camera);           // 循环动画         requestAnimationFrame(animate);       }     </script>

　　使用需要引入three.min.js