异常教程

three js（建议收藏）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战(已更新的所有项目都能学习) / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新开坑项目:《Spring AI 项目实战》 正在持续爆肝中，基于 Spring AI + Spring Boot 3.x + JDK 21...， 点击查看 ;
  • 《从零手撸：仿小红书（微服务架构）》 已完结，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;演示链接： http://116.62.199.48:7070 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 90w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 3100+ 小伙伴加入学习 ，欢迎点击围观

前言：Three.js 的魅力与学习价值

在 Web 开发领域，Three.js 是一款令人惊叹的开源库，它以简洁的接口封装了 WebGL 的复杂性，让开发者能够轻松创建交互式 3D 图形和动画。无论是编程初学者还是中级开发者，Three.js 都能提供一条低门槛的路径，将抽象的数学概念转化为直观的视觉表达。本文将从环境搭建、核心概念到实战案例，逐步解析 Three.js 的工作原理，并通过代码示例帮助读者快速上手。

环境搭建：三步启动你的第一个 Three.js 项目

1. 安装与引入

Three.js 的使用非常简单，只需通过 CDN 引入即可开始开发：

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

此外，若需加载模型或处理物理引擎，可引入扩展库（如 OrbitControls 用于相机控制）：

<script src="https://cdn.jsdelivr.net/npm/three@0.158.2/examples/jsm/controls/OrbitControls.js"></script>

2. 基础 HTML 结构

创建一个包含 canvas 元素的 HTML 文件，并确保为渲染器预留空间：

<!DOCTYPE html>  
<html>  
<head>  
    <title>Three.js Demo</title>  
    <style>  
        body { margin: 0; overflow: hidden; }  
        canvas { display: block; }  
    </style>  
</head>  
<body>  
    <script src="three.min.js"></script>  
    <script src="OrbitControls.js"></script>  
    <script src="main.js"></script>  
</body>  
</html>

3. 初始化场景

Three.js 的核心是 场景（Scene）、相机（Camera） 和 渲染器（Renderer） 三者的协作。以下代码展示了如何初始化一个基础场景：

// 初始化场景  
const scene = new THREE.Scene();  

// 创建相机  
const camera = new THREE.PerspectiveCamera(  
    75, // 视野角度  
    window.innerWidth / window.innerHeight, // 宽高比  
    0.1, // 近裁剪面  
    1000 // 远裁剪面  
);  
camera.position.z = 5; // 将相机放置在 z 轴正方向  

// 创建渲染器  
const renderer = new THREE.WebGLRenderer({  
    antialias: true // 启用抗锯齿  
});  
renderer.setSize(window.innerWidth, window.innerHeight);  
document.body.appendChild(renderer.domElement);

核心概念：Three.js 的“乐高积木”式架构

Three.js 的设计哲学是将复杂的 3D 渲染分解为可组合的模块，如同乐高积木般灵活拼接。以下是最关键的几个概念：

1. 场景（Scene）

场景是所有 3D 对象的容器。可以将其想象为一个空房间，开发者需要在此房间中摆放物体、灯光和相机：

const scene = new THREE.Scene();

2. 物体（Objects）与几何体（Geometry）

物体由 几何体（形状定义）和 材质（外观定义）组合而成。例如，创建一个红色立方体：

// 创建几何体（立方体）  
const geometry = new THREE.BoxGeometry(2, 2, 2);  

// 创建材质（红色不透明材质）  
const material = new THREE.MeshBasicMaterial({  
    color: 0xff0000,  
    wireframe: false // 是否显示线框  
});  

// 组合为网格对象并添加到场景  
const cube = new THREE.Mesh(geometry, material);  
scene.add(cube);

3. 相机（Camera）与视图控制

相机决定了观察场景的角度。PerspectiveCamera 模拟人眼透视效果，而 OrthographicCamera 则提供正交投影（无透视变形）。通过 OrbitControls 可实现交互式旋转与缩放：

// 初始化控件  
const controls = new THREE.OrbitControls(camera, renderer.domElement);  
controls.enableDamping = true; // 启用阻尼效果，使旋转更平滑

