本文档旨在为初学者提供一个全面的 Three.js 入门指南。我们将从 Three.js 的基本概念开始，逐步介绍如何创建场景、添加物体、设置材质、使用光照和相机，以及如何实现简单的动画和交互。通过本教程，你将能够掌握 Three.js 的核心知识，并为进一步学习和开发复杂的 3D 应用打下坚实的基础。
1. Three.js 简介
Three.js 是一个基于 JavaScript 的 3D 图形库，它简化了 WebGL 的使用，允许开发者使用更高级别的 API 创建和渲染 3D 场景。WebGL 本身是一个底层的图形 API，直接操作起来比较复杂，而 Three.js 封装了 WebGL 的许多细节，使得开发者可以更专注于场景的构建和交互逻辑。
Three.js 的主要特点：
- 易于使用： 提供了简洁的 API，降低了 3D 图形开发的门槛。
- 跨平台： 基于 WebGL，可以在支持 WebGL 的浏览器上运行。
- 丰富的特性： 支持各种 3D 模型格式、材质、光照、阴影、动画等。
- 活跃的社区： 拥有庞大的用户群体和丰富的资源。
2. 环境搭建
在使用 Three.js 之前，需要先搭建开发环境。最简单的方式是直接在 HTML 文件中引入 Three.js 的 CDN 链接。
<!DOCTYPE html>
<html><head><title>Three.js 教程</title><style>body {margin: 0;}canvas {display: block;}</style></head><body><script src="https://cdn.jsdelivr.net/npm/three@0.155.0/build/three.min.js"></script><script>// Three.js 代码将在这里编写</script></body>
</html>
也可以使用 npm 安装 Three.js，并在项目中使用模块化的方式引入。
npm install three
import * as THREE from 'three'
3. 基本概念
Three.js 中有几个核心概念需要理解：
- Scene (场景)： 3D 世界的容器，所有物体、光照和相机都添加到场景中。
- Camera (相机)： 定义了观察场景的视角。
- Renderer (渲染器)： 将场景渲染到屏幕上。
- Geometry (几何体)： 定义了物体的形状，例如立方体、球体等。
- Material (材质)： 定义了物体的外观，例如颜色、纹理等。
- Mesh (网格)： 几何体和材质的组合，是场景中实际可见的物体。
- Light (光照)： 照亮场景，影响物体的颜色和阴影。
4. 创建第一个 Three.js 场景
下面是一个简单的 Three.js 场景，包含一个立方体：
// 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(1, 1, 1)// 5. 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 })// 6. 创建网格
const cube = new THREE.Mesh(geometry, material)
scene.add(cube)// 7. 渲染循环
function animate() {requestAnimationFrame(animate)cube.rotation.x += 0.01cube.rotation.y += 0.01renderer.render(scene, camera)
}animate()
代码解释：
-
创建场景：
new THREE.Scene()创建了一个新的场景。 -
创建相机：
new THREE.PerspectiveCamera()创建了一个透视相机，参数分别是：75：视野角度（FOV）。window.innerWidth / window.innerHeight：宽高比。0.1：近平面。1000：远平面。camera.position.z = 5将相机沿 Z 轴移动 5 个单位，以便观察立方体。
-
创建渲染器：
new THREE.WebGLRenderer()创建了一个 WebGL 渲染器。
renderer.setSize()设置渲染器的大小，使其与窗口大小一致。
document.body.appendChild(renderer.domElement)将渲染器的 DOM 元素添加到页面中。 -
创建几何体：
new THREE.BoxGeometry()创建了一个立方体几何体，参数分别是立方体的宽度、高度和深度。 -
创建材质：
new THREE.MeshBasicMaterial()创建了一个基础材质，参数是材质的颜色。 -
创建网格：
new THREE.Mesh()创建了一个网格，将几何体和材质组合在一起。
scene.add(cube)将立方体添加到场景中。 -
渲染循环：
animate()函数是一个循环，不断更新场景并渲染。
requestAnimationFrame(animate)请求浏览器在下一次重绘之前调用 animate() 函数。
cube.rotation.x += 0.01和cube.rotation.y += 0.01使立方体沿 X 轴和 Y 轴旋转。
renderer.render(scene, camera)使用相机渲染场景。
5. 几何体
Three.js 提供了多种几何体，例如：
THREE.BoxGeometry：立方体。THREE.SphereGeometry：球体。THREE.PlaneGeometry：平面。THREE.CylinderGeometry：圆柱体。THREE.TorusGeometry：圆环。
可以根据需要选择合适的几何体，并设置其参数。
6. 材质
Three.js 提供了多种材质，例如：
THREE.MeshBasicMaterial：基础材质，不受光照影响。THREE.MeshLambertMaterial：Lambert 材质，受光照影响，但没有镜面反射。THREE.MeshPhongMaterial：Phong 材质，受光照影响，有镜面反射。THREE.MeshStandardMaterial：标准材质，基于物理的渲染 (PBR)，更真实。
可以根据需要选择合适的材质，并设置其颜色、纹理、光泽度等属性。
7. 光照
Three.js 提供了多种光照，例如：
- THREE.AmbientLight：环境光，照亮整个场景。
- THREE.DirectionalLight：平行光，模拟太阳光。
- THREE.PointLight：点光源，从一个点向四周发光。
- THREE.SpotLight：聚光灯，从一个点向一个方向发光。
需要将光照添加到场景中，才能使物体显示出颜色和阴影。
8. 动画
可以使用 requestAnimationFrame() 函数创建动画。在每一帧中，更新物体的位置、旋转或缩放，然后重新渲染场景。
9. 交互
可以使用 JavaScript 事件监听器来处理用户的交互，例如鼠标点击、键盘按键等。可以根据用户的交互来改变场景中的物体或相机。
10. 总结
本教程介绍了 Three.js 的基本概念和使用方法。通过学习本教程，你应该能够创建简单的 3D 场景，并实现简单的动画和交互。要深入学习 Three.js，可以参考官方文档、示例代码和社区资源。祝你学习愉快！
 114. 二叉树展开为链表 （深度优先搜索dfs+链表）)
![[Android] 显示的内容被导航栏这挡住](http://pic.xiahunao.cn/[Android] 显示的内容被导航栏这挡住)
)
