Hey there, let's work through those frustrating issues with your custom material step by step—excessive reflection and that sudden dimming when rotating your model shouldn't stand between you and your desired result.

1. Fixing Unwanted Excessive Reflection #

Looking at your code, a couple of settings are contributing to the over-reflective look:

• You've set specular to match your main material color, which creates a strong highlight even with low shininess.
• disableEnvMap is set to false, so any environment map in your scene will still add reflections, even with reflectivity: 0.0.

Here's how to tweak these:

• Set specular to THREE.Color(0x000000) (pure black) to eliminate specular highlights entirely.
• If you don't need any environment reflections at all, flip disableEnvMap to true to shut that off completely.

2. Stopping Color Dimming on Model Rotation #

The shading: 2 you're using maps to THREE.FlatShading, which renders each face with a single solid color based on its angle to the light source. When you rotate the model, faces that were facing the light can swing away instantly, causing that abrupt darkening.

Switch to THREE.SmoothShading (this is actually the default for MeshPhongMaterial, so you can either set shading: 1 or just remove the line entirely) to get smooth, gradual color transitions across the model as it rotates.

Updated Code with Fixes #

Here's your code adjusted with all these changes, plus a readability improvement (ditching magic numbers for official Three.js enums):

textureLoader.load(textureUrl, (texture) => {
  texture.wrapS = THREE.RepeatWrapping;
  texture.wrapT = THREE.RepeatWrapping;
  
  const material = new THREE.MeshPhongMaterial({
    bumpScale: 0.3,
    color: new THREE.Color(color.r / 255, color.g / 255, color.b / 255),
    reflectivity: 0.0,
    shading: THREE.SmoothShading, // Default behavior, can also remove this line
    side: THREE.DoubleSide, // Replaced magic number 2 with readable enum
    shininess: 1,
    specular: new THREE.Color(0x000000), // Eliminates specular highlights
  });
  
  material.bumpMap = texture;
  material.disableEnvMap = true; // Turns off environment reflections
  materials.addMaterial(materialHash, material, true);
});

Bonus Pro Tip #

If you want even more consistent lighting behavior (especially as the model moves), consider swapping MeshPhongMaterial for MeshStandardMaterial. It uses physically-based rendering (PBR), which tends to produce more realistic, stable results with lighting changes. For your bump map, you'd use normalMap or roughnessMap depending on the texture type—just make sure your texture is formatted correctly for PBR.

内容的提问来源于stack exchange，提问作者Henrik Bengtsson