Чтобы добавить 3D персонажа в сцену с использованием Three.js и исправить вашу ошибку, вам нужно удостовериться, что вы используете правильный путь для импортированных модулей. Также вам нужно будет добавить удобный способ загрузки вашего 3D объекта (персонажа) в формате GLTF или GLB.
Вот шаги, которые помогут вам:
1. **Исправьте импорт модулей**: Убедитесь, что вы используете правильные пути для Three.js и GLTFLoader. Вы можете использовать CDN, как вы уже сделали, но вам нужно просто убедиться, что пути правильные. Ваши импорты уже правильные.
2. **Загрузите 3D модель**: Для загрузки GLTF модели вам потребуется GLTFLoader, который уже подключен в вашем коде.
3. **Добавьте обработчик загрузки для вашей модели**: После создания сцены и рендера, вам нужно загрузить модель и добавить ее в сцену.
Вот обновленный код для вашего файла `main.js`, который отвечает за добавление 3D персонажа:
```javascript
import * as THREE from 'https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/gh/mrdoob/three.js@master/examples/jsm/loaders/GLTFLoader.js';
// Создание сцены, камеры и рендера
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
// Добавление освещения
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5); // Мягкий общий свет
scene.add(ambientLight);
const directionalLight = new THREE.DirectionalLight(0xffffff, 1); // Направленный свет
directionalLight.position.set(1, 1, 1).normalize();
scene.add(directionalLight);
// Загрузка 3D модели
const loader = new GLTFLoader();
loader.load('path/to/your/model.glb', (gltf) => {
scene.add(gltf.scene);
}, undefined, (error) => {
console.error(error);
});
// Установка позиции камеры
camera.position.z = 5;
// Рендер зацикленно
function animate() {
requestAnimationFrame(animate);
renderer.render(scene, camera);
}
animate();
```
### Замены, которые нужно учесть:
1. Замените `'path/to/your/model.glb'` на фактический путь к вашей 3D модели. Вы можете использовать относительный путь, если она находится в вашем проекте, или абсолютный URL.
2. Если ваша модель не отображается (например, вы видите только серый экран), убедитесь, что:
- Модель корректно загружена и в правильном формате (GLTF или GLB).
- Убедитесь, что у камеры правильная позиция и она направлена на вашу модель.
3. Если у вас возникнут проблемы с загрузкой модели, проверьте консоль браузера на наличие ошибок.
После выполнения этих шагов вы сможете успешно добавить 3D персонажа в вашу сцену на Three.js.