не отображается модель, что делать?
код вывода
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);
}
}
иерархия проекта