用 Three.js 给 ta 画个生日蛋糕，让你的生日祝福更加特别

2023-09-19 16:24:26

作为整天与 UI 打交道的前端工程师，是否想在他（她）生日的时候用代码送上一份惊喜呢？不妨用 Three.js 做个 3D 的蛋糕送给 ta，既浪漫又能展现你技术的魅力。这篇文章我们就来学习下如何用 Three.js 制作一个 3D 蛋糕。

准备工作

首先，你需要准备一些东西：

Three.js 库
一个文本编辑器
一个浏览器（推荐使用 Chrome 或 Firefox）

Three.js 库

Three.js 是一个用于创建和显示 3D 图形的 JavaScript 库。它可以让你轻松地创建各种 3D 对象，并使用动画效果使它们动起来。Three.js 的官方网站是 https://threejs.org/。

文本编辑器

你将用文本编辑器来编写 Three.js 代码。推荐使用 Visual Studio Code、Atom 或 Sublime Text 等文本编辑器。

浏览器

你将使用浏览器来查看 Three.js 的效果。推荐使用 Chrome 或 Firefox 浏览器。

制作 3D 蛋糕

现在，让我们开始制作 3D 蛋糕。

创建一个新的项目

首先，你需要创建一个新的项目。在你的文本编辑器中，创建一个新的文件，并将其命名为 index.html。

添加 Three.js 库

接下来，你需要将 Three.js 库添加到你的项目中。你可以从 Three.js 的官方网站下载库，也可以使用 CDN。

编写 Three.js 代码

现在，你可以开始编写 Three.js 代码了。在 index.html 文件中，添加以下代码：

<!DOCTYPE html>
<html>
<head>
  
  <meta charset="UTF-8">
</head>
<body>
  <script src="three.js"></script>
  <script>
    // 创建场景
    var scene = new THREE.Scene();

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

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

    // 创建蛋糕
    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshLambertMaterial({ color: 0xff0000 });
    var cake = new THREE.Mesh(geometry, material);
    scene.add(cake);

    // 创建灯光
    var light = new THREE.PointLight(0xffffff, 1, 100);
    light.position.set(0, 0, 10);
    scene.add(light);

    // 渲染场景
    renderer.render(scene, camera);
  </script>
</body>
</html>

运行代码

现在，你可以运行代码了。在你的浏览器中，打开 index.html 文件。你应该会看到一个红色的 3D 蛋糕。

添加动画效果

现在，让我们给蛋糕添加一些动画效果。在 index.html 文件中，将以下代码添加到 script 标签中：

// 创建动画循环
function animate() {
  requestAnimationFrame(animate);

  // 旋转蛋糕
  cake.rotation.y += 0.01;

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

// 启动动画循环
animate();

现在，当你运行代码时，你会看到蛋糕在旋转。

添加更多细节

现在，你可以给蛋糕添加更多细节。你可以添加蜡烛、糖霜、水果等装饰。你还可以改变蛋糕的颜色和形状。

完成

现在，你的 3D 蛋糕就完成了。你可以将它保存为一个 HTML 文件，并发送给 ta。ta 一定会很喜欢这份特别的生日礼物。