Environment maps - nothing is shiny?

Questions
1

In my blender file, I have a shiny object:

shiny

In my three.js scene, I set an environment map and convert it to a cubic texture:

env

However, when rendered the object doesn’t look shiny at all:

dull

To try and debug this, I created an environment map which is just black and white:

checkers

In the resulting render, you can barely make out that there is checkerboard pattern:

Screen Shot 2022-09-01 at 1.39.06 AM

So my question is, why are the reflections so blurry and dull?

The code I’m using to load the environment map is pretty much what is given in the example in the docs:

    const pg = new PMREMGenerator(renderer);
    pg.compileEquirectangularShader();
    const rt = pg.fromEquirectangular(texture);
2

Is the model shiny when you drop it to gltf-viewer ?

3

set metallness=1, roughness=0.5, envMapIntensity=5

image
image1920×1080 283 KB

4

Here’s how it looks in the GLTF viewer with the “Venice Sunset” environment map:

Screen Shot 2022-09-01 at 9.46.19 AM

This looks pretty much how I want it to look, so the problem is not the object. The problem must be in the lighting or environment map somewhere.

The material parameters are: roughness=0.24, Metallic=0.734. This looks plenty shiny in blender.

5

I should also mention that I’m setting the environment map at the scene level, not on each individual object. Since I have thousands of different objects in the game, all loaded from GLB, I’d have to tweak each one individually otherwise.

6

Envmap should be quite easy to debug. Just do:

scene.add(new Three.Mesh(
  new Three.SphereGeometry(2.0, 32, 32),
  new Three.MeshStandardMaterial({
    color: 0xcccccc,
    roughness: 0.0,
    metalness: 1.0
  });
));

Then check if the envmap reflections look correct on the sphere.