1、纹理贴图

2、几何体顶点纹理坐标

3.纹理的内存管理

纹理往往是three.js应用中使用内存最多的部分。重要的是要明白，一般来说，纹理会占用 宽度 * 高度 * 4 * 1.33 字节的内存。

假如图片的尺寸大小为 200*100像素，那么它占用的内存是：200 * 100 * 4 * 1.33。跟它实际的文件大小无关，文件大小小，下载速度快，尺寸小，占用的内存就小。

• JPG vs PNG JPG有损压缩，PNG有无损压缩，所以PNG的下载速度一般比较慢。但是，PNG支持透明度。PNG可能也适合作为非图像数据（non-image data）的格式，比如法线图，以及其他种类的非图像图。在WebGL中JPG使用的内存并不比PNG少。

4.光照

• 环境光 AmbientLight 环境光对模型的影响：环境光 （AmbientLight）只是简单地将材质的颜色与光照颜色进行叠加（PhotoShop 里的正片叠底模式），再乘以光照强度。没有方向，无法产生阴影，场景内任何一点受到的光照强度都是相同的，除了改变场景内所有物体的颜色以外，不会使物体产生明暗的变化。

color = materialColor * light.color * light.intensity;

• 半球光 HemisphereLight 半球光（HemisphereLight）的颜色是从天空到地面两个颜色之间的渐变，与物体材质的颜色作叠加后得到最终的颜色效果。一个点受到的光照颜色是由所在平面的朝向（法向量）决定的 —— 面向正上方就受到天空的光照颜色，面向正下方就受到地面的光照颜色，其他角度则是两个颜色渐变区间的颜色。

• 方向光 DirectionalLight 方向光（DirectionalLight）的方向是从它的位置照向目标点的位置。

const color = 0xFFFFFF;
const intensity = 1;
const light = new THREE.DirectionalLight(color, intensity);
light.position.set(0, 10, 0);
light.target.position.set(-5, 0, 0);
scene.add(light);
scene.add(light.target);

需要注意，每添加一个光源到场景中，都会降低 three.js 渲染场景的速度，所以应该尽量使用最少的资源来实现想要的效果。

阅读量：

评 论：