GLTFLoader cannot be found

Questions
1

According to the Three.js Documentation,

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

this is how I am supposed to import the loader. However, there is no addons folder in the module.

I looked around in the forum and found how other people do it (like this below)

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'

but getting this error

internal/process/esm_loader.js:74
internalBinding('errors').triggerUncaughtException(
                              ^

Error [ERR_MODULE_NOT_FOUND]: Cannot find module '/Users/david/Documents/Work/3drender/node_modules/three/examples/jsm/loaders/GLTFLoader' imported from /Users/david/Documents/Work/3drender/app.js

Is there some other way to import GLTFLoader??

2

Even when trying to load with ObjLoader, it throws an error

import { createRequire } from "module";
const require = createRequire(import.meta.url);
const { createCanvas } = require('node-canvas-webgl')
const THREE = require('three')
const width = 1000, height = 1000

const scene = new THREE.Scene()
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

const loader = new THREE.ObjectLoader();

loader.load(
	// resource URL
	"/Users/david/Downloads/Chemex_Mug.obj",

	// onLoad callback
	// Here the loaded data is assumed to be an object
	function ( obj ) {
		// Add the loaded object to the scene
		scene.add( obj );
	},

	// onProgress callback
	function ( xhr ) {
		console.log( (xhr.loaded / xhr.total * 100) + '% loaded' );
	},

	// onError callback
	function ( err ) {
		console.error( 'An error happened' );
	}
);

const canvas = createCanvas(width, height)

const renderer = new THREE.WebGLRenderer({
    canvas
})

/Users/david/Documents/Work/3drender/node_modules/three/build/three.cjs:28598
		const req = new Request(url, {
		            ^

ReferenceError: Request is not defined
    at FileLoader.load (/Users/david/Documents/Work/3drender/node_modules/three/build/three.cjs:28598:15)
3

Which build tool are you using? Or is this code running in Node.js?

The three/addons alias is a very new thing, so there may be some issues to iron out there. The previous import path should still work, though:

import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

(note that the .js extension is required)

4 Likes
4

  • Yes. I am running in Node.js Would that give me someā€¦ troubles?

  • oh, so the three/addons is not really stable yet?

  • Hmmā€¦ not sure why the import path you stated is not working :frowning:

  • What do you mean by .js extension required?

Should running the codes in Node.js be different?

What Iā€™m trying to do is to load a model and take a screenshot of it, but all on the server-side. Is there a way to do so?

5

Importing three/examples/jsm/loaders/GLTFLoader.js has been the recommended import path in past releases. Importing three/examples/jsm/loaders/GLTFLoader (no .js extension) has never been recommended; some ESM tools support it but many do not.

Support for Node.js environments in three.js has always been ā€œbest effortā€, youā€™ll certainly find problems that require workarounds if youā€™re trying to load models and render screenshots in Node.js. three.js relies on many Web APIs, including WebGL, image loading, Blobs, Web Workers, etc. The (external) three-stdlib project includes many of the workarounds youā€™d need to use Node.js, and may be helpful.

6

that sounds like a classic path problem. all modules refer directly to ā€œthreeā€ folder as if you didnā€™t have any subfolders. Please open your GLTF loader and look for the path. then change this to ā€œfrom ā€¦/ā€¦/ā€¦/build/three.module.jsā€™;ā€
on default it is ā€œfrom ā€˜threeā€™;ā€

the section of code should then look something like this, depending on which version you have.

...
TriangleStripDrawMode,
vector2,
vector3,
VectorKeyframeTrack,
sRGBEncoding
} from '../../../build/three.module.js';

class GLTFLoader extends Loader {

constructor( manager ) {

super( managers );
...

In your three folder you have your examples folder and next to it the build folder. and in it ā€œthree.module.jsā€
then the import will work :wink: