Ich versuche reguläres Three.js-Raycasting in einer webbasierten Augmented-Reality-App zu verwenden (im Gegensatz zu AR-Hit-Tests geht es hier nicht um Hit-Tests auf echten Flugzeugen) .
Die Webanwendung verwendet A-Frame mit der Komponente aframe-xr , um WebXR-Unterstützung im WebXR-Viewer für iOS zu erhalten und WebARCore für Android und Augmented Reality funktioniert in diesen beiden experimentellen Browsern gut.
Allerdings etwas in aframe-xr
oder die three.xr.js und WebXR polyfill Bibliotheken, die zu einer falschen Projektion des direction Vektors eines Raycasts in den experimentellen Browsern mit WebXR führen Unterstützung. Der Ursprung des Raycast ist in Ordnung (an der aktuellen Position der Kamera), aber die Richtung ist immer unterhalb (y-Koordinate zu klein) und etwas nach links (x-Koordinate zu klein) von dem, wo es sollte Sein.
Zufälligerweise (oder nicht) scheint das y um die 1,6 Meter A-Frame
verschoben zu sein, versetzt die Kamera standardmäßig. Oder gewohnt, da dies scheinbar in Three.js
in der neuesten (unveröffentlichten) Version von A-Frame
verbannt wurde, was aframe-xr
abhängig von der Arbeit ist.
Dies ist kein Problem mit Raycasting im Allgemeinen, wie diese Reproduktion des Problems in Glitch zeigt, wo mein Test ist Ergebnisse sind wie folgt:
%Vor%Wobei "korrekt" bedeutet, dass die Richtung wie erwartet berechnet wird und die Kugel direkt unter meinem Finger oder Mauszeiger erscheint und "falsch" bedeutet, dass der Richtungsvektor falsch ausgegeben wird und die Kugel an der falschen Stelle erscheint.
>Der Code für diese Beispiele ist hier: Ссылка
Was geschieht in den WebXR-Bibliotheken, um die berechnete Raycast-Richtung zu kompensieren, und wie kann sie behoben werden?
Bonusinfo: Ich habe das auch mit der Komponente frame-ar in einem separater Fehler hier . Raycasting funktioniert korrekt in WebARCore auf Android (wobei ich glaube, dass das webxr Polyfill nicht verwendet wird), aber falsch, wenn auch mit einem anderen Offset im WebXR Viewer auf dem iPad (wo ich glaube das webxr polyfill is verwendet).
Update: Laut Roberto's Kommentar unten ist das Ändern der SITTING_EYE_HEIGHT-Konstante in webxr-polyfill
auf 0 ein Schritt in die richtige Richtung, aber nicht die vollständige Lösung. Mit dieser Änderung kann hier versucht werden - wenn ich die Webseite lade und vor dem Verschieben oder Rotieren das Raycasting mache Das Gerät herum, Raycast-Richtung wird tatsächlich korrekt berechnet, aber sobald ich das Gerät bewege oder rotiere, ist die Raycast-Richtung falsch.
Ich bin nicht so sehr in den Polyfill-Code involviert (ich arbeite am iOS-Viewer), aber ich erinnere mich, dass irgendwo im Polyfill eine SITTING_EYE_HEIGHT-Konstante ist. Es ist derzeit auf 1,1 Meter eingestellt. Vielleicht sollten Sie diesen Wert verwenden, um die Höhe in Ihrem Code zu kompensieren. Hier ist die genaue Linie: Zypern
Tags und Links javascript three.js augmented-reality aframe