Не отображается модель в three.js, что делать?

Question

[Ivan Tumanow]

не отображается модель, что делать?

код вывода

import './App.scss'
import MoreText from "./components/MoreText/SampleText.jsx";

import ModelViewer from "./scripts/Model.js";

function App() {
    const model = new ModelViewer('../../../src/assets/Porsche.glb');

    return (
        <>
            {/*<MoreText/>*/}
        </>
    )
}

export default App

код отображения модели

import * as THREE from 'three';
import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';

export default class ModelViewer {
    loader;
    renderer;
    scene;
    camera;

    size = {
        width: window.innerWidth,
        height: window.innerHeight,
    }

    constructor(path) {
        this.setRendererParams();
        this.setCameraParams();
        this.setLoaderParams(path);
        this.setSceneParams();

        this?.render()
    }

    setRendererParams() {
        const rendererParams = {
            antialias: true,
            alpha: true,
        }

        this.renderer = new THREE.WebGLRenderer(rendererParams);
        this.renderer.setSize(this.size.width, this.size.height);
        this.renderer.setClearColor(0xFFFFFF);

        document.body.appendChild(this.renderer.domElement);
    }

    setCameraParams() {
        this.camera = new THREE.PerspectiveCamera(70, this.size.width / this.size.height, 0.1, 1000);
        this.camera.position.set(0, 0, 5);
    }

    setSceneParams(){
        this.scene = new THREE.Scene();
        this.scene.add(this.camera);

        const plight = new THREE.PointLight(0xffffff, 1); // Уменьшите интенсивность до 1 или меньше
        plight.position.set(5, 5, 5); // Переместите свет ближе к модели

        const alight = new THREE.AmbientLight(0x404040); // Оставьте только окружающий свет для общего освещения

        this.scene.add(alight);
        this.scene.add(plight);
    }

    setLoaderParams(path) {
        this.loader = new GLTFLoader;

        const loadParams = {
            status: null
        }

        this.loader.load(
            path,
            (gltf) => {
                loadParams.status = 'success'
                console.log(loadParams, gltf);

                gltf.scene.scale.set(0.5, 0.5, 0.5); // Измените значения по необходимости
                gltf.scene.position.set(0, 0, 0); // Измените значения по необходимости

                this.scene.add(gltf.scene);
            },
            function (progress){
                loadParams.status = 'loading'
                console.log(loadParams, progress)
            },
            function (error) {
                loadParams.status = 'error'
                console.log(loadParams, error)
            }
            );
    }

    render() {
        requestAnimationFrame(this.render.bind(this));
        this.renderer.render(this.scene, this.camera);
    }
}

иерархия проекта

Comments

[Антон Горецкий]

модель у вас явно не по этому адресу лежит

const model = new ModelViewer('../../../src/assets/Porsche.glb');

пробуйте

const model = new ModelViewer('./assets/Porsche.glb');