Three.js中3D甜甜圈模型材质加载异常问题求助

我用Blender制作了一个测试用甜甜圈模型，Blender中的渲染效果：

导入Three.js框架后的显示效果：

加载模型的代码如下：

import {Scene,
        PerspectiveCamera,
        WebGLRenderer,
        DirectionalLight,
        AxesHelper}  from "three";


// import {load_donut} from "./loadDonut.js"
import {GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

const scene = new Scene();
const camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );

const renderer = new WebGLRenderer({alpha:true, antialias:true});
renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );


load_donut();

const light = new DirectionalLight( 0xffffbb,1);
scene.add( light );


const axesHelper = new AxesHelper( 5 );
scene.add( axesHelper );

const controls = new OrbitControls( camera, renderer.domElement );

camera.position.x = 0;
camera.position.y = 5;
camera.position.z = 5;

function animate() {
    requestAnimationFrame( animate );
    controls.update();
    renderer.render( scene, camera );
}

animate();

function load_donut(){
    const loader = new GLTFLoader();
    loader.load(
        // resource URL
        './donut_model.gltf',
        // called when the resource is loaded
        function ( gltf ) {
            
            scene.add(gltf.scene);

        },
        // called while loading is progressing
        function ( xhr ) {

            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

        },
        // called when loading has errors
        function ( error ) {

            console.log( 'An error happened' );

        }
    );
}

我已经尝试过Three.js里的不同灯光函数，只能略微改善显示效果，但问题依然存在。请问这个问题的成因可能是什么？恳请各位提供帮助，谢谢。

• 材质导出不兼容
  GLTF对PBR材质支持最优，如果你在Blender中使用了非PBR材质（比如旧版Blender内置材质），导出后Three.js无法正确解析。解决方法：在Blender中将材质转换为Principled BSDF标准材质，重新导出GLTF。

• 光照配置不足
  Blender默认带有环境光与多光源组合，而Three.js场景初始为全黑状态，仅单个方向光无法还原Blender的光照层次。可以尝试：

  • 添加环境光补充暗部：

    const ambientLight = new AmbientLight(0xffffff, 0.3);
    scene.add(ambientLight);
    

  • 调整方向光位置，覆盖模型更多面：

    light.position.set(5, 5, 5);
    

• 模型法线异常
  Blender中模型法线可能翻转，或导出时未正确包含法线数据，导致Three.js渲染时面朝向错误、光照异常。解决方法：在Blender选中模型进入编辑模式，按Shift+N重新计算朝外的法线，再重新导出。

• GLTF导出选项遗漏
  导出时可能未勾选关键选项：

  • 未勾选「导出材质/纹理/法线」；
  • 选择了不兼容的导出格式，或未嵌入纹理导致路径错误。
    解决方法：打开Blender的GLTF导出面板，确认勾选Materials、Textures、Normals选项，必要时选择Embed Textures避免路径问题。

• 渲染器与阴影设置缺失
  你的渲染器开启了alpha:true，若页面背景偏暗会让模型显暗，可关闭alpha或给场景设置背景色：

  scene.background = new THREE.Color(0xffffff);
  

  另外Blender默认开启阴影，Three.js需手动开启：

  renderer.shadowMap.enabled = true;
  light.castShadow = true;
  gltf.scene.traverse(obj => {
    if (obj.isMesh) {
      obj.castShadow = true;
      obj.receiveShadow = true;
    }
  });
  

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