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

Phong网格材质(MeshPhongMaterial)

一种用于具有镜面高光的光泽表面的材质。改材质使用废物里的Blinn-Phong模型来计算反射率。与 MeshLambertMaterial 中使用的 Lambertain 模型不同，改材质可以模拟具有镜面高光的光泽表面（例如涂漆木材）。

该种改制需要灯光辅助才能看到

specular 高光颜色

材质的高光颜色，默认为0x111111（深灰色）的颜色Color。

const material = new THREE.MeshPhongMaterial();
material.specular = new THREE.Color("red");    // 设置材质的高光颜色为红色

shininess 高亮程度

specular高亮的程度，越高的值越闪亮，默认值为30。

const material = new THREE.MeshPhongMaterial();
material.shininess = 100;

卡通材质(MeshToonMaterial)

构造器 MeshToonMaterial(参数:对象) 参数-(可选)具有一个或多个定义材料外观的属性的对象。材料的任何属性(包括从材料继承的任何属性)都可以在这里传入。属性color是个例外，它可以作为十六进制字符串传入，默认情况下是0xffffff(白色)。内部调用Color.set(color)。

需要灯光辅助

// 创建卡通材料
const material = new THREE.MeshToonMaterial();
// 环境光
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);

gradientMap 梯度纹理贴图

梯度贴图：纹理、卡通阴影的渐变贴图，需要将Texture.minFilter和Texture.magFilter设置为三个。使用这种类型的纹理时使用NearestFilter。默认值为null。

// 创建卡通材料
const material = new THREE.MeshToonMaterial();
const gradientsTexture = textureLoader.load("./img/gradients/5.jpg");
gradientsTexture.minFilter = THREE.NearestFilter;
gradientsTexture.magFilter = THREE.NearestFilter;
gradientsTexture.generateMipmaps = false;
material.gradientMap = gradientsTexture;

标准网格材质(MeshStandardMaterial)

一种基于物理的标准材质，该材质提供了比 MeshLambertMaterial 或 MeshPhongMaterial 更精确和逼真的结果，代价是计算成本更高。

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

请注意，为获得最佳效果，您在使用此材质时应始终指定 environment map

envMap 环境贴图

环境贴图，为了能够保证物理渲染准确，您应该添加由 PMREMGenerator 预处理过的环境贴图，默认为null。

const environmentMapTexture = cubeTextureLoader.load([
    "./img/environmentMaps/0/px.jpg",
    "./img/environmentMaps/0/nx.jpg",
    "./img/environmentMaps/0/py.jpg",
    "./img/environmentMaps/0/ny.jpg",
    "./img/environmentMaps/0/pz.jpg",
    "./img/environmentMaps/0/nz.jpg",
]);
const material = new THREE.MeshStandardMaterial();
material.envMap = environmentMapTexture;

metalness 金属度

材质与金属的相似度。非金属材质，如木材或石材，使用0.0，金属使用1.0，通常没有中间值。默认值为0.0。0.0到1.0之间的值可用于生锈金属的外观。如果还提供了metalnessMap，则两个值相乘。

const material = new THREE.MeshStandardMaterial();
material.metalness = 0.7;   // 金属度

metalnessMap 光泽金属度贴图

该纹理的蓝色通道用于改变材质的金属度。

const doormetalnessTexture = textureLoader.load("./img/metalness.jpg");
material.metalnessMap = doormetalnessTexture;

roughness 粗糙程度

材质的粗糙程度。0.0表示平滑的镜面反射，1.0表示完全漫反射。默认值为1.0。如果还提供roughnessMap，则两个值相乘。

const material = new THREE.MeshStandardMaterial();
material.roughness = 0.2;   // 粗糙程度

roughnessMap 粗糙程度贴图

该纹理的绿色通道用于改变材质的粗糙度。

const doorroughnessTexture = textureLoader.load("./img/roughness.jpg");
material.roughnessMap = doorroughnessTexture;

环境遮罩(aoMap)下一篇再来讨论(^し^)

Three.js(十)——Materials材质 (二)