Как подключить 3D персонажа в three.js?

Question

Никита Сальников @nikitasalnikov

Новичок

Как подключить 3D персонажа в three.js?

Здравствуйте. Подскажите пожалуйста как мне в сцену добавить 3D персонажа. А точнее избавиться от ошибки, видимо подключения

Uncaught TypeError: Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3d game</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }

        canvas {
            display: block;
        }
    </style>
</head>

<body>
    <script type="module" src="./src/main.js"></script>
</body>

</html>

import * as THREE from 'https://cdn.jsdelivr.net/npm/three@0.152.2/build/three.module.js';
import { GLTFLoader } from 'https://cdn.jsdelivr.net/gh/mrdoob/three.js@master/examples/jsm/loaders/GLTFLoader.js';
import * as CANNON from 'https://cdn.skypack.dev/cannon-es';



// Создание сцены, камеры и рендера
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(10, 10, 10);
scene.add(directionalLight);

// Создание пола
const planeGeometry = new THREE.PlaneGeometry(50, 50);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = -Math.PI / 2; // Повернуть плоскость, чтобы она была горизонтальной
scene.add(plane);

// Создание физического мира
const world = new CANNON.World();
world.gravity.set(0, -9.82, 0); // Гравитация

// Настройка камеры
camera.position.set(0, 2, 5);

// Загрузка модели .glb
const loader = new GLTFLoader();
let characterModel = null; // Мы объявляем переменную на уровне всей программы
let characterBody = null; // Переместим сюда также физическое тело

// Загрузим модель
loader.load(
    'boy3.glb',  // Путь к вашему .glb файлу
    (gltf) => {
        characterModel = gltf.scene;
        characterModel.scale.set(1, 1, 1);  // Установим масштаб модели
        characterModel.position.set(0, 0.5, 0); // Начальная позиция
        scene.add(characterModel);

        // Создание физического тела персонажа после загрузки модели
        characterBody = new CANNON.Body({
            mass: 1,
            position: new CANNON.Vec3(0, 0.5, 0),
        });
        world.addBody(characterBody);
    },
    (xhr)=> {
        console.log(xhr.loaded / xhr.total * 100) + '% loaded';
        
    },  // Функция для отслеживания прогресса загрузки (по желанию)
    (error) => {
        console.error(error);  // Если что-то пошло не так при загрузке
    }
);

// Управление персонажем
const moveSpeed = 10; // Увеличена скорость
const keys = {}; // Объект для отслеживания нажатых клавиш

// Обработка клавиш
window.addEventListener('keydown', (event) => {
    keys[event.key] = true;
});
window.addEventListener('keyup', (event) => {
    keys[event.key] = false;
});

// Обновление физического тела персонажа
function updateCharacter() {
    if (characterBody) {
        // Обнуляем скорость перед каждым обновлением
        characterBody.velocity.set(0, characterBody.velocity.y, 0); // Оставляем только вертикальную скорость

        // Управление движением
        if (keys['ArrowUp'] || keys['w']) characterBody.velocity.z = -moveSpeed; // Вперед
        if (keys['ArrowDown'] || keys['s']) characterBody.velocity.z = moveSpeed; // Назад
        if (keys['ArrowLeft'] || keys['a']) characterBody.velocity.x = -moveSpeed; // Влево
        if (keys['ArrowRight'] || keys['d']) characterBody.velocity.x = moveSpeed; // Вправо
    }
}

// Добавление препятствий
function createObstacle(x, z) {
    const obstacleGeometry = new THREE.BoxGeometry(1, 1, 1);
    const obstacleMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
    const obstacle = new THREE.Mesh(obstacleGeometry, obstacleMaterial);
    obstacle.position.set(x, 0.5, z);
    scene.add(obstacle);

    // Создаем физическое тело для препятствия
    const obstacleBody = new CANNON.Body({
        mass: 0, // Неподвижное тело
        shape: new CANNON.Box(new CANNON.Vec3(0.5, 0.5, 0.5)), // Куб
        position: new CANNON.Vec3(x, 0.5, z),
    });
    world.addBody(obstacleBody);
}

createObstacle(2, 2);
createObstacle(-2, -3);

function updateCamera() {
    if (characterModel) {
        camera.position.set(
            characterModel.position.x,
            characterModel.position.y + 2, // Камера над персонажем
            characterModel.position.z + 5 // Камера позади персонажа
        );
        camera.lookAt(characterModel.position); // Камера смотрит на персонажа
    }
}

// Создание физического тела для пола
const groundBody = new CANNON.Body({
    mass: 0, // Неподвижное тело
    shape: new CANNON.Plane(),
});
groundBody.quaternion.setFromEuler(-Math.PI / 2, 0, 0); // Повернуть плоскость
world.addBody(groundBody);

// Анимация
function animate() {
    requestAnimationFrame(animate);
    // Обновление физического мира
    world.step(1 / 60); // Шаг симуляции (60 FPS)

    // Синхронизация позиции персонажа с физическим телом
    if (characterModel && characterBody) {
        characterModel.position.copy(characterBody.position);
    }

    updateCharacter(); // Перемещение через физику
    updateCamera();
    renderer.render(scene, camera);
}
animate();

при этом импорт GLTFLoader делал как через cdn, взятый с сайта
Ссылка
так и

import { GLTFLoader } from '../node_modules/three/examples/jsm/loaders/GLTFLoader';

- так этот вариант вообще ошибку выдает - " Не удалось найти файл объявления модуля "../node_modules/three/examples/jsm/loaders/GLTFLoader". "c:/Users/2/Desktop/clicker/three_js_game/node_modules/three/examples/jsm/loaders/GLTFLoader.js" имеет неявный тип "any"." Как правильно импортировать этот GLTFLoader?