一、简单理解什么是 Three.js简单来说Three.js 是WebGL 的高层封装 3D 图形引擎。原生 WebGL 需要编写大量底层着色器代码、处理复杂的图形底层逻辑入门门槛极高。而 Three.js 帮我们封装好了所有底层操作让我们只用简单的 JS 代码就能在浏览器中快速搭建 3D 场景、模型、动画和交互效果是目前网页 3D 开发的主流工具。二、Three.js 核心基石万能三件套所有 Three.js 项目无论简单还是复杂核心骨架永远由场景、相机、渲染器三部分组成也是我们入门必须掌握的第一个知识点。1. 场景 Scene舞台可以把场景理解为一个3D 容器、虚拟舞台我们创建的所有模型、灯光、辅助线等元素都需要添加到场景中才会被渲染显示。2. 相机 Camera眼睛相机相当于我们的眼睛决定了我们以什么角度、什么视野观看 3D 场景。没有相机我们就看不到场景里的任何内容。3. 渲染器 Renderer画师渲染器的作用是将 3D 场景和相机视角转化为浏览器可识别的 2D 画面绘制在画布上展示给用户。这是所有 Three.js 项目的通用起步代码// 1. 创建场景 const scene new THREE.Scene() // 2. 创建透视相机 const camera new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000) camera.position.set(4.25, 1.4, -4.5) // 3. 创建渲染器开启抗锯齿 const renderer new THREE.WebGLRenderer({ antialias: true }) renderer.setSize(window.innerWidth, window.innerHeight) document.body.appendChild(renderer.domElement) // 渲染画面 renderer.render(scene, camera)三、相机详解两种主流相机用法Three.js 最常用的只有两种相机适配不同的开发场景1. 透视相机 PerspectiveCamera3D 场景首选模拟人眼视觉效果具备近大远小的透视感所有 3D 展厅、模型展示、3D 游戏场景都用这款相机。参数说明视野角度、画布宽高比、近裁剪面、远裁剪面控制场景渲染范围2. 正交相机 OrthographicCamera2D 场景首选无透视效果物体远近大小一致没有近大远小主要用于 2D 绘图、UI 界面、平面图展示等场景。四、灯光系统3D 场景的氛围感核心Three.js 中没有灯光场景就是一片漆黑物体无法展示材质和立体效果。入门掌握四种常用光源即可1. 环境光 AmbientLight均匀照亮整个场景无方向、不产生阴影主要用于提亮场景暗部避免画面死黑一般作为基础打底光源。2. 平行光 DirectionalLight模拟太阳光效果光线平行照射方向固定可产生阴影适合户外、自然光场景。3. 点光源 PointLight模拟灯泡、烛火从一个点向四周全方位发散光线可设置照射距离、亮度。4. 聚光灯 SpotLight模拟舞台射灯、展厅顶灯呈圆锥形光束照射支持边缘柔化、阴影虚化是 3D 展厅、产品展示的首选主光源。//环境光均匀照亮全场 const ambient new THREE.AmbientLight(0xffffff,0.4) scene.add(ambient) //平行光模拟太阳光 const dirLight new THREE.DirectionalLight(0xffffff,0.6) dirLight.position.set(5,10,5) dirLight.castShadow true scene.add(dirLight) //点光源灯泡式发散光源 const pointLight new THREE.PointLight(0xffffff,0.5) pointLight.position.set(3,3,3) scene.add(pointLight) //聚光灯锥形定向光束展厅展品打光首选 const spotLight new THREE.SpotLight(0xffffff,0.8) spotLight.position.set(0,8,0) spotLight.castShadow true scene.add(spotLight)五、3D 物体核心几何体 材质 纹理所有 3D 模型物体都是由几何体 材质组合而成纹理是物体的表层贴图决定最终视觉效果。1. 几何体 Geometry决定物体的形状结构Three.js 内置了立方体、球体、平面、圆柱体等基础几何体也支持自定义模型几何体外部导入 GLB/GLTF 模型。2. 材质 Material决定物体的外观质感、颜色、反光、透光效果入门常用材质从基础到写实排序MeshBasicMaterial基础材质无光影不受灯光影响MeshLambertMaterial漫反射材质有基础光影无高光MeshPhongMaterial高光材质可模拟金属、塑料高光效果MeshStandardMaterial标准物理材质支持金属度、粗糙度写实效果更好MeshPhysicalMaterial高阶物理材质支持清漆、透光、折射可模拟车漆、玻璃、玉石等真实质感3. 纹理 Texture就是贴在物体表面的图片素材用来丰富物体细节比如车身纹理、地面纹理、墙面贴图等通过 TextureLoader 加载使用。//基础纯色材质 const baseMat new THREE.MeshBasicMaterial({color:0x2288ff}) //标准物理材质金属、粗糙度配置 const metalMat new THREE.MeshPhysicalMaterial({ color:0xcccccc, metalness:1, roughness:0.2, clearcoat:1, transmission:0 }) //玻璃透光材质 const glassMat new THREE.MeshPhysicalMaterial({ color:0xffffff, metalness:0, roughness:0, transmission:1 }) //纹理贴图加载 import {TextureLoader} from three const textureLoader new TextureLoader() const wallTexture textureLoader.load(./wall.jpg)六、实用辅助工具开发调试必备这些工具不影响最终线上效果但能极大提升开发调试效率是 Three.js 开发的常用标配OrbitControls 轨道控制器支持鼠标拖拽旋转视角、滚轮缩放场景自由查看 3D 模型lil-gui 调试面板可视化实时修改模型颜色、灯光强度、位置等参数不用反复改代码刷新AxesHelper 坐标轴辅助线展示 X/Y/Z 三轴方向快速定位物体位置GridHelper 网格辅助线展示地面网格方便对齐物体位置七、动画与交互核心知识点1. 渲染循环静态场景只需渲染一次动画、动态交互场景需要通过 requestAnimationFrame 开启循环渲染实时更新画面。2. Tween.js 补间动画原生 JS 动画书写繁琐、效果生硬Tween.js 是专业的补间动画库可实现位置、旋转、大小的平滑过渡动画适配 Three.js 所有动态效果。3. Raycaster 射线检测3D 场景交互核心通过鼠标点击位置发射射线检测命中的 3D 物体实现点击选中、点击触发动画等交互效果。八、适配与优化基础1. 窗口响应式浏览器窗口大小变化时需要实时更新相机宽高比和渲染器尺寸避免 3D 画面拉伸变形。2. 阴影优化Three.js 阴影默认精度较低可通过调整阴影分辨率、偏移参数解决阴影模糊、条纹失真问题提升场景质感。九、学习总结以上就是 Three.js 入门阶段的全部核心理论知识整体逻辑非常清晰三件套搭建基础场景 → 灯光材质塑造视觉质感 → 辅助工具优化开发体验 → 动画射线实现交互 → 响应式适配页面。单纯看理论很难彻底掌握下一篇我会分享完整的 3D 兰博基尼汽车展厅实战项目把这篇所有知识点全部落地手把手实现模型加载、材质调试、灯光氛围、开关门动画、视角切换、点击交互等完整功能感兴趣的小伙伴可以持续关注参考资源Three.js 官方文档https://threejs.org/docs/Tween.js 动画库https://github.com/tweenjs/tween.js免费 3D 模型资源https://sketchfab.com/