如何去除Three.js中3D模型边缘的异常光泽？

Let's break down why you're getting that weird edge glare and how to fix it—this is a super common snag when working with imported 3D models and basic lighting setups!

First, Let's Diagnose the Core Issue #

You swapped the model's original material for MeshLambertMaterial, which is a flat, diffuse-only material. Most Sketchfab models use PBR (Physically Based Rendering) materials (like MeshStandardMaterial or MeshPhysicalMaterial) that are pre-tuned to handle real-world lighting naturally. Ditching the original material throws away all those carefully configured settings, which is almost certainly causing the odd edge reflections. On top of that, your single point light creates uneven, harsh illumination that exaggerates these issues.

Step-by-Step Fixes #

1. Revert to the Model's Original Material

Don't overwrite the material that came with the GLTF file—it's already set up to avoid exactly this kind of glare. Just delete this line from your code:

// Remove this line entirely: mesh.children[0].material = new THREE.MeshLambertMaterial();

PBR materials interact with light far more realistically, so keeping them will immediately make your model look closer to the reference.

2. Upgrade Your Lighting Rig

A single point light is too harsh for most 3D scenes. Let's build a balanced lighting setup to soften edges and eliminate uneven glare:

// Add ambient light to brighten shadows evenly across the scene
const ambientLight = new THREE.AmbientLight(0xffffff, 0.4);
scene.add(ambientLight);

// Add a directional light as your main light source (like sunlight)
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
directionalLight.position.set(5, 10, 7.5); // Adjust this position to match your reference image's lighting
scene.add(directionalLight);

// Keep your point light as a subtle fill light to reduce harsh shadow areas
var light2 = new THREE.PointLight(0xffffff, 0.3);
light2.position.set(-5, -5, -5);
scene.add(light2);

This combination of ambient, directional, and fill light creates smooth, natural-looking illumination that minimizes weird edge reflections.

3. Fix Model Normals (If Needed)

Sometimes edge glare happens because the model's vertex normals are flipped or inconsistent. You can recalculate them to fix this:

function handle_load(gltf) {
  mesh = gltf.scene;
  const modelMesh = mesh.children[0];
  // Recalculate normals to ensure smooth lighting across all surfaces
  modelMesh.geometry.computeVertexNormals();
  modelMesh.geometry.normalizeNormals();
  scene.add(mesh);
  mesh.position.z = -20;
}

This ensures the lighting engine calculates reflections correctly across every part of the model.

4. Enable Gamma Correction

Real-world lighting uses gamma-corrected colors, and enabling this in Three.js will make your model's colors and reflections match your reference image more accurately:

// Add this when initializing your renderer
renderer.outputEncoding = THREE.sRGBEncoding;

// In your handle_load function, update the material's encoding (if textures are present)
function handle_load(gltf) {
  // ... existing code ...
  const modelMaterial = mesh.children[0].material;
  if (modelMaterial.map) {
    modelMaterial.map.encoding = THREE.sRGBEncoding;
  }
  modelMaterial.needsUpdate = true;
}

Final Tips #

Start with reverting the material—this is the most likely quick fix. If you still see glare, tweak the lighting positions to match your reference image, then check the normals. These steps should eliminate that unwanted edge shine and get your replication looking spot-on.

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