I created an angular project with three.js, but when I load 3d models, they have a bad quality.
When I load this same models on this website : https://gltf-viewer.donmccurdy.com/ they are perfect, in a great quality. I don't understand why. I tried to copy some of the open source code of this website, but this doesn't change anything :
I tried to load in gltf with that :
const loader = new GLTFLoader().setCrossOrigin('anonymous')
.setDRACOLoader(new DRACOLoader().setDecoderPath('./wasm/'));
loader.load(
'assets/Newblend3.glb',
(gltf) => {
gltf.scene.scale.set(200, 200, 200);
this.scene.add(gltf.scene);
},
(xhr) => {
console.log((xhr.loaded / xhr.total * 100) + '% loaded');
},
(error) => {
console.log('An error happened');
}
);
And in obj + mtl with that :
this.mtlLoader.load(await item?.mtl?.toUrl(), (materials) => {
materials.preload();
objLoader.setMaterials(materials);
objLoader.load(item.objFile.url, (object) => {
const mesh = object;
this.scene.add(mesh);
});
}, (i) => {
console.log('Progress : ', i);
}, (e) => {
console.log('Error : ', e);
});
But neither the first nor the second method works as I wanted :
On gltf-viewer.donmccurdy.com :
On my angular app :
It's not just the lights, the threes are really more beatiful on the gltf-viewer.donmccurdy.com version.
I've also a 404 error :
Thanks in advance.
Jérémy.