Three.js导入GLTF模型后灯光无法正常工作的问题求助

我最近在尝试把GLTF模型导入Three.js的时候遇到了不少麻烦——把整个场景导入后，灯光完全达不到预期的效果。我在Blender里用Eevee引擎配置的平行光，在Three.js里显示得完全不对。

上下文 #

• 我从Blender导出了包含所有材质和纹理的GLTF/GLB格式模型
• 目前用Three.js来渲染这个场景
• 导入后的灯光被识别成了Object3D类型，而不是预期的DirectionalLight

代码 #

下面是我用来加载模型和搭建基础场景的代码：

import * as THREE from "three";
import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
import { OrbitControls } from "three/addons/controls/OrbitControls.js";
import { ModelViewerProps } from "./types";

export class ModelViewer {
  private _container: HTMLDivElement | null;
  private _scene: THREE.Scene = new THREE.Scene();
  private _camera: THREE.PerspectiveCamera;
  private _renderer: THREE.WebGLRenderer;
  private _controls?: OrbitControls;

  constructor(props: ModelViewerProps) {
    this._container = props.container;

    this._renderer = new THREE.WebGLRenderer({ antialias: true });
    this._renderer.setPixelRatio(window.devicePixelRatio);
    this._renderer.setSize(window.innerWidth, window.innerHeight);
    this._renderer.shadowMap.enabled = true;
    this._renderer.toneMapping = THREE.ACESFilmicToneMapping;
    this._renderer.toneMappingExposure = 1.25;
    this._renderer.setClearColor(0x000000, 1);

    this._camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
    );
    this._camera.position.set(0, 2, 5);

    if (props.useOrbitControls) {
      this._controls = new OrbitControls(
        this._camera,
        this._renderer.domElement
      );
    }

    this.loadModel(props.modelPath);

    if (this._container) {
      this._container.appendChild(this._renderer.domElement);
    }

    window.addEventListener("resize", this.onWindowResize.bind(this));
    this.animate();
  }

  private loadModel(url: string) {
    const loader = new GLTFLoader();
    loader.load(
      url,
      (gltf) => {
        this._scene.add(gltf.scene);
        if (gltf.cameras.length > 0) {
          if (gltf.cameras[0] instanceof THREE.PerspectiveCamera) {
            this._camera = gltf.cameras[0];
          }
        }
      },
      (xhr) => {
        console.log((xhr.loaded / xhr.total) * 100 + "% loaded");
      },
      (error) => {
        console.error(error);
      }
    );
  }

  private onWindowResize() {
    const width = window.innerWidth;
    const height = window.innerHeight;

    this._camera.aspect = width / height;
    this._camera.updateProjectionMatrix();

    this._renderer.setSize(width, height);
  }

  private animate() {
    requestAnimationFrame(() => this.animate());
    if (this._controls) {
      this._controls.update();
    }
    this._renderer.render(this._scene, this._camera);
  }
}

Blender中的场景效果 #

备注：内容来源于stack exchange，提问作者holman rugama