Detect click on mesh of 3DObject
<p>I have a model loaded in from .obj and .mtl I want the user the be able to click on specific parts of the model and, for example, change their colour. i.e click on a door of the car and be able to change the colour of that door mesh.</p>

<p>Here's my model load code, if it's needed.</p>

<pre><code>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);
    });
</code></pre>

<p><strong>EDIT:</strong>
I now have the following code, which gives no errors and prints out 'mouseup' to the console as expected but does not print out any intersections as expected, any ideas what's wrong?</p>

<pre><code>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 &lt; intersects.length; i++) {
        console.log(intersects[i]);
        intersects[i].object.material.color.set(0x0000ff);
    }
}
</code></pre>

<p><strong>EDIT 2</strong>:
<a href="https://i.stack.imgur.com/AY7yr.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/AY7yr.png" alt="helper arrows"></a></p>