3js color/material dull rendering (VRML Loader)

Questions
, ,
1

render.wrl (184.0 KB)
Three.js Version 149
I am trying to render VRML files using the loader, but when rendered in 3js, the color and texture all come out very dull. When rendered using online viewers, they come out vibrant and saturated like the original cad model. I tried adding different types of lighting the shading comes out to be right just the original color scheme seems to be off. Multitude of VRML files were tested and results were the same with the black part not showing as black.
image
image

Code snippet on scene generation (within Angular frontend)
Note that this didn’t work with the minimal settings (simple light and loaded in component)

      this.scene = new THREE.Scene();
      const ambientLight = new THREE.AmbientLight("#e0e0e0", 0.5);
      this.scene.add( ambientLight );
      const pointLight = new THREE.PointLight("#e0e0e0", 1);
      pointLight.position.set( 200, 100, 0 );
      this.scene.add( pointLight );
 
      this.camera = new THREE.PerspectiveCamera(
        90,
        this.width / this.width
      );
      this.camera.position.z = 5;
 
      this.renderer = new THREE.WebGLRenderer({
        canvas: document.getElementById("modelContainer"),
        antialias: true,
        stencil: true
      });
      this.renderer.setPixelRatio( window.devicePixelRatio );
      this.renderer.outputEncoding = THREE.LinearEncoding;
      this.renderer.toneMapping = THREE.NoToneMapping;

Would appreciate any help and let me know if more information needs to be provided

2

Do you mind sharing which viewers you were using?

Differences in lighting isn’t something unexpected when comparing different engines. Increasing the light intensity might help. In the three.js editor, I get this when I add an ambient light with intensity 1 and color 0xffffff and a directional light with intensity 5 and color 0xffffff.

image
image2098×1164 168 KB

Regarding the material properties of the asset, the result looks fairly right.

Your first screenshot seems overexposed to me.

3

Not sure why it is getting blocked when using the three.js viewer but your .wrl file appears to have a light source attached to each mesh that is becoming the emissive and emissiveIntensity attributes on the Mesh object.

See here in the file:
image

Here’s a code snippet to force that intensity to zero:

this.scene.traverse (function (object)
{
    if (object instanceof THREE.Mesh) {
      object.material.emissiveIntensity = 0;
    }
});

That is causing your object to look much brighter than it should be.

4

Sorry, but this isn’t right.

The specularColor field in VRML files is not translated to emissiveColor in three.js. Besides, the OP’s VRML file contains no emissive information so setting emissiveIntensity to 0 has no effect.

Finally, you have linked the wrong documentation pages. VRMLLoader produce instances of MeshPhongMaterial and not MeshStandardMaterial.

Also notice that it is no good style to create multiple accounts in this forum and then create a question with one account and answering it with another one.

1 Like