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

  • 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: