A字架建筑场景"inside cube"

Question

我只是想使用 A-frame 库创建一个可视化，其中用户是 "inside a cube"，侧面嵌入了 canvas 图像。我已经开始使用飞机准备场景。这就是我所达到的。 http://codepen.io/LuoXiahong/pen/LRNJNb

    <a-scene>
      <a-assets>
      </a-assets>
      <!-- Basic plane. -->
      <a-plane color="#ff0000" height="2" width="2" position="0 0 0" rotation="-90 0 0"></a-plane>
      <!-- Front-->
      <a-plane color="#00ff00" height="2" width="2" position="0 1 -1" rotation="0 0 90"></a-plane>
      <!--Back - does not display-->
      <a-plane color="#0000ff" height="2" width="2" position="0 1 1" rotation="0 0 90"></a-plane>
      <!-- Left-->
      <a-plane color="#ffff00" height="2" width="2" position="-1 1 0" rotation="0 90 0"></a-plane>
      <!-- Right-->
      <a-plane color="#ff00ff" height="2" width="2" position="1 1 0" rotation="0 -90 0"></a-plane>
      <!--Top plane - does not display -->
      <a-plane color="#00ffff" height="2" width="2" position="0 2 0" rotation="-90 0 0"></a-plane>
    </a-scene>

我在显示立方体的顶部和背面时遇到问题。有谁可以帮助我吗？

Answer 1

默认情况下，在 THREE.js（以及 A 帧）中，人脸仅渲染一侧或另一侧。您的顶部平面只是以错误的方式旋转，因此只能从顶部看到它。您可以将其旋转更改为 90 0 0 来解决这个问题，或者将 side="back" 或 side="double" 添加到您的 <a-plane /> 以更改显示平面的哪一侧。更多详情 here.

A字架建筑场景"inside cube"

A-frame building scene "inside cube"

aframe