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??
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)
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)
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.
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 