Проблема импорта модели GLTF в Three.js: огни не работают должным образом ⇐ Javascript

[Anonymous]

Я пытался импортировать модель GLTF в Three.js, но я сталкиваюсь с несколькими проблемами. Когда я импортирую свою сцену со всеми элементами, свет не работает, как и ожидалось. Направленные светильники, которые я настроил в блендере (используя двигатель Eevee), не появляются правильно в Three.js.
Контекст:

• Я экспортировал мою модель из Blender в формате Gltf/Glb со всеми материалами и текстурами. /> Свет импортируется как 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:



Подробнее здесь: https://stackoverflow.com/questions/795 ... g-properly