Wie man Objekt in WebGL 3d-Raum von einer Maus klicken Sie koordinieren

Baue ich ein Brettspiel in WebGL. Der Vorstand kann gedreht/gezoomt. Ich brauche einen Weg, zu übersetzen klicken Sie auf das canvas-element (x,y) in der entsprechenden Stelle im 3D-Raum (x, y, z). Das ultimative Ergebnis ist, dass ich wissen möchte, (x, y, z) - Koordinate, die enthält den Punkt, der berührt das Objekt am nächsten zum Benutzer. Zum Beispiel, klickt der Benutzer auf ein Stück, und Sie sich vorstellen, ein ray Reise durch den 3D-Raum, geht durch das Stück und den Spielplan, aber ich möchte die (x, y, z coord von dem Stück an der Stelle, wo es berührt wurde.

Ich glaube, das muss ein sehr häufiges problem, aber ich kann nicht scheinen, um eine Lösung zu finden, die in meinem googles. Es muss einen Weg zum Projekt die aktuelle Ansicht des 3D-Raums in den 2D-Modus, so können Sie ordnen Sie jedem Punkt im 2D-Raum an der entsprechenden Stelle im 3D-Raum. Ich möchte die Benutzer in der Lage sein, um die Maus über einen Platz auf der platine, und die spot-Farbe ändern.

InformationsquelleAutor der Frage seibelj | 2011-09-09

  1. 20

    Du suchst einen unproject Funktion wandelt die Bildschirm-Koordinaten in ein ray-Darsteller von der Kamera-position in der 3D-Welt. Sie müssen dann ray/triangle intersection tests zu finden, die am nächsten Dreiecks, um die Kamera, die auch schneidet der Strahl.

    Habe ich ein Beispiel von unprojecting verfügbar unter jax/Kamera.js#L568 -- aber Sie müssen noch zu implementieren ray/triangle intersection. Ich habe eine Implementierung, die auf jax/Dreieck.js#L113.

    Es ist ein einfacher und (meist) schnellere alternative, jedoch, das sogenannte "picking". Verwenden Sie dies, wenn Sie möchten, wählen Sie ein ganzes Objekt (zum Beispiel eine Schach-Stück), und wenn Sie kümmern sich nicht darum, wo die Maus tatsächlich geklickt haben. Die WebGL Weg, dies zu tun ist, um das Rendern der gesamten Szene in verschiedenen Schattierungen von blau (das blau ist der Schlüssel, während rot und grün sind zur eindeutigen IDs der Objekte in der Szene), um eine textur, Lesen Sie dann wieder ein pixel aus, die textur. Die Dekodierung der RGB-in die Objekt-ID geben Sie das Objekt, auf das geklickt wurde. Wieder habe ich umgesetzt und es jax/Welt.js#L82. (Siehe auch Linien 146, 162, 175.)

    Beide Ansätze haben vor-und Nachteile (beschrieben hier und in einigen der Kommentare nach), und Sie müssen, um herauszufinden, welcher Ansatz am besten dient Ihre Bedürfnisse. Die Kommissionierung ist langsamer, mit großen Szenen, aber unprojecting in reinem JS ist extrem langsam (da JS sich nicht schnell) also meine beste Empfehlung wäre, Experimentieren Sie mit beiden.

    FYI, Sie könnten auch einen Blick auf die GLU-Projekt und unproject code, die ich basiert mein code lose auf: http://www.opengl.org/wiki/GluProject_and_gluUnProject_code

    InformationsquelleAutor der Antwort sinisterchipmunk

  2. 2

    Dies ist die funktionsfähige demo -

    function onMouseUp(event) {

    event.preventDefault();        
    x_pos = (event.clientX / window.innerWidth) * 2 - 1;
    y_pos = -(event.clientY / window.innerHeight) * 2 + 1;
    z_pos = 0.5;

    var vector = new THREE.Vector3( x_pos , y_pos , z_pos );

    var projector = new THREE.Projector();
    projector.unprojectVector(vector, camera);
    var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());
    var intersects = raycaster.intersectObjects(intersectObjects);

    if (intersects.length > 0) {

        xp = intersects[0].point.x.toFixed(2);
        yp = intersects[0].point.y.toFixed(2);
        zp = intersects[0].point.z.toFixed(2);  
        destination = new THREE.Vector3( xp , yp , zp );

        radians =  Math.atan2( ( driller.position.x - xp) , (driller.position.z - zp));
        radians += 90 * (Math.PI / 180);
        console.log(radians);

        var tween = new TWEEN.Tween(driller.rotation).to({ y : radians },200).easing(TWEEN.Easing.Linear.None).start();

    }

    weissner-doors.de/drone/

    InformationsquelleAutor der Antwort Tomasz Drozdowski

  3. 1

    Arbeite ich auf dieses problem im moment - der Ansatz, den ich nehme ist

    1. Render-Objekte zu Holen buffer jeder mit einzigartigen Farbe
    2. Lese-Puffer-pixel, Karte wieder abgeholt-Objekt
    3. Render ausgesucht Objekt-Puffer mit jedem pixel die Farbe eine Funktion der Z-Tiefe
    4. Lese-Puffer-pixel, die Karte zurück zu Z-Tiefe
    5. Haben wir gesammelt und Objekt und das Ungefähre Z für die pick coords

    InformationsquelleAutor der Antwort xeolabs

  4. 0

    culted aus einem der threads.
    nicht sicher über (x,y,z), aber man kann die canvas(x,y) mit

    getBoundingClientRect()

    function getCanvasCoord(){
  var mx = event.clientX;
  var my = event.clientY;
  var canvas = document.getElementById('canvasId');
  var rect = canvas.getBoundingClientRect();//check if your browser supports this
  mx = mx - rect.left;
  my = my - rect.top;
  return {x: mx , y: my};
}

    InformationsquelleAutor der Antwort Naruto

Schreibe einen Kommentar