Please help, my 3d model from sketchfab wont show up and i keep getting a console error that my GLTFLoader has been declared
here is my html and my gltfloader.js
Why are you writing GLTFLoader manually? (Also that assumption doesnāt make much sense, FileLoader will load either JSON, text or array buffer. It will not parse the GLTF itself, as thatās not a format recognised by any browser API.)
Consider deleting your GLTFLoader file and import from āthree/examples/jsm/loaders/GLTFLoaderā instead.
Apologies, iām pretty new to coding and am unsure of what Iām doing.
the GLTFLoader.js is from a Github file and so is the three.js file I have. So I should get rid of the GLTFLoader and write something else in the three.js file? Sorry for the confusion as you can Iām pretty new, I just want to have a 3D model on a live sever page.
1 Like
Yup, see this example for example 
(all examples in docs have source code in the bottom-right.)
threeās install instructions: three.js docs
you wouldnāt want to copy threejs from github or anywhere, you npm install it. thereās also no need to edit index.html. you cannot run html without a server, you wouldnāt be able to load gltf files due to browser security. all of this is taken care of if you follow the docs.
you must have node installed. open your shell, type
npm create vite
# pick javascript
# pick a project name
cd projectName
npm install three
npm run dev
open your editor. and the browser with the url the shell gave you. any edit you make to the files will be reflected in the browser. you can now edit main.js and write your code:
import * as THREE from 'three'
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
...
i did everything you said and i followed all of the install instructions just now.
when i did npm run dev it gave me this error:
npm error Missing script: ādevā
npm error
npm error To see a list of scripts, run:
npm error npm runnpm error A complete log of this run can be found in: ā¦
after following the installation instructions, here is what my main.js and my index look like:
i really just want to import models/shiba/scene from sketchfab so i can open it and use it for a class project. im so confused on how to get it to load so if someone could give me an example from here it would be much appreciated
i just now also changed the first few lines of my main.js code to:
import * as THREE from āthreeā;
import { OrbitControls } from āthree/addons/controls/OrbitControls.jsā;
import { GLTFLoader } from āthree/addons/loaders/GLTFLoader.jsā;
i think you must have forgot to cd into the project folder. npm create vite creates a folder that has node_modules inside and a package.json, as well as html, css and the main js files. the commands only work when youāre inside that folder. all you need to start your site is npm run dev.
imo you should not be using import maps, especially as a beginner. you can delete that section or better delete the whole folder and run npm create vite again. better donāt touch the html files that vite has created, they work out of the box without further modifications.
to explain, imports maps is an unfinished, half-broken browser spec. it poses immense manual complications and bars you from parts of the module eco system. unfortunately it does not look good, they have made some bad decisions that prevents the spec from becoming a standard.
@drcmda is correct that you do not need import maps when using a bundler, however the following statement is misleadingā¦
This feels like an outdated and biased opinion not actually grounded in the progress of import maps specificationā¦
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script/type/importmap
The good news is that modern browsers have started to support module functionality natively, and this is what this article is all about. This can only be a good thing ā browsers can optimize loading of modules, making it more efficient than having to use a library and do all of that extra client-side processing and extra round trips.
Hereās a great article on the benefits of using import mapsā¦
It hints at a future where reliance on custom framework implementations diminishes in favor of native browser features, making development smoother and more intuitive.
@drcmda do you have some resources to show why, in your opinion, itās half-broken?