could anyone spare some time to walk through setting up a glb viwer with three.js?
i’ve spent a couple days butting my head against tutorials yet cannot get the lib to work.
adapted example code, nonfunctional
here is the modified example code i’m running, libraries will not loAd it appears. i’ve attempted ./ and “name of dir” , neither works
running on remote server, cannot get operational even w external linked libraries or local versions - console outputs this error:
three.module.js” was blocked because of a disallowed MIME type (“text/html”).
semi functional code, using remote libs this works to some extent, however only w remote libraries.
any support would be appreciated.
thanks.
Check out this fiddle which is based on your second code sample: https://jsfiddle.net/rmLu4p0j/
For a glTF viewer, you also want to have the ability to apply HDR environment maps. The renderer is already properly configured for this. However, you still have to load a respective env map e.g. via RGBELoader, preprocess it with PMREMGenerator and then apply it. I suggest you study the official gltf example to understand the required workflow.
1 Like
hi, thanks for your reply.
is there a reason (syntax?) that your provided code will not work with libs stored on same server?
local lib:
import * as THREE from 'three.module.js';
import {
OrbitControls
} from 'OrbitControls.js';
import {
GLTFLoader
} from 'GLTFLoader.js';
i get this error when i run the previous change to your code:
Uncaught TypeError: Error resolving module specifier: three.module.js
i require local libraries for my intended application.
When working with modules, you can’t place them in arbitrary directories. OrbitControls refers to three.module.js with a fixed path (../../../build/three.module.js). If you don’t honor this structure, modules won’t work.
That is one reason why it’s better to use npm and a build tool like rollup. At least for now until import maps are widely supported.
1 Like
okay, great, once i mimicked the filesystem it worked.
i cannot use npm on the system i plan to deploy to.
is it possible to use <script=""> method?
i’ve seen tutorials where that was used, however i could not get it to work.
appreciate your help w this.
disregard, this works well enough. thanks again!
node and npm are local development tools. they are not deployed. they help you to work quicker without having to move files around and manage dependencies by hand. in the end you get a bundle or distribution folder, you deploy that and it will run.
for something really easy you can try vite: https://vitejs.dev/
install node
npm init @vitejs/app (pick vanilla js here)
cd your-project
npm install
npm install three
npm run dev (start editing, every change made to any of the files will be reflected live)
and when you’re done
npm run build (minifies, optimizes, tree shakes, makes sure older browsers can run it, etc)
you can now deploy the contents of /build
1 Like
thanks, i’ve used npm a little, however this solution is functional.
i’ve got precompiled binaries from the devsite, they should be ok.
thanks again for support.
just typing it out in case you’ll be here tomorrow. it works, for now, but the moment you need any dependency it will fail again. i see people burning their time on browser imports practically every day here, don’t know why that is. 
2 Likes