4. 灯光（Lights）与阴影

光照是营造真实感的关键。Three.js 提供多种光源类型，如点光源（PointLight）、聚光灯（SpotLight）和环境光（AmbientLight）：

// 添加环境光  
const ambientLight = new THREE.AmbientLight(0x404040);  
scene.add(ambientLight);  

// 添加点光源  
const pointLight = new THREE.PointLight(0xffffff, 1);  
pointLight.position.set(10, 10, 10);  
scene.add(pointLight);

动画与渲染循环：让场景“活”起来

Three.js 的动画通过 requestAnimationFrame 实现帧同步渲染。以下代码展示了如何创建一个简单的旋转立方体动画：

function animate() {  
    requestAnimationFrame(animate);  

    // 使立方体绕 y 轴旋转  
    cube.rotation.y += 0.01;  

    // 更新控件并渲染场景  
    controls.update();  
    renderer.render(scene, camera);  
}  
animate();

实战案例：构建一个交互式 3D 场景

案例目标

创建一个包含以下元素的场景：

  • 旋转的立方体
  • 可交互的相机视角
  • 动态的环境光
  • 响应式窗口调整

完整代码示例

// 初始化场景、相机和渲染器  
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({  
    antialias: true  
});  
renderer.setSize(window.innerWidth, window.innerHeight);  
document.body.appendChild(renderer.domElement);  

// 创建立方体  
const geometry = new THREE.BoxGeometry(2, 2, 2);  
const material = new THREE.MeshStandardMaterial({  
    color: 0x00ff00,  
    metalness: 0.5, // 金属度  
    roughness: 0.5 // 粗糙度  
});  
const cube = new THREE.Mesh(geometry, material);  
scene.add(cube);  

// 添加光源  
const ambientLight = new THREE.AmbientLight(0x404040);  
scene.add(ambientLight);  

const pointLight = new THREE.PointLight(0xffffff, 1);  
pointLight.position.set(10, 10, 10);  
scene.add(pointLight);  

// 初始化控件  
const controls = new THREE.OrbitControls(camera, renderer.domElement);  
controls.enableDamping = true;  

// 窗口调整响应  
window.addEventListener('resize', () => {  
    camera.aspect = window.innerWidth / window.innerHeight;  
    camera.updateProjectionMatrix();  
    renderer.setSize(window.innerWidth, window.innerHeight);  
});  

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

    cube.rotation.x += 0.01;  
    cube.rotation.y += 0.01;  

    controls.update();  
    renderer.render(scene, camera);  
}  
animate();

进阶技巧：加载外部模型与优化性能

1. 加载 glTF 模型

Three.js 支持通过 GLTFLoader 加载 3D 模型：

const loader = new THREE.GLTFLoader();  
loader.load('model.gltf', (gltf) => {  
    scene.add(gltf.scene);  
});

2. 性能优化

  • 剔除不可见物体：使用 Frustum Culling 或 Octrees 减少渲染负载。
  • 降低材质复杂度：避免高精度纹理和复杂的着色器。
  • 使用 Web Workers：将计算密集型任务移出主线程。

结论：Three.js 的未来与学习路径

Three.js 凭借其易用性和强大的生态，已成为 Web 3D 开发的首选工具。无论是开发游戏、可视化数据还是虚拟现实应用，它都能提供灵活且高效的解决方案。对于初学者，建议从基础场景搭建开始，逐步探索材质、光照和动画的高级特性；中级开发者则可深入研究模型加载、物理引擎（如 Cannon.js）和实时渲染优化。

通过本文的示例和代码，读者已具备构建简单 3D 应用的基础能力。接下来，不妨尝试以下实践：

  1. 将立方体替换为自定义几何体（如球体或环形）。
  2. 添加键盘或鼠标事件，控制物体的移动。
  3. 尝试使用 WebGL2Renderer 开启更高级的图形功能。

Three.js 的世界充满无限可能，期待你用它创造令人惊叹的视觉体验！

最新发布

查看更多文章