携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第10天，点击查看活动详情 >>

基础网格材质(MeshBasicMaterial)

一个以简单着色（平面或线框）方式来绘制几何体的材质。
这种材质不受光照的影响。

纹理

// 写法1：
const material = new THREE.MeshBasicMaterial({
    map: doorColorTexture
});
// 写法2：
const material = new THREE.MeshBasicMaterial();
material.map = doorColorTexture;

颜色

// 写法1：
const material = new THREE.MeshBasicMaterial({ color: "pink" });
// 写法2：
const material = new THREE.MeshBasicMaterial();
material.color.set("pink");
// 写法3：
const material = new THREE.MeshBasicMaterial();
material.color = new THREE.Color("green");

法线网格材质(MeshNormalMaterial)

wireframe 线框

线框：布尔型，将几何体渲染为线框，默认值为false(即渲染为平滑着色)。线框线宽：浮动，控制线框厚度。默认值为1。
由于大多数平台上带有WebGL渲染器的OpenGL核心配置文件的限制，无论设置值如何，线宽都将始终为1。

const material = new THREE.MeshNormalMaterial();
// 线框显示
material.wireframe = true;

flatShading 平面阴影

平面阴影：布尔型定义是否使用平面着色渲染材质。默认值为false

const material = new THREE.MeshNormalMaterial();
// 平面阴影显示
material.flatShading = true;

无光泽材料(MeshMatcapMaterial)

MeshMatcapMaterial 由一个材质捕捉（MatCap，或光照球（Lit Sphere））纹理所定义，其编码了材质的颜色与明暗。
由于mapcap图像文件编码了烘焙过的光照，因此MeshMatcapMaterial 不对灯光作出反应。它将会投射阴影到一个接受阴影的物体上(and shadow clipping works)，但不会产生自身阴影或是接受阴影。

matcap 纹理

const material = new THREE.MeshMatcapMaterial();
const matcapTexture = textureLoader.load("./img/matcaps/8.png");
material.matcap = matcapTexture;

网格深度材料(MeshDepthMaterial)

一种按深度绘制几何体的材质。深度基于相机远近平面。白色最近，黑色最远。

const material = new THREE.MeshDepthMaterial();

Lambert网格材质(MeshLambertMaterial)

一种非光泽表面的材质，没有镜面高光。
该材质使用基于非物理的Lambertian模型来计算反射率。这可以很好地模拟一些表面（例如未经处理的木材或石材），但不能模拟具有镜面高光的光泽表面（例如涂漆木材）。

需要灯光辅助才能看到形状

const material = new THREE.MeshLambertMaterial();
// 环境光
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
// 点光源
const pointLight = new THREE.PointLight(0xffffff, 0.5);
pointLight.position.x = 2;
pointLight.position.y = 3;
pointLight.position.z = 4;
scene.add(pointLight);

未完待续……

Three.js(九)——Materials材质 (一)