材质（Material）

材质（Material）独立于物体顶点信息之外，与渲染效果相关的属性。

设置材质（Material）可以改变物体的颜色、纹理贴图、光照模式等。

基本材质（BasicMaterial）

物体的颜色始终为该材质的颜色，不会由于光照产生明暗、阴影效果。

THREE.MeshBasicMaterial(opt);

没有设置颜色就是随机颜色

常见属性

• visible：是否可见，默认为 true
• side：渲染面片正面或是反面，默认为正面 THREE.FrontSide，可设置为反面 THREE.BackSide，或双面 THREE.DoubleSide
• wireframe：是否渲染线而非面，默认为 false
• color：十六进制 RGB 颜色，如红色表示为 0xff0000
• map：使用纹理贴图

示例

const material = new THREE.MeshBasicMaterial({
  color: 0xffff00,
  opacity: 0.75,
});
const cube = new THREE.Mesh(new THREE.BoxGeometry(3, 3, 3), material);
scene.add(cube);

Lambert 材质（MeshLambertMaterial）

符合 Lambert 光照模型的材质

Lambert 光照模型的主要特点是只考虑漫反射而不考虑镜面反射的效果

不适应 金属、镜子等需要镜面反射效果的物体

光照模型公式为：

Idiffuse = Kd * Id * cos(theta)

Idiffuse 是漫反射光强，Kd 是物体表面的漫反射属性，Id 是光强，theta 是光的入射角弧度

需要 PointLight 光源，并且强度还有要求

const light = new THREE.PointLight(0xffffff, 50, 100);
light.position.set(5, 10, 15);
scene.add(light);

核心代码

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  canvas: dom.value,
});
renderer.setClearColor(0x000000);

//   创建场景
const scene = new THREE.Scene();

//   创建相机
const camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
camera.position.set(25, 25, 25);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

const light = new THREE.PointLight(0xffffff, 1, 0, 0);
light.position.set(5, 10, 15);
scene.add(light);

const material = new THREE.MeshLambertMaterial({
  color: 0xffff00,
});

const cube = new THREE.Mesh(new THREE.BoxGeometry(3, 3, 3), material);
scene.add(cube);

// 渲染
renderer.render(scene, camera);

Phong 材质（MeshPhongMaterial

符合 Phong 光照模型的材质

和 Lambert 不同的是，Phong 模型考虑了镜面反射的效果，因此对于金属、镜面的表现尤为适合。

光照模型公式为：

Ispecular = Ks * Is * cos(theta)^n

Ispecular 是镜面反射的光强，Ks 是材质表面镜面反射系数，Is 是光源强度，alpha 是反射光与视线的夹角，n 是高光指数，越大则高光光斑越小。

const material = new THREE.MeshPhongMaterial({
  color: 0xff0000,
  specular: 0xffff00,
  // shininess 越大，光斑越小
  shininess: 100,
});

核心代码

// 创建渲染器
const renderer = new THREE.WebGLRenderer({
  canvas: dom.value,
});
renderer.setSize(400, 300);
renderer.setClearColor(0xffffff);

//   创建场景
const scene = new THREE.Scene();

//   创建相机
const camera = new THREE.OrthographicCamera(-5, 5, 3.75, -3.75, 0.1, 100);
camera.position.set(25, 25, 25);
camera.lookAt(new THREE.Vector3(0, 0, 0));
scene.add(camera);

// 光源！
const light = new THREE.PointLight(0xffffff, 1, 0, 0);
light.position.set(10, 15, 25);
scene.add(light);

const material = new THREE.MeshPhongMaterial({
  color: 0xff0000,
  specular: 0xffff00,
  shininess: 100,
});

const sphere = new THREE.Mesh(new THREE.SphereGeometry(3, 20, 8), material);
scene.add(sphere);

// 渲染
renderer.render(scene, camera);

法向材质

常用于调试

没有参数，不要光源

new THREE.MeshNormalMaterial();

camera.position.set(25, 25, 25);

材质纹理贴图

可以设置图片、视频、3D 模型等

todo