three.js入门教程：从基础到进阶

"three基础入门笔记1" 这是一份关于three.js入门的学习笔记，主要涵盖了WebGL和three.js的基础知识，包括照相机、几何形状、材质、网格、动画、外部模型、光照与阴影以及着色器等多个核心概念。 一、基础知识 1.1 WebGPU是Web上用于3D图形渲染的技术，它允许JavaScript直接与GPU交互，实现复杂的3D图形展示。 1.2 three.js是基于WebGL的3D库，简化了WebGL的使用，提供了丰富的3D对象和效果，适合构建网页中的3D场景。 1.3 three.js的基本组成包括Canvas标签、渲染器(Renderer)、场景(Scene)和照相机(Camera)： - Canvas标签：HTML5元素，用于在网页上绘制2D或3D图形。 - 渲染器：负责将3D场景渲染到Canvas上，处理光照、材质等视觉效果。 - 场景：包含3D模型、光照、摄像机等所有元素的容器。 - 照相机：决定了观察3D世界的视角和方式。 二、照相机 2.1 照相机分为正交投影和透视投影两种类型： - 正交投影照相机适用于绘制2D图形或等比例缩放的3D物体，参数包括长宽比例和位置等。 - 透视投影照相机模拟真实世界的透视效果，距离近的物体看起来更大，参数包括视角张角等。 三、几何形状 3.1 three.js提供多种基本几何形状如立方体、平面、球体、圆形、圆柱体、多面体（正四面体、正八面体、正二十面体）和圆环面。此外，还有文字形状和自定义形状的支持。 四、材质 4.1 材质是赋予3D物体颜色和外观的关键，包括BasicMaterial、Lambert材质、Phong材质和法向材质。材质还可以应用纹理贴图，如单张图像、多张图像以及棋盘格纹理。 五、网格 5.1 网格是基于几何形状和材质构建的3D对象，可以修改其属性，如材质、位置、缩放和旋转。 六、动画 6.1 动画效果通过控制时间序列来实现，可以使用setInterval或requestAnimationFrame方法。requestAnimationFrame更适合于3D动画，因为它与浏览器的渲染周期同步。 七、外部模型 7.1 three.js支持多种3D模型格式，如OBJ、FBX等。加载模型时，可能需要为模型分配材质，或者在建模软件中预先设置材质。 八、光与影 8.1 光源类型包括环境光、点光源、平行光和聚光灯，它们影响3D场景的视觉效果。阴影的添加可以增加场景的真实感。 九、着色器 9.1 渲染和着色器是图形渲染的核心。顶点着色器处理顶点变换，而片元着色器决定每个像素的颜色，两者结合可以实现复杂的定制渲染效果。 这份笔记详细介绍了three.js的基础概念和关键功能，为初学者提供了良好的学习路径，有助于理解并掌握web端3D图形编程。