Question

I am loading .obj files using THREE.OBJLoader() and pushing each object in myobj[] array after adding it to screen.

var myObjs = [];
var loader = new THREE.OBJLoader();
loader.addEventListener( 'load', function ( event ) {
var object = event.content;
object.position.x=xpos;
object.position.y = ypos;
scene.add( object );
teeth.push(object);
});
loader.load( 'obj/myobj1.obj' );
loader.load('obj/myobj2.obj');
loader.load('obj/myobj3.obj');

I can check whether an object is clicked or not using the following code:

function onDocumentMouseDown( event ) {

event.preventDefault();
var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - (   event.clientY / window.innerHeight ) * 2 + 1, 0.5 );


projector.unprojectVector( vector, camera );

var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() );
var intersects = ray.intersectObjects( teeth, true );

if ( intersects.length > 0 ) {

intersects[0].object.position.z=50;
}

So far so good. Now what I can’t figure out is how to track which of my object in myobjs[] array was click or should I say how can I map intersects[0].object in myobjs array.

Regards,
ZB

Answer 1

The object will be exactly the same, i.e. intersects[0].object and some myobjs array member will both be references to the same instance. If you want to find the index to the myobjs array (for example in order to delete it from there), you have several choices:

1. After intersection, loop through myobjs and compare intersects[0].object.id to myobj[i].id (each three.js object has a unique id property).
2. You are also free to assign any suitable custom properties to the object in your load event handler, so simply add a line object.myId = myobjs.length; just before pushing it to myobjs and you can index the array later with intersects[0].object.myId.