三個Js GLTF loader model 沒有出現

Question

我正在嘗試使用三個 js 加載 3d 心臟 model 並將圖片附加到心臟的前面，但即使沒有加載圖像，心臟似乎也沒有出現。我是三個 js 的新手，所以我可能做錯了，但我嘗試直接使用文檔中的代碼，但它仍然無法正常工作。 我沒有收到任何錯誤，我也可以看到 AxesHelper 我已經加載到一個立方體中並且可以正常工作，所以我認為我的場景沒有問題。

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)
    }

這是一個復制品： https://repl.it/@AlecStein44/Threejs-help#javascript.js

Answer 1

model.material = 材料

此行不正確。 它應該是：

model.traverse( function( object ) {

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

} );

請注意，應用紋理仍然不起作用，因為您的 model heart_v1.glb沒有紋理坐標。