I'm struggling for a while now to wrap my head around three.js and how to import 3D models with it using Angular.
I searched the documentation, I searched around here. I can't seem to figure out where I'm wrong on this one.
Maybe the answer is right in front of me but I can't seem to put my finger on it.
I made a working CodeSandbox.
https://codesandbox.io/s/great-tu-oqquo?file=/src/app/three-service.ts
I just can't understand why the 3D model is not showing up. I tried multiple models, changed the camera position, changed the model position and messed around with the camera settings.
I also tried to change the gltf.scene position, I tried to add gltf.scene.children[0] to the scene and tried to create a mesh out of it and then add it to my scene.
No success so far... It's driving me insane.
Also, the film pass seems to be increasing the number of scanlines and it kinda zooms in untill it's all pixelated.
Am I setting up the camera or the scene wrong? Am I using the GLTFLoader right?
The way you position your camera looks incorrect. Use this code instead and you will see the helmet:
this.camera.position.set(0, 0, 4);