Three.js 基础知识，Three.js 学习笔记

Three.js 相关教程：http://www.webgl3d.cn/

基础知识

Three.js 是一个基于 WebGL 的 JavaScript 库，它允许你在浏览器中创建和显示3D图形。

1.组件

在Three.js中通常涉及以下几个基本组件：

• 场景（Scene）：场景是所有对象、灯光和相机的容器。它是3D世界中所有可见元素的集合。
• 相机（Camera）：相机定义了观察场景的视角。Three.js中最常用的相机是透视相机（PerspectiveCamera）和正交相机（OrthographicCamera）。
• 渲染器（Renderer）：渲染器负责将场景渲染到HTML页面的画布（Canvas）或WebGL渲染上下文中。Three.js支持WebGLRenderer、CanvasRenderer和SVGRenderer等多种渲染器。
• 几何体（Geometry）：几何体定义了3D对象的形状。Three.js提供了多种几何体，如立方体（CubeGeometry）、球体（SphereGeometry）等。
• 材料（Material）：材料定义了几何体的表面属性，如颜色、纹理、透明度等。
• 纹理（Texture）：纹理是图像文件，可以应用到材料上，以增加3D对象的视觉效果。
• 光源（Light）：光源用于照亮场景。Three.js提供了多种光源类型，如环境光（AmbientLight）、点光源（PointLight）、聚光灯（SpotLight）和平行光（DirectionalLight）。
• 网格（Mesh）：网格是几何体和材料的组合，它是3D世界中的基本渲染单元。
• 动画（Animation）：三维动画是通过改变对象的位置、旋转或缩放来创建的。Three.js提供了动画系统，包括关键帧动画和骨骼动画。
• 控制（Controls）：控制器允许用户通过鼠标或键盘与3D场景交互，如OrbitControls、PointerLockControls等。
• 辅助对象（Helpers）：辅助对象如轴辅助（AxesHelper）、网格辅助（GridHelper）和箭头辅助（ArrowHelper）等，用于调试和可视化3D空间。
• 环境和后期处理（Environment and Post-processing）：环境可以增加场景的真实感，如HDR环境纹理。后期处理可以添加效果，如景深、颜色校正等。

未完待续...