How do i load a gltf model in Vue or Nuxt using node modules? When i try to load a gltf model i get this error: “'TypeError: three__WEBPACK_IMPORTED_MODULE_0__.GLTFLoader is not a constructor”
heres my component.vue: Canvas.vue (1.3 KB)
As written in this guide, the example files are no part of the core. You have to import them separately like so:
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
When doing so, notice that it’s not necessary to add the THREE namespace before GLTFLoader. Hence, an instance of the loader is created in this way:
const loader = new GLTFLoader();
1 Like
I used the const, which helped my problem. But now i have another error.
In the console i get: SyntaxError: Unexpected token < in JSON at position 0, at GLTFLoader.parse
im trying to load the gltf model exactly like guide, do you know how i can fix this problem?
const loader = new GLTFLoader();
// Load a glTF resource
loader.load(
// resource URL
"Duck.gltf",
// called when the resource is loaded
function(gltf) {
scene.add(gltf.scene);
}
);
1 Like
Hey there,
I’m having the same problem. Did you ever find the solution?
Thank you!
@Mugen87 there are packages also available but you suggest the files so is there any issue with the packages
@dsmooot this error usually means your files are not found at the URL you’ve given, and the correct URL is specific to your project. Check the Network Tab for errors, or see running things locally.
@Alex npm packages like three-gltf-loader are not maintained by the threejs team, and usually run several versions behind the latest threejs release. The best way to guarantee loaders are compatible with your version of threejs is to use the versions included in that release.
1 Like
@donmccurdy Thanks for your quick response! I appreciate your advice and suggestions. I’m using a relative path and have tested it by placing a png in the same folder and rendering it in a div (successfully). For my dev environment I’m trying to utilize threejs in a vue js project (vue-CLI w/ webpack) and am curious if the issue is specific to my setup. Have you had any experience with setting up a project in this context, or have any resources for vue -> threejs workflows/templates/boilerplates? Any help would be greatly appreciated!
Thanks so much!
PS. network request shows a 200 for my gltf file… just stuck with the json parse error. 
Does it make a difference if you convert your asset to glb instead? The CLI tool glTF Pipeline can perform this conversion for you.
@dsmooot sorry, I’m not sure. A live demo or a copy of your project would help if you can share them.
This might also depend on your build system. Some, like ParcelJS, require a bit of extra configuration to deal with static files outside of the common types like images and CSS: https://github.com/donmccurdy/three-gltf-viewer/blob/9ef59abc24fbff84a5f0ce4413ca54a31ef11957/package.json#L55-L64
Sorry for the delayed response! It’s been a busy one this week.
For a sanity check, I setup my project outside of vue and was able to successfully load my model into threejs using the gltfloader. Yet the very same setup fails in the vue context. I am led to believe it is something to do with webpack config (I’ll admit I’m not so fimiliar with webpack and thought I would be able to build off of a vue-cli webpack-simple project setup)… Anyways, if you do not mind to look into this, I’ve pushed my project to https://github.com/dsmooot/blendtoweb.
I really appreciate you for taking the time to help me with this barricade! I feel that once I have this sorted out, my boilerplate for blender -> vue -> threejs will be solid.
Cheers,
Dustin
PS. I have a .glb, embedded gltf, and seperated fltf+bin of the same model, in case it was an issue with the file type being imported.
@dsmooot - I’m using Vue and Three.js together and able to load glb models as expected. Taking a quick look at your repo, it looks like you’re trying to reference the glb as a static asset, however, it’s not located where the Vue project would expect to see references to static assets and that reference won’t be successfully resolved by webpack successfully without an appropriate loader. If you’re referencing assets via webpack, you’ll need to have appropriate loaders for them. I haven’t dug into any gltf or glb loaders, but it’s just as easy to reference them as static assets.
Try something like this.
- Add a
publicdirectory at the top level of your app (a sibling tosrc) - Add your assets there (so something like
/public/threeAssets/dude.glb) - Use the following pattern for the url to your resource when loading:
/threeAssets/dude.glb(note, do not include/public)
I don’t have any experience using Nuxt.js, but this pattern works for me with a standard Vue.js setup using Vue CLI.
Here’s a reference to using static assets in Vue for the future https://cli.vuejs.org/guide/html-and-static-assets.html#static-assets-handling
Hey Anthony,
Thanks for the reply. Your help is much appreciated. I created the public dir as well as the public/assets folder for my glb (and gltf) file to test. Although the file is retrieved, I still have a JSON.parse error when the three/examples/jsm/loaders/GLTFloader tries to load the model, unfortunately… my changes are pushed to my git repo, if you want to check it out.
For now, I’m pressing on with traditional html+js setup to continue my project, but would love to eventually have a vue workflow for this. If you would be willing to share a simple vue+threejs boilerplate in git, myself (and anyone else on the lookout) would be very grateful! 
Cheers,
Dustin
@dsmooot - It looks like your project wasn’t set up using vue cli, which might have different requirements based on your specific setup. Here’s a very simple example of a project set up with vue cli using GLTFLoader.
2 Likes
thanks for the help, @anthonysimone! I really appreciate you for taking the time to share this with me!.. will be testing this out tonight!
1 Like
No worries! 
thank you~!!!
Super helpful @anthonysimone!! Thank you!!