ThreeJS加载GLB格式3D模型问题：模型显示全黑如何修复？

问题背景 #

已查阅ThreeJS官方文档但内容不够完整，最初尝试加载GLB格式3D模型时，浏览器显示黑屏但无控制台报错；9月22日调整代码后模型已显示，但整体全黑。

初始黑屏代码 #

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('cube.glb', function(gltf) {
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.outputColorSpace = THREE.SRGBColorSpace;

    const scene = new THREE.Scene();
    scene.add(gltf.scene);

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.set(0, 0, 10);

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

    document.body.appendChild(renderer.domElement);
    animate();
}, undefined, function(error) {
    console.error(error);
});

更新后全黑代码 #

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader();

loader.load('cube.glb', function(gltf) {
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.outputColorSpace = THREE.SRGBColorSpace;

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    scene.add(gltf.scene);

    scene.add(new THREE.AxesHelper(5));

    const light = new THREE.AmbientLight(0xffffff);
    scene.add(light);

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
    camera.position.set(0, 0, 0.1);
    camera.lookAt(new THREE.Vector3());
    scene.add(camera);

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

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

    document.body.appendChild(renderer.domElement);

    animate();
}, undefined, function(error) {
    console.error(error);
});

修复方案 #

1. 调整相机位置并移除场景添加 #

• 相机当前位置(0,0,0.1)距离模型过近，可能处于模型内部或近裁剪面边缘，导致渲染异常。将相机位置调整到合理距离，比如(0,0,5)。
• 相机无需添加到场景中，删除scene.add(camera);，避免坐标系混乱影响OrbitControls行为。

2. 增强光照系统 #

仅使用AmbientLight无法提供足够的明暗层次，添加方向性光补充光照：

// 在AmbientLight之后添加
const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
dirLight.position.set(5, 5, 5);
scene.add(dirLight);

3. 统一材质颜色空间 #

确保GLTF模型材质的颜色空间与渲染器匹配，遍历模型设置材质颜色空间：

// 添加到scene.add(gltf.scene)之后
gltf.scene.traverse((child) => {
  if (child.isMesh) {
    child.material.colorSpace = THREE.SRGBColorSpace;
  }
});

修复后完整代码 #

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader();

loader.load('cube.glb', function(gltf) {
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.outputColorSpace = THREE.SRGBColorSpace;

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0xffffff);
    
    // 统一材质颜色空间
    gltf.scene.traverse((child) => {
      if (child.isMesh) {
        child.material.colorSpace = THREE.SRGBColorSpace;
      }
    });
    scene.add(gltf.scene);

    scene.add(new THREE.AxesHelper(5));

    // 组合光照
    const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
    scene.add(ambientLight);
    
    const dirLight = new THREE.DirectionalLight(0xffffff, 1.5);
    dirLight.position.set(5, 5, 5);
    scene.add(dirLight);

    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.01, 1000);
    camera.position.set(0, 0, 5); // 调整相机位置
    camera.lookAt(new THREE.Vector3());

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

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

    document.body.appendChild(renderer.domElement);
    animate();
}, undefined, function(error) {
    console.error(error);
});

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