三分钟轻松上手！用Three.js创造自己的虚拟地球

2023-03-09 14:46:15

用 Three.js 创造一个逼真的地球

想象一下在虚拟地球上漫步，探索世界的每一个角落。使用 Three.js，这一愿景可以成为现实。本指南将引导你逐步创建一个酷炫且逼真的地球，让你踏上宇宙冒险的旅程。

1. 准备工作

开始之前，请确保你的电脑已安装 Node.js 和 npm。下载 Three.js 库并将其解压缩到你的项目文件夹中。

2. 创建场景和相机

场景是 3D 世界中的容器，容纳所有对象。相机则为你提供查看场景的窗口。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

3. 添加地球

使用 SphereGeometry 创建一个球体作为地球，并使用 MeshPhongMaterial 添加材质。

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshPhongMaterial({
  map: new THREE.TextureLoader().load('earthmap1k.jpg'),
  bumpMap: new THREE.TextureLoader().load('earthbump1k.jpg'),
  specularMap: new THREE.TextureLoader().load('earthspec1k.jpg'),
});
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);

4. 添加天空盒

天空盒是一个环绕场景的立方体，用等距柱状图像创建。

const skyboxGeometry = new THREE.BoxGeometry(1000, 1000, 1000);
const skyboxMaterial = new THREE.MeshBasicMaterial({
  map: new THREE.TextureLoader().load('skybox.jpg'),
  side: THREE.BackSide,
});
const skybox = new THREE.Mesh(skyboxGeometry, skyboxMaterial);
scene.add(skybox);

5. 添加灯光

为了让地球更逼真，需要添加灯光。DirectionalLight 提供方向光，AmbientLight 提供环境光。

const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

6. 渲染场景

使用 WebGLRenderer 渲染场景。

const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

function animate() {
  requestAnimationFrame(animate);

  earth.rotation.y += 0.001;

  renderer.render(scene, camera);
}

animate();