CODEWITHSUNDEEP
javascriptthree.js
AlecStein44
AlecStein44

Reputation: 11

Three Js GLTF loader model not showing up

I am trying to use Three js to load in a 3d 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. I am getting no errors and I can see AxesHelper also I have loaded in a cube and that works so I don't think there is a problem with my scene.

function handleHeart(img) {
        document.getElementById("divRight").innerHTML = ""
        let renderer = new THREE.WebGLRenderer();
        document.getElementById("divRight").appendChild(renderer.domElement);
        let w = document.getElementById("divRight").clientWidth
        let h = 600
        renderer.setSize( w, h)
        let camera = new THREE.PerspectiveCamera(35, w / h, 0.1, 3000 );
        const controls = new THREE.OrbitControls( camera, renderer.domElement );
        camera.position.set( 0, 0, 10 );
        camera.lookAt(new THREE.Vector3(0, 0, 0))
        controls.update();
        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 || gltf.scenes[0];
                //model.scale.set(1000,1000,1000)
                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' );
        
            })

        scene.add(new THREE.AxesHelper(100))
        renderer.render(scene, camera)
    }

here is a replit : https://repl.it/@AlecStein44/Threejs-help#javascript.js

Upvotes: 1

Views: 941

Answers (1)

Mugen87
Mugen87

Reputation: 31026

model.material = material

This line is incorrect. It should be:

model.traverse( function( object ) {

    if ( object.isMesh ) object.material = material;

} );

Notice that applying a texture will still not work since your model heart_v1.glb has no texture coordinates.

Upvotes: 1

Related Questions