What are the properties of three.js emissive materials

user_10147489 0
Viewed 844

I'm working on a simple demonstration in three.js and am confused by the behaviour of THREE.MeshPhongMaterial coming from a background in the Unity Game Engine.

create_ring() {
    // creates a ring mesh per inputed class data
    const material = new THREE.MeshPhongMaterial({
        color: this.color,
        emissive: this.color,
        emissiveIntensity: 1.6
    });
    const ring_geo = new THREE.TorusGeometry(this.radius, this.thickness, 16, 100);

    // Translate in space
    ring_geo.translate(5, 5, 0)

    // add texture to mesh and output
    const ring_mesh = new THREE.Mesh(ring_geo, material);
    ring_mesh.receiveShadow = true;
    ring_mesh.castShadow = true;
    ring_mesh.name = "ring";
    return ring_mesh
}

I was under the impression the materials would create a nice gentle pool of light on the floor geometry but now having researched the problem either I need some advice on how to implement this as a shader feature? Or I'm not understanding the limits and behaviour of materials in three.js? Below is an example of what is possible with a material's emissive option in Unity.

three.js javascript
1 Answers

There's more than just an emissive material shown in the Unity screenshot above — the objects around the light probably were probably also marked as static, which Unity uses to "bake" the glow effect onto them, while compiling the application. There could also be a "bloom" post-processing effect to create the dynamic glow seen by the camera around the object.

Because three.js runs on the web and does not have an offline compilation step, these additional effects have to be configured manually. You can see the three.js bloom example for some help adding the bloom effect to a scene. Baking the light onto surrounding objects would generally be done in Blender, and then loaded into three.js with the base color texture or a lightmap.

user_13147620
Related