2017-06-05 3 views
0

Ich versuche eine einfache Animation von fallenden Würfeln zu erstellen. Mit dem untenstehenden Code versuche ich, eine Cubemap auf a-box anzuwenden, aber nicht in der Lage, die gewünschten Ergebnisse zu erzielen.A-Frame nimmt keine Cubemap auf

<!DOCTYPE html> 
<html> 
    <head> 
     <script src="https://aframe.io/releases/0.2.0/aframe.js"></script> 

    </head> 

    <body> 
     <a-scene> 
      <a-assets> 
       <a-cubemap id="sky"> 
        <img src="dice/Dice-1.png"> 
        <img src="dice/Dice-2.png"> 
        <img src="dice/Dice-3.png"> 
        <img src="dice/Dice-4.png"> 
        <img src="dice/Dice-5.png"> 
        <img src="dice/Dice-6.png"> 
       </a-cubemap> 
      </a-assets> 
      <a-entity geometry="primitive: box" material="envMap: #sky"></a-entity> 
      </a-scene> 
    </body> 
</html> 

Antwort

0

Was ich weiß, Umgebungskarten, das heißt unter Verwendung von Cubemaps, verwendet werden, eine Kugel Umgebung bereitzustellen, oder die Arbeit mit reflecion/Refraktion, indem eine Karte der Umgebung bereitstellt.

In Ihrem Fall würde ich eine Textur für <a-box>, verwenden oder eine benutzerdefinierte Feld von Flugzeugen aus erstellen, und die Textur sie wie folgt dementsprechend:

<a-entity id="dice"> 
    <a-plane position="-0.5 0 0" rotation="0 -90 0"></a-plane> 
    <a-plane position="0.5 0 0" rotation="0 90 0"></a-plane> 
    <a-plane position="0 0.5 0" rotation="-90 0 0"></a-plane> 
    <a-plane position="0 -0.5 0" rotation="90 0 0"></a-plane> 
    <a-plane position="0 0 0.5" rotation="0 0 -90"></a-plane> 
    <a-plane position="0 0 -0.5" rotation="0 0 90"></a-plane> 

    </a-entity> 

Arbeits Geige: https://jsfiddle.net/x8dt1jjb/.

Cubemaps: Wie ich aus mehreren Quellen zu sehen, hatte Cubemaps viele Fragen: Wie here oder here

ich ein Typ gefunden behauptet, dass Cubemaps auf alle Einheiten mit Ausnahme der ersten Arbeit, überprüfen seine github aus, Cubemaps arbeitet an seinem index.html

Bitte beachten Sie, dass in der Tat Cubemaps auf seinem Beispiel nicht auf der ersten Einheit arbeiten, so würde mein Rat seine Cubemap Erklärungen zu kopieren sein, und erstellen <a-entity> mit Ihrem EnvMap angewandt, jedoch mit Skala = "0 0 0 "oder sichtbar =" falsch ". Wenn dies gemacht wird, wird die erste Entität "abgehört" (aber unsichtbar, also wen interessiert das), und Deine Entität sollte gut funktionieren.
Funktioniert richtig für mich, invertiert meine Quellen obwohl: http://gftruj.nazwa.pl/cubemap/
Beachten Sie, dass es eine Reihenfolge gibt, in der Sie Gesichter Ihrer Cubemap deklarieren müssen, wie erläutert here. Mit Blick auf einem dice cubemap, müssen Sie Ihre Bestellung direkt zu erhalten, zum Beispiel:
Würfel-5, Würfel-2, Würfel-4, Würfel-3, Würfel-6, Würfel-1

btw finde ich ein cubemap component Habe es aber noch nicht ausprobiert.

+0

Ich habe es ausprobiert. Allerdings wird die Textur von Würfelgesichtern nicht erfolgreich um Würfel wie ein Punkt auf der einen Seite und auf der gegenüberliegenden Seite auf sechs Punkte gewickelt. –

+0

@PrakashBayas check out mein Update, ich denke, Sie müssen Ihre Gesichter in der Cubemap neu anordnen –

+0

Ich versuchte Cubemap aus dem angegebenen Link, die Würfel zeigten nur drei Gesichter nämlich unten, links und zurück. Auch Komponenten-Cubemap gehen nicht Hand in Hand mit Dynamic-Body-Komponenten. Ich war auch nicht in der Lage, den Inspektor mit diesem Knotenserver für eines der in diesem github-Repository gegebenen Beispiele zu laden. Ich habe auch die Bestellung aktualisiert, ohne dass ein fruchtbares Ergebnis erzielt wurde. Nach meinen Untersuchungen in dieser Richtung komme ich zu dem Schluss, dass die Arbeit an einer perfekten Cubemap-Textur um eine Box oder eine ähnliche Entität noch nicht abgeschlossen ist. –