three.js 初探：最认真的入门指南

2024-02-05 08:32:48

three.js：通往三维开发世界的门户

在虚拟世界的迷人领域，three.js 犹如一扇通向无穷可能性的门户，为开发者开启了三维开发的非凡之旅。它是一把双刃剑，既简单易用，又能创造出令人惊叹的交互式体验。

什么是 three.js？

three.js 是一款开源 JavaScript 库，建立在 WebGL 的坚实基础之上。WebGL 是一种低级 API，赋予浏览器呈现栩栩如生的 3D 图形的能力。有了 three.js，开发者可以运用硬件加速图形处理，为用户带来流畅、身临其境的视觉盛宴。

three.js 的优势

轻量级且可扩展： three.js 核心文件仅需不到 100KB，可谓轻如鸿毛。开发者可按需加载附加模块，例如光照、阴影和物理效果，灵活打造所需效果。
易于上手： three.js 提供直观的 API，即使初学者也能轻松入门。其详尽的文档和活跃的社区提供无微不至的支持，助你踏上三维开发之路。
跨平台兼容： three.js 纵横各种浏览器和设备，包括台式机、移动端和 VR 耳机。它兼容多种 3D 格式，如 glTF、OBJ 和 FBX，让你尽情发挥创意。

如何使用 three.js

踏入 three.js 世界，以下步骤指引你畅游三维之境：

搭建舞台： 创建一个 HTML 文件并引用 three.js 脚本，为你的三维杰作搭建舞台。
定义视角： 相机决定了用户的视点，使用 PerspectiveCamera() 创建透视相机，设定观察角度。
渲染画布： 渲染器负责将场景呈现到画布上，使用 WebGLRenderer() 创建渲染器，将虚拟世界变为现实。
填充场景： 使用 BoxGeometry() 或 SphereGeometry() 等几何图形类创建 3D 对象，再以 Mesh() 将几何图形与材质（如 BasicMaterial()）融合，塑造出栩栩如生的网格。
点亮世界： 灯光是场景的灵魂，使用 AmbientLight() 添加环境光，或 DirectionalLight() 投射定向光，让你的三维世界熠熠生辉。
捕捉交互： 使用 Raycaster() 捕捉用户交互，例如点击或悬停，赋予你的作品交互性。
渲染时刻： 使用 render() 方法，将精心构建的场景呈现到画布上，让三维世界跃然眼前。

示例代码

让我们用一个简单的代码示例，一睹 three.js 的魅力：

<html>
<head>
  <script src="three.js"></script>
</head>
<body>
  <script>
    // 构建场景
    const scene = new THREE.Scene();

    // 定义视角
    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 2;

    // 渲染画布
    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>