GLTF Loader loading model but not showing up

Questions
1

Hello, I am trying to use Three js to load in a heart model and attach a picture to the front of the heart but it seems the heart isn’t showing up at all even without loading the image in. I am new at Three js so I might be doing it all wrong but I tried using the code straight from the documents and it still isn’t working.

code here :

function handleHeart(img) {

    document.getElementById("divRight").innerHTML = ""

    let renderer = new THREE.WebGLRenderer();

    document.getElementById("divRight").appendChild(renderer.domElement);

    renderer.setSize( document.getElementById("divRight").clientWidth, 600)

    let camera = new THREE.PerspectiveCamera(35, 1000 / 600, 0.1, 3000 );

    camera.position.set(0, 0, -5);

    let scene = new THREE.Scene();

    scene.background = new THREE.Color( 'grey' );

    light = new THREE.AmbientLight(0xffffff); 

    scene.add(light);

  

    const loader = new THREE.GLTFLoader();

    loader.load(

        // resource URL

        'models/heart_v1.glb',

        // called when the resource is loaded

        function ( gltf ) {

            let material = new THREE.MeshBasicMaterial( { map: img } );

    

            let model = gltf.scene.children[0]

            model.material = material

            scene.add(model)

            model.position.z = -10

                    

        },

        // called while loading is progressing

        function ( xhr ) {

    

            console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );

    

        },

        // called when loading has errors

        function ( error ) {

            console.log(error)

            console.log( 'An error happened' );

    

        })

    renderer.render(scene, camera)
2

might be a scale thing, try zoom in and out

3

I tried scaling the model with “model.scale.set(200,200,200)” and that didn’t work and also I tried zooming in and out when I had the Orbit Controls code on there and that didn’t work.

4

Try to add the complete scene instead of the first child

scene.add(gltf.scene)

Also you can test your model here

1 Like
5

The model works on the website you sent but it still doesn’t work on mine even with the new code. Is there something wrong with my code that my error function isn’t catching?

6

Do you have orbitcontrols ? Because you set your model behind your camera

camera.position.z = -5
model.poition.z = -10

7

I did and even then I couldn’t seem my model. What camera position do you recommend in order to see my model?

8

Well you could, at least for testing, position your model in the middle of your scene 0, 0, 0
and then offset your camera to for example 0, 0, 10

also try to call camera.lookAt(new THREE.Vector3(0, 0, 0)). This will point the camera to 0, 0, 0

Would be nice if you could paste your code into a jsFiddle demo. That makes it much easier for me, also that way often people solve their own problems as well

9

I tried the positions you recommend with no success sadly. hopefully, you will find something!.I sent it in a replit if that’s okay. https://repl.it/@AlecStein44/Threejs-help#javascript.js

Btw thank you so much for your help!

10

Mhh, the good thing about jsFiddle is, that you dont have to sign in to edit sth. I dont wanna make a account for it now.

One thing i noticed is that you should use the same values for the render size as for camera aspect.

instead of

renderer.setSize( document.getElementById("divRight").clientWidth, 600)
let camera = new THREE.PerspectiveCamera(35, 1000 / 600, 0.1, 3000 );

do

let w = document.getElementById("divRight").clientWidth
let h = 600
renderer.setSize( w, h)
let camera = new THREE.PerspectiveCamera(35, w / h, 0.1, 3000 );

Also you can add a AxesHelper to your scene. That way you can check if your scene works at all. The AxesHelper should appear in the center of your scene

scene.add(new THREE.AxesHelper(100))

11

I changed the code you suggested but it seems to have the same problem. also sorry about not using fiddle it seems i can’t upload my model if i use that.

12

So you dont see the AxesHelper?
It thats the case, it has nothing to do with the model. Make a demo, where you replace your model with a normal cube or just the axeshelper.
The problem must be with the scene setup

13

Sorry I do see the axeshelper but i still can’t my model.

14

Thank you, it helped me too. I had the same. It’s just that the scene loads asynchronously so I can’t add the child, just as the whole children array.