Import model - error GLTFLoader

Questions
,
1

Good day.
I’m in the lesson - https://threejs.org/docs/#manual/en/introduction/Loading-3D-models. Stumble into the problem here when loading the model. Error in GLTFLoader.

My code:
        import * as THREE from 'three';
        import {GLTFLoader} from 'three/examples/jsm/loaders/GLTFLoader';

        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.getElementById('main_site').appendChild(renderer.domElement);

        var loader = new THREE.GLTFLoader();
        loader.load('models/model.gltf', function (gltf) {

            scene.add(gltf.scene);
        }, undefined, function (error) {

            console.error(error);
        });

Place of error: new THREE.GLTFLoader();
Errors webpack: "export ‘GLTFLoader’ (imported as ‘THREE’) was not found in ‘three’
Error browser: TypeError: WEBPACK_IMPORTED_MODULE_0_three.GLTFLoader is not a constructor

2

Try to create the loader like this:

var loader = new GLTFLoader();

So without the THREE namespace.

3 
ОК.
import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.getElementById('main_site').appendChild(renderer.domElement);

var loader = new GLTFLoader();
loader.load('models/model.gltf', function (gltf) {

    scene.add(gltf.scene);
}, undefined, function (error) {

    console.error(error);
});

Another problem came out!
Error: THREE.GLTFLoader: Failed to load buffer “model.bin”
wtf - bin ?? What?

I load model - model.gltf. What is an error bin?

4

model.gltf (1.1 KB)
Here is my model

5

glTF files can exist in different representations. In your case, model.gltf refers to a separate file called model.bin holding the actual buffer data.

It is possible to embed all data in a glTF file or to produce a binary archive file which has the glb extension. In production, you normally want to use the latter format.

6

Thank. I’ll try to figure out model.bin. I will try glb