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

感谢tonnn的任何帮助！

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

如果您想在模型的某些三角形上有纹理，可以指定THREE.MultiMaterial（材质数组）MultiMaterial (does not exist any more)

根据您的加载程序是否生成Geometry或BufferGeometry，您需要将所需的材质ID分配给模型的每个三角形。

对于BufferGeometry，您可以为BufferGeometry.groups分配{start：Integer，count：Integer，materialIndex：Integer}

对于几何体，你需要为整个Geometry.faces分配Face3.materialIndex和一个整数

希望这有帮助。

如何使用Three Js仅在json模型对象的前部加载图像

2 个答案: