Three.jsThree.js概念总结 1.纹理(Texture) = 颜色 + 位置 2.材质(Material)

Three.js概念总结

1.纹理(Texture) = 颜色 + 位置

2.材质(Material) = 反光特性

3.控制器(Controls) = 控制相机活动

4.灯光(Light) = 光源

5.渲染器(Renderer) = 对相机采集到的图像进行处理并渲染到canvas上

6.加载器(Loader) = 加载特定格式的文件并转化为three.js库可用的数据

7.动画(Animation) = 控制场景内对象随时间变化而变化

8.关键帧轨道(KeyframeTrack) =

9.几何体(Geometry) = 让材质和纹理附着的对象

Three.js程序结构

几何体

模型

根据构成元素分类

根据材质分类

变换

灯光

属性

1.color

光照的颜色：0xffffff

2.intensity

光照的强度：1

3.position

4.target

5.distance

光源到光照强度为0的位置：0(距离无穷大)

6.decay

沿着光照距离的衰退量：1

7.angle

8.visible

光源是否可见

three.js中相机的类型及使用场景

1.PerspectiveCamera(透视摄像机): 视锥体(fov,aspect,near,far)
2.OrthographicCamera(正交摄像机):渲染2D场景
3.StereoCamera(立体相机):3D立体影像
4.ArrayCamera(摄像机矩阵)
5.CubeCamera(立方相机)

动画

骨骼动画

1.AnimationAction(调度动画)

2.AnimationClip(动画剪辑,关键帧轨道集)

3.AnimationMixer(动画混合器)

const { animations } = useGLTF(url) //获取模型动画
const mixer = new THREE.AnimationMixer(scene) //声明一个动画混合器
animations.forEach(clip => mixer.clipAction(clip).play()) //播放模型所有动画

材质(Material)

本质是反光属性。

组对象(Group)

纹理(Texture)

颜色是材质表面所有的像素都是同一个颜色，纹理是根据配置信息在材质表面显示纹理（贴图）不同位置的像素点。

纹理坐标UV

纹理贴图

凹凸贴图

凹凸贴图和法线贴图功能相似，只是没有法线贴图表达的几何体表面信息更丰富。凹凸贴图是用图片像素的灰度值表示几何表面的高低深度，如果模型定义了法线贴图，就没有必要在使用凹凸贴图。

什么是VideoTexture

视频纹理。

加载器

1.GLTFLoader
2.

控制器

控制相机活动。

Three.js