Search code examples
three.js

Glossy materials in THREE.js

How can we create glossy effects on materials with three.js like the one on this link? I am not interested in path tracing (yet :) )

WebGL Path Tracing

Solution

  • Glossy refers to the ability of a material to reflect light in the specular direction.

    In three.js, you can use THREE.MeshPhongMaterial to do that. For example:

    const material = new THREE.MeshPhongMaterial( { 
    color: 0x996633,
    envMap: envMap, // optional environment map
    specular: 0x050505,
    shininess: 100
} )

    You can also use MeshStandardMaterial with an environment map.

    three.js r.97