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

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

<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