五分钟学会3D月球环绕动画

2023-11-11 11:18:00

3D 月球动画：绕地球运转的魅力

引言

中秋佳节将至，皓月当空，皎洁迷人。本教程将带你踏上迷人的旅程，让你亲手制作一个 3D 月球绕地球运转的动画。利用 Three.js 的强大功能，我们将打造一个逼真的场景，展示月球绕地球的优雅舞姿。

准备工作

首先，我们需要一个 div 元素作为容器，并设置其宽高和背景颜色：

<div id="moon"></div>

#moon {
  width: 500px;
  height: 500px;
  background-color: black;
}

接下来，添加一个 canvas 元素并设置其宽高：

<canvas id="canvas"></canvas>

#canvas {
  width: 500px;
  height: 500px;
}

场景设置

现在，我们进入 Three.js 的世界。创建一个场景，并添加一个相机和渲染器：

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

构建地球和月球

接下来，让我们创造地球和月球的 3D 模型。首先，创建一个球体作为地球：

const geometry = new THREE.SphereGeometry(100, 32, 32);
const material = new THREE.MeshPhongMaterial({ color: 0x0077ff });
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);

然后，创建一个球体作为月球：

const moonGeometry = new THREE.SphereGeometry(50, 32, 32);
const moonMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
scene.add(moon);

添加光源

为了照亮我们的场景，我们需要一个光源：

const light = new THREE.PointLight(0xffffff, 1, 1000);
scene.add(light);

相机视角

接下来，让我们设置相机的初始位置和方向：

camera.position.z = 500;

动画效果

现在，让我们赋予动画生命。使用 requestAnimationFrame() 函数持续渲染场景，并随着时间推移旋转地球和月球：

function animate() {
  requestAnimationFrame(animate);

  earth.rotation.y += 0.01;
  moon.rotation.y += 0.02;

  renderer.render(scene, camera);
}

animate();

整合到页面

最后一步是将画布添加到页面中：

document.body.appendChild(renderer.domElement);

代码示例

以下是完整的代码示例：

<div id="moon"></div>
<canvas id="canvas"></canvas>

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

const geometry = new THREE.SphereGeometry(100, 32, 32);
const material = new THREE.MeshPhongMaterial({ color: 0x0077ff });
const earth = new THREE.Mesh(geometry, material);
scene.add(earth);

const moonGeometry = new THREE.SphereGeometry(50, 32, 32);
const moonMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
const moon = new THREE.Mesh(moonGeometry, moonMaterial);
scene.add(moon);

const light = new THREE.PointLight(0xffffff, 1, 1000);
scene.add(light);

camera.position.z = 500;

function animate() {
  requestAnimationFrame(animate);

  earth.rotation.y += 0.01;
  moon.rotation.y += 0.02;

  renderer.render(scene, camera);
}

animate();

renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);