Three.js -Projekt auf iPhone - Ereignisproblemen (Wählen Sie Objekt aus und ziehen Sie das Objekt)

Question

Ich habe Bauprojekt mit drei.js ... Canvas, bei denen Sie auch Objekt ziehen und auch mit der Kameraansicht spielen können ... Es gibt ein berühmtes Beispiel: "Draggable Cubes", mein Projekt ist ziemlich ähnlich.

Bei meinem Projekt gibt es 3 Hauptveranstaltungen: Mausup / Mousedown / Mousemove ...

Nun, alles war in Ordnung ... aber jetzt versuche ich, diesen Code auf dem iPhone auszuführen und meine Ereignisse mit TouchStart / TouchMove / Touchend zu ändern ...

Die Funktion für bewegende Objekte scheint gut zu funktionieren, aber wenn ich versuche, das Objekt zu wählen, indem ich auf ihn klicke, ist es immer das gleiche Objekt, das ausgewählt wurde ... und nicht die, auf die ich zeige.

Ich denke, das Problem ist mit dieser Funktion:

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 );

            }
}

Hat jemand eine Idee, was ist das Problem ???

Answer 1

in dieser Zeile:

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

Sie verwenden das Maus -Vector2 -Objekt, aber nicht initialisieren.

So etwas sollte funktionieren:

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

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