Three.js Tutorial: Specular Mesh Material Phong

Recommended: Add NSDT Scene Editor to your 3D toolchain

Other series of tools: NSDT Jianshi digital twin

Specular Mesh Material Phong

The specular mesh material is the same as MeshPhongMaterialthe base mesh material MeshBasicMaterialand the diffuse mesh material MeshLambertMaterialare the materials of the mesh model Mesh.

The specular mesh material MeshPhongMaterial is affected by lighting just like the diffuse mesh material MeshLambertMaterial.

MeshPhongMaterialLight reflection characteristics

MeshPhongMaterialThe difference between them and MeshLambertMaterialboth will be affected by light is that there are differences in the way light is reflected.

MeshPhongMaterialMeshLambertMaterialSpecular reflection effects that cannot be achieved can be achieved . For the highlight effect, you can imagine that you observe a car under the sun, and you will find that at a specific angle and position, you can see a certain local area on the surface of the car is very bright.

Specular vs Diffuse

MeshPhongMaterialIt can provide a specular reflection effect, which can be compared to taking a mirror in your life, placing it under the sunlight, adjusting the angle, and reflecting the sunlight to other places. If the reflected light is facing the eyes, that is, when the reflected light is parallel to the line of sight , will be very dazzling.

MeshLambertMaterialThe corresponding Mesh is illuminated by light, without the effect of specular reflection, but just a diffuse reflection, that is, the light reflects around.

Highlight properties.shininess

Through the MeshPhongMaterialspecular brightness .shininessproperty, you can control the specular reflection effect.

// 模拟镜面反射，产生一个高光效果
const material = new THREE.MeshPhongMaterial({
    color: 0xff0000,
    shininess: 20, //高光部分的亮度，默认30
});

Specular Color Properties.specular

.specularYou can set different values ​​for the color property , for example 0x444444, 0xfffffff to view the rendering effect changes.

// 模拟镜面反射，产生一个高光效果
const material = new THREE.MeshPhongMaterial({
    color: 0xff0000,
    shininess: 20, //高光部分的亮度，默认30
    specular: 0x444444, //高光部分的颜色
});

3D Modeling Learning Studio

Previous: Three.js Tutorial: Introduction to Threejs Common Geometries (mvrlink.com)

Next: Three.js Tutorial: WebGL Renderer Settings (Jagged Blur) (mvrlink.com)