не загружается 3д модель на сайт

Question

Всем привет, я начинающий JS разработчик. Хотел сделать сделать отображение 3д модели на сайте. Нашел гайд на ютубе, и написал следующий код. По итогу создаётся сцена но объект не загружается, путь к объекту правильный проверял много раз. Пробовал даже запускать на локалке. Все равно просто черный экран. Прошу объясните если есть ошибки в коде, или подскажите как правильно запускать файл, пока пробовал только через "открыть с помощью" из проводника.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Three.js Standard Scene with OBJ and GLTF Loading</title>
    <style>
        body { margin: 0; }
        canvas { display: block; }
    </style>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/OBJLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/three/examples/js/controls/OrbitControls.js"></script>
    <script>
        let scene, camera, renderer, controls;

        init();
        animate();

        function init() {
            // Scene
            scene = new THREE.Scene();

            // Camera
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.z = 5;

            // Renderer
            renderer = new THREE.WebGLRenderer();
            renderer.setSize(window.innerWidth, window.innerHeight);
            document.body.appendChild(renderer.domElement);

            // OrbitControls
            controls = new THREE.OrbitControls(camera, renderer.domElement);

            // Load OBJ Model
            const objLoader = new THREE.OBJLoader();
            objLoader.load(
                './model/scene.obj',
                function (object) {
                    scene.add(object);
                },
                function (xhr) {
                    console.log('OBJ model ' + (xhr.loaded / xhr.total * 100) + '% loaded');
                },
                function (error) {
                    console.error('Error loading OBJ model:', error);
                }
            );

            // Load GLTF Model
            const gltfLoader = new THREE.GLTFLoader();
            gltfLoader.load(
                './scene.gltf',
                function (gltf) {
                    scene.add(gltf.scene);
                },
                function (xhr) {
                    console.log('GLTF model ' + (xhr.loaded / xhr.total * 100) + '% loaded');
                },
                function (error) {
                    console.error('Error loading GLTF model:', error);
                }
            );

            // Resize
            window.addEventListener('resize', onWindowResize);
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }

        function animate() {
            requestAnimationFrame(animate);
            controls.update();
            renderer.render(scene, camera);
        }
    </script>
</body>
</html>

БЛОГ НА HUSL

не загружается 3д модель на сайт

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