3. Threejs 案例：地球增加了`地球皮肤`和`地球自转` 找到一张地球纹理素材平面图，让地球更加真实一点。俗称地

前言

回顾我们上一篇文章，Threejs 如何构建 3D 世界一文我们学会了 Threejs 三个核心元素，接下来的内容是基于这些核心来扩写的，还不了解的可以回去看看。

地球

如果我们要创造一个地球，看看实际效果

9b8146afb6f59fe62a12912405cf9ca6-ezgif.com-video-to-webp-converter.webp

是不是跟我们上节课的很像，区别在于增加了地球皮肤和地球自转，开始开发

初始化场景、相机、渲染器

// 创建场景
const scene = new THREE.Scene();
scene.background = new THREE.Color(0xbfd1e5);
// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 3;
// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

创建地球

找到一张地球纹理素材平面图，让地球更加真实一点。俗称地球皮肤

开工，开始创建地球

// 创建球体
const geometry = new THREE.SphereGeometry(100, 32, 32);
// 创建纹理图
const texture = new THREE.TextureLoader().load('../assets/img/earth.png');
// 创建材质
const material = new THREE.MeshBasicMaterial({ map: texture });
// 创建地球
const earth = new THREE.Mesh(geometry, material);
// 添加在场景里面
scene.add(earth);

实现地球自转

创建完成之后，渲染出来，但是渲染后是静态的，看不出来立体，所以我们需要加个地球自转功能，看起来才像个3D

function run() {
    // 持续渲染动画
    requestAnimationFrame(run);
    // 地球自转
    earth.rotation.y += 0.01;
    // 执行渲染
    renderer.render(scene, camera);
}
run();

完整代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>3. Threejs 案例：地球</title>
    <style>
      body { margin: 0; }
    </style>
  </head>
  <body>
    <script type="importmap">
      {
        "imports": {
          "three": "https://cdn.jsdelivr.net/npm/three@0.165.0/+esm",
          "three/": "https://cdn.jsdelivr.net/npm/three@0.165.0/examples/jsm/"
        }
      }
    </script>
    <script type="module">
      import * as THREE from 'three';
      import { OrbitControls } from 'three/controls/OrbitControls.js';

      // 创建场景
      const scene = new THREE.Scene();
      scene.background = new THREE.Color(0xbfd1e5);
      // 创建相机
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.set(200, 200, 200);
      camera.lookAt(scene.position);
      // 创建渲染器
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      document.body.appendChild(renderer.domElement);


      // 创建球体
      const geometry = new THREE.SphereGeometry(100, 32, 32);
      // 创建纹理图
      const texture = new THREE.TextureLoader().load('../assets/img/earth.png');
      // 创建材质
      const material = new THREE.MeshBasicMaterial({ map: texture });
      // 创建地球
      const earth = new THREE.Mesh(geometry, material);
      scene.add(earth);

      function run() {
        // 持续渲染动画
        requestAnimationFrame(run);
        // 地球自转
        earth.rotation.y += 0.01;
        // 执行渲染
        renderer.render(scene, camera);
      }
      run();
    </script>
  </body>
</html>