用Three.js打造一个旋转的3D地球

前言

Three.js是一个用于创建和渲染3D图形的JavaScript库。它基于WebGL，WebGL是一个允许您在浏览器中渲染3D图形的API。Three.js使您能够轻松创建3D对象、设置场景、添加灯光和相机，以及将纹理应用于对象。

创建场景

首先，我们需要创建一个Three.js场景。场景是Three.js中用来容纳所有对象的容器。

const scene = new THREE.Scene();

创建地球

接下来，我们需要创建一个地球。我们将使用SphereGeometry类来创建一个球形几何体，并将EarthTexture贴图应用于该几何体。

const geometry = new THREE.SphereGeometry(1, 32, 32);
const material = new THREE.MeshPhongMaterial({
  map: new THREE.TextureLoader().load('earth.jpg')
});
const earth = new THREE.Mesh(geometry, material);

添加灯光

为了使地球看起来更加真实，我们需要添加灯光。我们将使用AmbientLight类创建一个环境光，以及DirectionalLight类创建一个方向光。

const ambientLight = new THREE.AmbientLight(0x404040);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 10, 10);

添加相机

接下来，我们需要添加一个相机。相机是Three.js中用于查看场景的虚拟摄像机。我们将使用PerspectiveCamera类创建一个透视相机。

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

创建渲染器

渲染器是Three.js中用于将场景渲染到HTML画布的组件。我们将使用WebGLRenderer类创建一个WebGL渲染器。

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

旋转地球

为了让地球旋转，我们需要在动画循环中更新地球的旋转角度。

function animate() {
  requestAnimationFrame(animate);

  earth.rotation.y += 0.01;

  renderer.render(scene, camera);
}

animate();

结论

现在，您已经使用Three.js创建了自己的3D地球动画。您可以通过调整地球的纹理、灯光和相机设置来创建不同的效果。