Skip to content
Advertisement

THREE.js Cannot Import Module

I am trying to import the threejs and GLTFLoader modules, both of which ( for testing ) are in the same root/js/ folder..

import * as THREE from './js/build/three.module.js'; // Works fine 
import { GLTFLoader } from './js/build/GLTFLoader.js'; // Throws a disallowed MIME TYPE error

I get the mimetype issue but the error isn’t thrown when in the three master ‘structure’, so why doesn’t this work?

EDIT:

So when uncommenting the import GLTF line, the error thrown is the following:

Loading module from “http://localhost/dev/project/build/three.module.js” 
was blocked because of a disallowed MIME type (“text/html”).

It seems to refer to the three.module.js path, however, when that line is commented out, it all loads fine with no errors. The paths are correct for all files/folders too.

Advertisement

Answer

I realise my question was somewhat unclear but essentially what I was trying to do is use the modular three.js functionality whilst retaining the entire project in a single root folder – ie not having to traverse up to the ‘build’ files.

I feel like this is probably something that is often required (in the absence of webpack et al.) since a website would generally be contained within in a single root folder.

After some helpful input I was able to resolve this with the following..

The Folder Structure:

root/
 |
 | -- index.html
 |
 |
 | -- /build/
 |      |
 |      | -- three.module.js 
 |
 |
 | -- /js/
        |
        | -- app.js*
        |
        | -- /jsm/
               |
               | -- /libs/ ...        
               | -- /loaders/ ...

The Imports ( in app.js )

import * as THREE from '../build/three.module.js';
import { GLTFLoader } from './jsm/loaders/GLTFLoader.js';
import { TWEEN } from './jsm/libs/tween.module.min.js';
import Stats from './jsm/libs/stats.module.js';

Hope this is of use to anyone searching for the same solution, and thanks as always to the community for the valued assistance!

User contributions licensed under: CC BY-SA
8 People found this is helpful
Advertisement