初识 Three.js：开启你的 Web 3D 世界 ✨

news2025/4/8 5:38:22

3D 技术已经不再是游戏引擎的专属，随着浏览器技术的发展，我们完全可以在网页上实现令人惊艳的 3D 效果。而 Three.js，作为 WebGL 的封装库，让 Web 3D 的大门向更多开发者敞开了。

这是我开启这个 Three.js 专栏的第一篇文章，我们将简单认识一下 Three.js，并为后续的项目开发打下基础。

🔍 什么是 Three.js？

Three.js 是一个 JavaScript 3D 库，它封装了 WebGL，使开发者可以用更简单的方式在浏览器中创建和展示 3D 内容。

通过 Three.js，你可以轻松实现以下效果：

🧱 创建 3D 模型和场景
🖼️ 加载纹理和材质
💡 添加光照、阴影、动画等
🎮 控制摄像机视角、交互行为

适合以下人群：

想让网页更酷的前端开发者
想快速构建可视化场景的可视化工程师
想把 3D 应用到展示中的设计师

✨ 你可以做什么？

以下是 Three.js 常见的使用场景：

🛍️ 产品展示（3D 鞋子、家具、模型旋转等）
📊 数据可视化（地球、地图、图表）
🧑‍💻 个人主页（酷炫背景、交互动画）
🎮 小型 3D 游戏开发

🧰 常用资源推荐

名称	简介	链接
官网	Three.js 官方网站	https://threejs.org
文档	官方 API 文档	https://threejs.org/docs/
示例	各种 Three.js 示例	https://threejs.org/examples/
GitHub	项目源码仓库	https://github.com/mrdoob/three.js
React Three Fiber	React 开发者专用封装	https://docs.pmnd.rs/react-three-fiber
模型/纹理下载	免费素材库	https://sketchfab.com, https://poly.pizza, https://readyplayer.me/
Three.js中文网	其他博主网站	http://www.webgl3d.cn/pages/4a14ce/

🚀 Hello Three.js！

先放一个最简单的示例：创建一个旋转的立方体 👇，你可以在菜鸟教程运行下面示例：在线运行html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Hello Three.js!</title>
    <style>body { margin: 0; }</style>
  </head>
  <body>
    <script src="https://unpkg.com/three@0.160.1/build/three.min.js"></script>
    <script>
      // 创建场景
      const scene = new THREE.Scene();

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

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

      // 创建几何体和材质
      const geometry = new THREE.BoxGeometry();
      const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      // 动画循环
      function animate() {
        requestAnimationFrame(animate);
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>