3 Jを使用してjsonモデルオブジェクトのフロント部分のみに画像をロードする方法

Question

こんにちは、jsonファイルを使用しているモデルオブジェクトに画像をレンダリングしようとしています。私はモデルをレンダリングすることができましたが、イメージはJSON上にレンダリングされません。

var loader1 = new THREE.AssimpJSONLoader(); 
loader1.load(modelUrl, function(assimpjson){ 
           // console.log(assimpjson.geometry); 
           assimpjson.traverse(function(child){ 
             if(child instanceof THREE.Mesh) { 
               // newMesh = new THREE.Mesh(assimpjson, mat); 
               object_json = assimpjson; 
               assimpjson.traverse(function(child) { 
                 if(child instanceof THREE.Mesh){ 
                   // I am able to set the color of the child 
                   // but how can i set the image on the model? 
                   // I tried loading the image like this 
                   // var image = new THREE.TextureLoader().load('assets/images/image1.jpg'); 
                   // Is there a way than i can directly set the image to the mesh child in here 
                   // and give a custom height and width to the image. 
                   // child.material.color.setHex(0xFFFFFF); 
                 } 
               }); 
               assimpjson.scale.x = 30; 
               assimpjson.scale.y = 30; 
               assimpjson.scale.z = 30; 
               assimpjson.position.x = 120; 
               assimpjson.position.y = -200; 
               assimpjson.position.z = 0; 
               assimpjson.updateMatrix(); 
               if (previous) scene.remove(previous); 
               scene.add(assimpjson); 
               previous = assimpjson; 
             } 
           }); 
    }); 

ありがとうございました！

Answer 1

これはいかがですか？ -

function load_model(modelUrl, texture) { 

    var loader1 = new THREE.AssimpJSONLoader(); 
    loader1.load(modelUrl, function (assimpjson) { 
     object_json = assimpjson; 
     if (texture) { 
      assimpjson.traverse(function (child) { 
       if (child instanceof THREE.Mesh && child.material) { 
        child.material.map = texture; 
        child.material.needsUpdate = true; 
       } 
      }); 
     } 

     assimpjson.scale.x = 30; 
     assimpjson.scale.y = 30; 
     assimpjson.scale.z = 30; 
     assimpjson.position.x = 120; 
     assimpjson.position.y = -200; 
     assimpjson.position.z = 0; 
     assimpjson.updateMatrix(); 
     if (previous) 
      scene.remove(previous); 
     scene.add(assimpjson); 
     previous = assimpjson; 
    }); 
} 


// instantiate a loader 
let loader_t = new THREE.TextureLoader().load("path", function (texture) { 
     load_model(modelUrl, texture); 
    }, 
    // Function called when download progresses 
    function (xhr) { 
     console.log((xhr.loaded/xhr.total * 100) + '% loaded'); 
    }, 
    // Function called when download errors 
    function (xhr) { 
     console.log('An error happened'); 
     load_model(modelUrl); 
    }); 

Answer 2

あなたがあなたのローダがジオメトリを生成したりBufferGeometryあなたは割り当てる必要がある場合によってはTHREE.MultiMaterial（材料のアレイ）https://threejs.org/docs/index.html#Reference/Materials/MultiMaterial

を割り当てることができ、モデルの特定の三角形上のテクスチャを持つようにしたい場合はあなたのモデルの各三角形に必要な材料ID。あなたは整数

でのforeach Geometry.facesにFace3.materialIndexを割り当てる必要がジオメトリの

あなたは{整数：整数、カウント：整数、materialIndex開始}でBufferGeometry.groupsを割り当てることができますBufferGeometryについては

これが役立つことを願っています。