How to add a glTF object to the scene?

user_14656322 0
Viewed 1398

I am trying to add a 3D object to the scene.

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

Major line error let loader = new THREE.GLTFLoader();

But I can't figure out what to put in brackets? New? .., or what?

Constructor:

enter image description here

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

Model 2(Mb): https://drive.google.com/file/d/1bPnC5coazNFIcsyvV9U29BFiFhXhriYg/view?usp=sharing

Source:

<!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>
gltf three.js javascript
2 Answers

It is telling you that you cannot invoked GLTFLoader without 'new' at new GLTFLoader

If you look at the doc you linked in the code exemple they use const loader = new GLTFLoader(); before doing anything with it.

You must instance GLTFLoader.

user_79422420

To avoid this error, we must download from 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

Place them in the root of the project and open GLTFLoader.js. At the time of 05/24/2021 we find 64 lines

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

and remove the excess. (that is, we specify the path to the three.module.js file). In my case: from './three.module.js';

(If there is a camera control, then we do the same with the OrbitControls.js file, line 9)

from './three.module.js';

Further it is IMPORTANT in the script, in which all the brains add type = "module", and import the files - that is, it turns out

<script type="module">

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

//...
</script>

IMPORTANT

*For people who have not worked with 3D on the web, but model in Cinema4D, 3Ds Max, ZBrush ... (like me). You need not only a .gltf file but also a .bin file How do I get them?

  1. Go to the site [Scetchfab] (https://sketchfab.com/feed).
  2. Load the model (set the settings for free download (then you can delete the model)).
  3. We are waiting for it to be processed. 4.download the required format (glFT)
  4. Remove the model from Scetchfab *

IMPORTANT

***The final view of the html file ***

<!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>
user_146563220
Related