Put mtl file runtime on obj

object3d
raycaster
materials

#1

Hello guys, I just need some help on applying materials which is mtl file on runtime. heres my code so far .

I have raycast to detect object

function rayCast(event) {

            var raycaster = new THREE.Raycaster();
            var mouse = new THREE.Vector2();

            var x, y;
            if (event.changedTouches) {
                x = event.changedTouches[0].pageX;
                y = event.changedTouches[0].pageY;
            } else {
                x = event.clientX;
                y = event.clientY;
            }
            mouse.x = (x / window.innerWidth) * 2 - 1;
            mouse.y = - (y / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera(mouse, cameraOut);
            var intersects = raycaster.intersectObjects(objects, true);
            if (intersects.length > 0) {
                var objectGroup = intersects[0].object.parent;

                for (let j = 0; j < objectGroup.children.length; j++) {
                    switch (objectGroup.name) {
                        case "towel":
                         var mtlLoader = new THREE.MTLLoader(manager);
                         mtlLoader.setBaseUrl('assets/interior_towelBasket/');
                         mtlLoader.setPath('assets/interior_towelBasket/');
                         mtlLoader.load('interior_towelBasket.mtl', function (materials) {
                         materials.preload();
                            objectGroup.children.setMaterials(materials);
                          });
                            break;
                        default:
                            break;
                    }
                }
            }
        }

#2

Can you provide a live demo with your code? This makes it easier to debug your issue.

BTW: I’m not sure you used MTLLoader in the intended way. See this example as a reference.

https://threejs.org/examples/webgl_loader_obj_mtl.html