- ВКонтакте
- РћРТвЂВВВВВВВВнокласснРСвЂВВВВВВВВРєРСвЂВВВВВВВВ
- РњРѕР№ Р В Р’В Р РЋРЎв„ўР В Р’В Р РЋРІР‚ВВВВВВВВРЎР‚
- Viber
- Skype
- Telegram
Как добавить несколько моделей в 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>
Мне нужно добавить несколько РАЗНЫХ моделей на сайт с РАЗНЫМИ анимациями.
Есть какое-то решение без костылей?
Если нет, то скажите, пожалуйста, ЛЮБОЙ метод как это можно реализовать.