如何将 glTF 对象添加到场景中？

Question

我正在尝试将 3D 对象添加到场景中。

Uncaught TypeError: Class constructor ol cannot be invoked without 'new' at new GLTFLoader

主要行错误let loader = new THREE.GLTFLoader();

但是我想不出括号里放的是什么？新的？ ..，或者什么？

构造函数：

https://threejs.org/docs/#examples/en/loaders/GLTFLoader

模型 2（Mb）：https://drive.google.com/file/d/1bPnC5coazNFIcsyvV9U29BFiFhXhriYg/view?usp=sharing

来源：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
<script src="https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/loaders/GLTFLoader.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.WebGLRenderer();
    renderer.setClearColor(0x000000, 0);
    renderer.setSize(1280 , 720);

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

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

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

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

        scene.add(obj.scene);

    });

</script>


</body>
</html>

Answer 1

告诉你在 new GLTFLoader

没有 'new' 就不能调用 GLTFLoader

如果您查看文档，您 linked 在他们使用的代码示例中 const loader = new GLTFLoader(); 在对其进行任何操作之前。

您必须实例 GLTFLoader.

Answer 2

为避免此错误，我们必须从 GitHub файлы .js 下载：

three.js、GLTFLoader.js、OrbitControls.js、three.module.js

<script src="scripts/three.js"></script> 
<script type="module"> src="scripts/GLTFLoader.js"></script> 
<script type="module"> src="scripts/OrbitControls.js"></script>// IF THERE IS A CAMERA CONTROL IN SPACE

将它们放在项目的根目录中并打开GLTFLoader.js。在 05/24/2021 时我们找到 64 行

from './smthPath/smthPath/smthPath/three.module.js';

并删除多余的部分。（也就是说，我们指定 three.module.js 文件的路径）。就我而言：来自 './three.module.js';

（如果有相机控件，那么我们对OrbitControls.js文件第9行做同样的事情）

from './three.module.js';

此外，在脚本中很重要，所有的大脑都在其中添加 type = "module"，并导入文件 - 也就是说，结果是

<script type="module">

import {GLTFLoader} from "./scripts/GLTFLoader.js";
import {OrbitControls} from './scripts/OrbitControls.js';

//...
</script>

重要

*对于那些没有在网络上使用过 3D，而是在 Cinema4D、3Ds Max、ZBrush 中建模的人......（比如我）。您不仅需要一个 .gltf 文件，还需要一个 .bin 文件我如何获得它们？

转到站点 [Scetchfab] (https://sketchfab.com/feed)。
加载模型（设置免费下载的设置（然后你可以删除模型)).
我们正在等待处理。 4.download 所需格式 (glFT)
从 Scetchfab 中删除模型 *

重要

*** html 文件的最终视图 ***

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Dragon</title>

</head>
<body id="c" style="margin: 0;">

<!--3D-->
<script src="scripts/three.js"></script>
<script type="module" src="scripts/GLTFLoader.js"></script>
<script type="module" src="scripts/OrbitControls.js"></script>

<script type="module">
    import {GLTFLoader} from "./scripts/GLTFLoader.js";
    import {OrbitControls} from './scripts/OrbitControls.js';

    const scene = new THREE.Scene();
    scene.background = new THREE.Color(0x555555);

    const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
    camera.position.set(0, 5, 15);

    const renderer = new THREE.WebGLRenderer({alpha: true, antialias: true});
    renderer.setClearColor(0x000000, 0);
    renderer.setSize(1920 , 1080);
    document.body.appendChild(renderer.domElement);



    const aLight = new THREE.AmbientLight(0x404040, 15);
    aLight.position.set(0,10,10)
    scene.add(aLight);

    const pLight = new THREE.PointLight(0xFFFFFF, 15);
    pLight.position.set(0,5,0)
    scene.add(pLight);

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


    const loader = new GLTFLoader();
    let obj = null;




    loader.load("3d/Dragon/scene.gltf", function(gltf) {
        obj = gltf.scene;
        scene.add(gltf.scene);
    });


    const canvas = document.getElementById("c");
    const controls = new OrbitControls(camera, canvas);
    controls.target.set(0, 1, 0);
    controls.update();

    function animate(){
        requestAnimationFrame(animate)
        obj.rotation.y += 0.005;
        renderer.render(scene, camera)
    }
    animate();
</script>

</body>
</html>

如何将 glTF 对象添加到场景中？

How to add a glTF object to the scene?

javascript

three.js

gltf