CODEWITHSUNDEEP
three.js
LirysJH
LirysJH

Reputation: 214

loading models - threejs

I've stumbled upon an issue with loading objects into three.js viewport. Tutorials show that it's required to use THREE.ObjectLoader(). As far as I'm concerned, ObjectLoader was removed a few versions ago. What's the way of loading models correctly or what loader (and file format) should I use? I tried GLTFLoader

import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js";
import { GLTFLoader } from 'https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/GLTFLoader.js';
...
let loader = new GLTFLoader();

loader.load('./models/object.gltf',
    (obj) => {
        scene.add(obj);
    }
);

It throws me three.module.js:5562 THREE.Object3D.add: object not an instance of THREE.Object3D. CDN loaders can be found here - https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/loaders/

Update: How to import data using ObjectLoader?

import * as THREE from "https://cdn.jsdelivr.net/npm/[email protected]/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/[email protected]/examples/jsm/controls/OrbitControls.js;
...
let loader = new THREE.ObjectLoader();

loader.load('./models/object.json',
    (obj) => {
        scene.add(obj);
    }
);

/* throws
   three.module.js:39957 THREE.ObjectLoader: Loading "Geometry"
   is not supported anymore
*/

Upvotes: 2

Views: 1507

Answers (1)

Mugen87
Mugen87

Reputation: 31026

THREE.ObjectLoader has not been removed from the repository. You can use it for loading three.js custom JSON format.

For loading external models authored in DCC tools like Blender, the recommended 3D format is glTF. Unfortunately, you do not use the loader correctly. It should be:

loader.load('./models/object.gltf',
    (gltf) => {
        scene.add(gltf.scene);
    }
);

I suggest you have a look at the official documentation page of THREE.GLTFLoader in order to better understand how the gltf parameter of the onLoad() callback is structured.

Upvotes: 1

Related Questions