How to load an image on only front part of a json model object using Three Js

Question

Hi i am trying to render an image on the model object which is using a json file. I have been able to render the model but the image won't render on the JSON at all.

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

Thanks a tonnn for any help!!!

Rasheduzzaman Sourov · Accepted Answer · 2017-03-20 04:58:57Z

1

How about this? -

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

answered Mar 20, 2017 at 4:58

Rasheduzzaman Sourov

1,5252 gold badges19 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Abhijeet Chakravorty Over a year ago

Hi Sourov. Thanks a tonnn for the help but it is mapping the image entirely on the object. i do not want that but to render the image on front part of the model only with custom height and width assigned to the image.

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

If you want to have a texture on certain triangles of your model you can assign a THREE.MultiMaterial (Array of Materials) MultiMaterial (does not exist any more)

Depending if your loader generates Geometry or BufferGeometry you need to assign the wanted material ID to each triangle of your model.

For BufferGeometry you can assign BufferGeometry.groups with { start: Integer, count: Integer, materialIndex: Integer }

For Geometry you need to assign foreach Geometry.faces the Face3.materialIndex with an Integer

Hope this helps.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Mar 22, 2017 at 19:12

hEins

313 bronze badges

Collectives™ on Stack Overflow

How to load an image on only front part of a json model object using Three Js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related