Как добавить несколько моделей в Three.js?

У меня есть скрипт с простейшей моделью следующего характера:

<script type="importmap">
            {
                "imports": {
                    "three": "https://unpkg.com/three@0.139.0/build/three.module.js",
                    "three/addons/": "./jsm/",
                    "OrbitControls": "https://unpkg.com/three@0.139.0/examples/jsm/controls/OrbitControls.js",
                    "GLTFLoader": "https://unpkg.com/three@0.139.0/examples/jsm/loaders/GLTFLoader.js",
                    "RectAreaLightHelper": "https://unpkg.com/three@0.139.0/examples/jsm/helpers/RectAreaLightHelper.js",
                    "FBXLoader": "https://unpkg.com/three@0.139.0/examples/jsm/loaders/FBXLoader.js",
                    "RectAreaLightUniformsLib": "https://unpkg.com/three@0.139.0/examples/jsm/lights/RectAreaLightUniformsLib.js"
                }
            }
</script>
<script type="module">
            import * as THREE from "three";
            import { OrbitControls } from "OrbitControls";
            import { FBXLoader } from "FBXLoader";
            import { RectAreaLightUniformsLib } from 'RectAreaLightUniformsLib';

            const container = document.querySelector('.model-showcase');
            let scene, camera, renderer, controls, model;
            const initialCameraPosition = new THREE.Vector3(1, 1, 1);

            function initScene() {
                    scene = new THREE.Scene();
                    scene.background = null;

                    const width = container.clientWidth;
                    const height = container.clientHeight;
                    camera = new THREE.PerspectiveCamera(45, width / height, 0.1, 100);
                    camera.position.copy(initialCameraPosition);

                    renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
                    renderer.setSize(width, height);
                    renderer.setPixelRatio(window.devicePixelRatio);
                    container.appendChild(renderer.domElement);

                    const pointLight = new THREE.PointLight(0xffffff, 1, 100);
                    pointLight.position.set(5, 5, 5);
                    pointLight.castShadow = true;
                    scene.add(pointLight);

                    const pointLight2 = new THREE.PointLight(0xffffff, 0.5, 100);
                    pointLight2.position.set(-5, -5, -5);
                    pointLight2.castShadow = true;
                    scene.add(pointLight2);

                    const spotLight = new THREE.SpotLight(0xfffff9, 0.3);
                    spotLight.position.set(-5, 10, 5);
                    spotLight.angle = Math.PI / 4;
                    spotLight.castShadow = true;
                    scene.add(spotLight);

                    scene.add(new THREE.AmbientLight(0xffffff, 0.1));
                    scene.add(new THREE.HemisphereLight(0xffffbb, 0x080820, 0.2));

                    controls = new OrbitControls(camera, renderer.domElement);
                    controls.autoRotate = true;
                    controls.autoRotateSpeed = 1;
                    controls.enableDamping = true;

                    controls = new OrbitControls(camera, renderer.domElement);
                    controls.autoRotate = true;
                    controls.autoRotateSpeed = 1;
                    controls.enableDamping = true;

                    const loader = new FBXLoader();
                    loader.load(
                            '../models/wardrobe/wardrobe.fbx',
                            (fbx) => {
                                    model = fbx;
                                    model.scale.set(0.009, 0.009, 0.009);
                                    model.position.set(0, -0.2, 0);
                                    scene.add(model);
                                    changeTexture('../models/wardrobe/wardrobe.png');
                            },
                            undefined,
                            (error) => {
                                    console.error('Ошибка загрузки FBX:', error);
                            }
                    );

                    animate();
            }

            function animate() {
                    requestAnimationFrame(animate);
                    if (model) model.rotation.y += 0.00001;
                    controls.update();
                    renderer.render(scene, camera);
            }

            function changeTexture(texturePath) {
                    if (!model) return;
                    const textureLoader = new THREE.TextureLoader();
                    textureLoader.load(
                            texturePath,
                            (texture) => {
                                    texture.encoding = THREE.sRGBEncoding;
                                    model.traverse((child) => {
                                            if (child.isMesh) {
                                                    child.material.map = texture;
                                                    child.material.needsUpdate = true;
                                            }
                                    });
                            },
                            undefined,
                            (error) => {
                                    console.error('Ошибка загрузки текстуры:', error);
                            }
                    );
            }

            initScene();
    </script>

Мне нужно добавить несколько РАЗНЫХ моделей на сайт с РАЗНЫМИ анимациями.

Есть какое-то решение без костылей?

Если нет, то скажите, пожалуйста, ЛЮБОЙ метод как это можно реализовать.


Ответы (0 шт):