Question

I have building project with three.js… canvas where you can drag object
and play with the camera view as well… there is a famous example- "Draggable Cubes",
well my project is pretty similar.

On my project there are 3 main events: mouseup /mousedown/ mousemove…

Well everything was ok….but now I’m trying to run this code on iPhone,changing my events
with touchstart / touchmove / touchend…

The moving object function seems to work fine, but when I’m trying to select the object by clicking him,
it’s always the same object that been selected… and not the one I’m pointing on….

I guess the problem is with 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 );

            }
}

Is anybody have an idea what is the problem?

Answer 1

in this line :

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

You use the mouse Vector2 object but you don’t initialize 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;