search

fireship-io / threejs-scroll-animation-demo

3D Scrolling Portfolio Website with Three.js
1.49k stars 644 forks source link

Can not load files like gltf png #2

Open rasulali opened 3 years ago

rasulali commented 3 years ago

I'm using webpack as a bundler and I can load 3d objects from three's own basic shapes and change color and everything but whenever I have to load files from an external source like gltf, png files from the project's own folder It doesn't show. I'm running it on dev server btw. I'm quite new to overall web design so I don't know what more info I should give right now. edit: I managed to get it working with npm webpack --watch and live server. Its something to do with dev server. Although I can use it with live server (extension) anyway I would be glad to use it with dev server as well

rasulali commented 3 years ago

I'm using webpack as a bundler and I can load 3d objects from three's own basic shapes and change color and everything but whenever I have to load files from an external source like gltf, png files from the project's own folder It doesn't show. I'm running it on dev server btw. I'm quite new to overall web design so I don't know what more info I should give right now.

Bonnysartaz commented 3 years ago

maybe the problem is cors , try with cors enabled

SunlightWings commented 6 months ago

Type the following to import glb loader: import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

Then use the 3d object (say glass) in your code as: let glass; const gltfLoader = new GLTFLoader(); gltfLoader.load('glass.glb', (gltf) => { glass = gltf.scene; scene.add(earth); })