Question 196722 in Javascript Question posted in
A very good W3school tutorial can be found here.

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

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!

Tags:

2

Answers


  1. 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’ 🙂

    Login or Signup to reply.
  2. 0

    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
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search