Как поместить 3д-модель в html

Question

У меня есть пустая html-страница:

<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r123/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.js"></script>
<script src="three.min.js"></script>
<script src="GLTFLoader.js"></script>
<script src="OrbitControls.js"></script>

<script>

    scene = new THREE.Scene();
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);
    camera.position.z = 10;

    renderer = new THREE.WebGL1Renderer({alpha: true, antialias: true});
    renderer.setClearColor(0x000000, 0);
    renderer.size(1280, 720);

    renderer.domElement.setAttribute("id", "Mine");
    document.body.insertBefore(renderer.domElement, document.body.firstChild);

    const aLight = new THREE.AmbientLight(0x404040, 1.2);
    scene.add(aLight);

    const pLight = new THREE.PointLight(0xFFFFFF, 1.2);
    pLight.position.set(0, -3, 7);
    scene.add(pLight);

    const helper = new THREE.PointLightHelper(pLight);
    scene.add(helper);

    let loader = new THREE.GLTFLoader();
    let obj = null;

    loader.load('/3d/scene.gltf', function (gltf) {
        obj = gltf;
        obj.scene.scale.set(1.3, 1.3, 1.3);

        scene.add(obj.scene);
    });

    function animate() {
        requestAnimationFrame(animate);

        if (obj)
            obj.scene.rotation.y += 0.03;

        renderer.render(scene, camera);
    }
    animate();

</script>

</body>

В папке 3d лежит модель формата .gltf. Но когда я открываю сайт, ничего не происходит, то есть я вижу обычный белый фон. В чём может быть дело?

БЛОГ НА HUSL

Как поместить 3д-модель в html

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