I have successfully loaded a model in from .obj and .mtl files. My goal is to allow the user to interact with specific parts of the model, such as changing their color by clicking on them. For example, clicking on a door of a car should enable the user to change the color of that door mesh.
Below is the code I used to load the model:
var mtlLoader = new THREE.MTLLoader();
mtlLoader.setPath('Models/Aventador/');
mtlLoader.load('Avent.mtl', function (materials) {
materials.preload();
var objLoader = new THREE.OBJLoader();
objLoader.setMaterials(materials);
objLoader.setPath('Models/Aventador/');
objLoader.load('Avent.obj', function (object) {
object.position.y = 0;
scene.add(object);
}, onProgress, onError);
});
UPDATE: I have now implemented the following code, which does not show any errors and prints 'mouseup' to the console as expected. However, it does not detect any intersections as intended. Any thoughts on what could be causing this issue?
var mouse = new THREE.Vector2();
function onDocumentMouseUp(event) {
console.log("mouseUp")
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
var raycaster = new THREE.Raycaster();
raycaster.setFromCamera(mouse, camera);
var intersects = raycaster.intersectObjects(scene.children);
for (var i = 0; i < intersects.length; i++) {
console.log(intersects[i]);
intersects[i].object.material.color.set(0x0000ff);
}
}
UPDATE 2: https://i.sstatic.net/AY7yr.png