圣诞奇迹：用 Three.js 打造令人惊叹的 3D 圣诞动画

2023-11-30 05:41:39

引言

大家好，我是 Fly 哥。今天是圣诞节，首先祝大家节日快乐！作为一名程序员，我想用一种特别的方式来庆祝节日——用 Three.js 制作一个令人惊叹的 3D 圣诞动画。

这个动画不仅仅是一个简单的展示，它更是一个一步一步的手把手教程，从零开始教你如何使用 Three.js 实现一个完整的圣诞场景。我将在文章中提供所有必要的代码和资源，这样你就可以轻松地自己制作这个动画。

让我们开始吧！

1. 设置场景

首先，我们需要设置我们的 Three.js 场景。这包括创建一个场景、渲染器、相机和光照。

// 创建场景
const scene = new THREE.Scene();

// 创建渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 2;

// 创建光照
const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(-1, 2, 4);
scene.add(light);

2. 添加圣诞树

现在让我们添加圣诞树。我们将使用 Three.js 的几何体和材料来创建一个简单但逼真的圣诞树。

// 创建树干几何体
const trunkGeometry = new THREE.CylinderGeometry(0.2, 0.2, 1, 8);

// 创建树干材质
const trunkMaterial = new THREE.MeshLambertMaterial({ color: 0x734a25 });

// 创建树干网格对象
const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
trunk.position.y = 0.5;
scene.add(trunk);

// 创建树叶几何体
const leavesGeometry = new THREE.SphereGeometry(0.5, 32, 32);

// 创建树叶材质
const leavesMaterial = new THREE.MeshLambertMaterial({ color: 0x00ff00 });

// 创建树叶网格对象
const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
leaves.position.y = 1;
scene.add(leaves);

3. 添加装饰品

接下来，让我们为圣诞树添加一些装饰品。我们将使用 Three.js 的 Shape 和 Extrude 几何体来创建这些装饰品。

// 创建球形装饰品几何体
const sphereGeometry = new THREE.SphereGeometry(0.2, 16, 16);

// 创建球形装饰品材质
const sphereMaterial = new THREE.MeshLambertMaterial({ color: 0xff0000 });

// 创建球形装饰品网格对象
const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(0.5, 0.5, 0.5);
scene.add(sphere);

// 创建星形装饰品几何体
const starGeometry = new THREE.ShapeGeometry({
  curveSegments: 5,
  points: [
    new THREE.Vector2(0, 0.5),
    new THREE.Vector2(-0.25, 0.25),
    new THREE.Vector2(-0.5, 0),
    new THREE.Vector2(-0.25, -0.25),
    new THREE.Vector2(0, -0.5),
    new THREE.Vector2(0.25, -0.25),
    new THREE.Vector2(0.5, 0),
    new THREE.Vector2(0.25, 0.25)
  ]
});
const extrudeSettings = {
  amount: 0.1,
  bevelEnabled: true,
  bevelSegments: 2,
  steps: 2
};
const starGeometry = new THREE.ExtrudeGeometry(starGeometry, extrudeSettings);

// 创建星形装饰品材质
const starMaterial = new THREE.MeshLambertMaterial({ color: 0xffff00 });

// 创建星形装饰品网格对象
const star = new THREE.Mesh(starGeometry, starMaterial);
star.position.set(-0.5, 0.5, 0.5);
scene.add(star);

4. 添加飘落的雪花

为了让场景更加逼真，让我们添加一些飘落的雪花。我们将使用 Three.js 的粒子系统来实现这一点。

// 创建雪花几何体
const snowflakeGeometry = new THREE.Geometry();
for (let i = 0; i < 1000; i++) {
  const vertex = new THREE.Vector3();
  vertex.x = Math.random() * 10 - 5;
  vertex.y = Math.random() * 10 - 5;
  vertex.z = Math.random() * 10 - 5;
  snowflakeGeometry.vertices.push(vertex);
}

// 创建雪花材质
const snowflakeMaterial = new THREE.PointsMaterial({
  color: 0xffffff,
  size: 0.1
});

// 创建雪花粒子系统
const snowflakes = new THREE.Points(snowflakeGeometry, snowflakeMaterial);
snowflakes.position.y = 5;
scene.add(snowflakes);

5. 渲染场景

现在我们已经设置好了场景，让我们渲染一下。

function render() {
  requestAnimationFrame(render);

  // 旋转圣诞树
  tree.rotation.y += 0.01;

  // 飘落雪花
  snowflakes.rotation.y += 0.005;

  // 渲染场景
  renderer.render(scene, camera);
}
render();