Three.js project on iphone - event issue (select & drag object)

Question

I have a project with the tag three.js ... where you can drag an object and play with the camera, and also ... there is a famous example - "Draggable Cubes", well, my project is very similar.

There are 3 main events in my project: mouseup / mousedown / mousemove ...

Well, everything was fine ... but now I'm trying to run this code on iphone, changing my events with touchstart / touchmove / touchhend ...

The function of a moving object works fine, but when I try to select an object by clicking on it, it is always the same object that was selected ... and not the one I point to ....

I think the problem is in this function:

function onDocumentMouseDown( event ) { event.preventDefault(); var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ); projector.unprojectVector( vector, camera ); var ray = new THREE.Ray( camera.position, vector.subSelf( camera.position ).normalize() ); var intersects = ray.intersectObjects( objects ); if ( intersects.length > 0 ) { SELECTED = intersects[ 0 ].object; var intersects = ray.intersectObject( plane ); offset.copy( intersects[ 0 ].point ).subSelf( plane.position ); } } 

Does anyone have an idea what the problem is?

Answer 1

in this line:

 var vector = new THREE.Vector3( mouse.x, mouse.y, 0.5 ); 

You are using the Mouse Vector2 object, but you are not initializing it.

Something like this should work:

 mouse.x = +(event.targetTouches[0].pageX / window.innerwidth) * 2 +-1; mouse.y = -(event.targetTouches[0].pageY / window.innerHeight) * 2 + 1;