Javascript error `function not defined` when trying to import GLTFLoader

Question

I'm new to Javascript and I'm trying to write a program that shows a 3D model in a modal. Everything works until I try to add an import statement. As soon as I add the statement import {GLTFLoader} from "three/addons/loaders/GLTFLoader.js"; anywhere in the code I get a reference error stating that any function I try to call is not defined. I have the same problem with any other import I try to add. I tried loading the import in other places in the code but that resulted in an error as well. The error occurred even if the import statement was in a function that wasn't called. Does anybody know where my error could be? The following is the beginning of my code if that is helpful.

import {GLTFLoader} from "three/addons/loaders/GLTFLoader.js";
var soupbowl = soupbowl || {}; //Create namespace
  /*
  creates canvas for 2D soup animation
  */
  soupbowl.twod = function() {


      var canvasDiv = document.getElementById('soupcanvas');
      canvas = document.createElement('canvas');

      // Get the canvas dimensions
      let width = canvas.offsetWidth; // Width of the scene
      let height = canvas.offsetHeight; // Height of the scene
      canvas.setAttribute('width', 600);
      canvas.setAttribute('height', 600);
      canvas.setAttribute('id', 'canvas');
      canvasDiv.appendChild(canvas);

      if(typeof G_vmlCanvasManager != 'undefined') {
        canvas = G_vmlCanvasManager.initElement(canvas);
      }
      ctx = canvas.getContext("2d");
      //create soupplate
      soupbowl.createPlate();
    }

Thank you!

this may help https://stackoverflow.com/a/61944723/8626932 – Gitesh Jun 28 '23 at 12:35 — Gitesh, Jun 28 '23 at 12:35

score 0 · Answer 1 · answered Jun 28 '23 at 11:08

0

I think your file path must begin with "../"

in this place import {GLTFLoader} from "../ three/addons/loaders/GLTFLoader.js";

and don't use 'var'. use 'const' :)

answered Jun 28 '23 at 11:08

Yevhen

21
1

and GLTFLoader.js must have something like this ``export function GLTFLoader (some_props) { ...`` – Yevhen Jun 28 '23 at 11:13
Thanks! I changed these things but I still get the same error. Is there anything else that you think could cause the problem? – sn.904 Jun 28 '23 at 12:29
maybe show the `GLTFLoader.js` ? – Yevhen Jun 28 '23 at 13:08
and `import` must be at the beginning of the file ( code ) – Yevhen Jun 28 '23 at 13:11

score 0 · Answer 2 · answered Jun 29 '23 at 11:43

Are you sure you've loaded three.js via NPM or a CDN?

Try going to your web page and typing __THREE__ in the developer console. This should log the version of the library that is currently loaded.

Assuming three.js is loaded, here's how you can load the GLTF:

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

const loader = new GLTFLoader();

loader.load(filename, gltf => {

    // Use the loaded gltf here

});

Or use async/await in an async function instead:

async function initScene() {
    
    const gltf = await loader.loadAsync(filename);
    
    // Use the loaded gltf here
}

Javascript error `function not defined` when trying to import GLTFLoader

2 Answers2