首页 > 文章 > 前端

Three.js创建3D模型教程详解

时间：2025-10-22 17:39:49 314浏览收藏

想在网页上创建炫酷的3D模型吗？本文为你提供一份快速入门指南，教你如何利用HTML5和强大的JavaScript库Three.js轻松实现。Three.js基于WebGL，让你无需深入了解复杂的图形学知识，就能在浏览器中构建令人惊艳的3D场景。本文将一步步讲解如何引入Three.js库，创建场景、相机、渲染器和几何体，并实现模型的动态旋转。此外，还将介绍如何加载glTF等外部模型，让你的3D世界更加丰富多彩。掌握Scene、Camera、Renderer、Mesh这四大核心要素，你就能开启你的3D建模之旅，并进一步探索灯光、纹理和交互控制等高级功能，打造更具吸引力的网页体验。

HTML5通过Three.js可实现3D模型渲染。首先引入Three.js库，创建场景、相机、渲染器和几何体，如立方体；在动画循环中更新旋转并渲染画面；支持加载glTF等外部模型，需服务器环境运行。1. 引入Three.js CDN；2. 初始化场景、透视相机（位置z=5）、WebGL渲染器并绑定canvas；3. 创建BoxGeometry与MeshBasicMaterial组成网格对象添加至场景；4. requestAnimationFrame驱动动画循环，持续更新cube.rotation实现旋转；5. 监听resize事件适配窗口变化；6. 使用GLTFLoader加载外部模型，注意路径正确及本地服务运行。掌握核心四要素（Scene、Camera、Renderer、Mesh）后可扩展灯光、纹理、控制交互等功能。

HTML5代码如何创建3D模型 HTML5代码与Three.js库的快速入门

HTML5 本身不直接支持 3D 模型渲染，但结合 JavaScript 库如 Three.js，可以在网页中轻松创建和展示 3D 内容。Three.js 是一个基于 WebGL 的高级库，让开发者无需深入图形学细节就能在浏览器中实现 3D 效果。

1. 准备工作：引入 Three.js

要开始使用 Three.js，首先需要在 HTML 文件中引入该库。可以通过 CDN 快速加载：

<script src="https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.min.js"></script>

将这段代码放入 HTML 的或底部，确保脚本能被正确加载。

2. 创建基本的 3D 场景结构

每个 Three.js 项目都需要四个基本元素：场景（Scene）、相机（Camera）、渲染器（Renderer）和几何对象（如立方体、球体等）。

以下是一个完整的基础示例，展示如何创建一个旋转的立方体：

<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8" />
  <title>Three.js 入门示例</title>
  <style>
    body { margin: 0; overflow: hidden; }
    canvas { display: block; }
  </style>
</head>
<body>
  <script src="https://cdn.jsdelivr.net/npm/three@0.152.0/build/three.min.js"></script>
  <script>
    // 1. 创建场景
    const scene = new THREE.Scene();

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

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

    // 4. 添加一个立方体
    const geometry = new THREE.BoxGeometry();
    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00, wireframe: true });
    const cube = new THREE.Mesh(geometry, material);
    scene.add(cube);

    // 5. 动画循环
    function animate() {
      requestAnimationFrame(animate);

      // 旋转立方体
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;

      renderer.render(scene, camera);
    }

    animate();

    // 6. 处理窗口缩放
    window.addEventListener('resize', () => {
      camera.aspect = window.innerWidth / window.innerHeight;
      camera.updateProjectionMatrix();
      renderer.setSize(window.innerWidth, window.innerHeight);
    });
  </script>
</body>
</html>

3. 关键概念说明

Scene（场景）：所有 3D 对象的容器，类似舞台。
Camera（相机）：决定用户从哪个角度观看场景。常用的是透视相机 PerspectiveCamera。
Renderer（渲染器）：将场景和相机的内容绘制到 canvas 上，使用 WebGL 渲染。
Mesh（网格）：由几何体（Geometry）和材质（Material）组成，是可见的 3D 物体。
Animation Loop：使用 requestAnimationFrame 实现持续更新画面，实现动画效果。

4. 加载外部 3D 模型

Three.js 支持加载 glTF、OBJ、FBX 等格式的模型。以 glTF 为例（推荐格式）：

// 引入 GLTF 加载器（需额外脚本）
<script src="https://cdn.jsdelivr.net/npm/three@0.152.0/examples/js/loaders/GLTFLoader.js"></script>

// 在脚本中加载模型
const loader = new THREE.GLTFLoader();
loader.load('path/to/model.gltf', (gltf) => {
  scene.add(gltf.scene);
}, undefined, (error) => {
  console.error('加载失败:', error);
});

注意：需确保模型文件路径正确，并在服务器环境下运行（不能直接双击 HTML 打开）。

基本上就这些。掌握基础结构后，你可以添加灯光、阴影、纹理、交互控制（如 OrbitControls）来增强效果。Three.js 文档和示例丰富，适合边学边练。不复杂但容易忽略细节，比如坐标系、单位、渲染顺序等。多试几次就能上手。

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。

场景 3D模型 Three.js WebGL 渲染器