Question

我正在尝试创建一个简单的骰子动画。使用下面的代码，我试图将立方体贴图应用于a-box但无法获得所需的结果。

<!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>

Answer 1

据我所知，环境地图，即使用立方体贴图，通过提供周围环境的地图，用于提供球体环境，或使用反射/折射。

在你的情况下，我会使用<a-box>的纹理，或者创建一个由平面构成的自定义框，并按照这样的方式对它们进行纹理设计：

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

工作小提琴：https://jsfiddle.net/x8dt1jjb/。

立方贴图：正如我从多个来源看到的，立方体贴图有很多问题：与here或here

相同

我发现有人声称立方体贴图可用于除第一个以外的所有实体，请查看他的github， cubemaps正在处理他的index.html

请注意，他的示例中的立方体贴图确实没有在第一个实体上工作，所以我的建议是复制他的立方体贴图声明，并在应用了envMap时创建<a-entity>，但是scale =＆＃34; 0 0 0＆＃34;，或者可见=＆＃34;假＆＃34;。如果这样做，第一个实体就会被窃听＆＃39; （但是看不见，所以谁关心），你的实体应该正常工作。
对我来说工作正常，虽然颠倒了我的来源：http://gftruj.nazwa.pl/cubemap/
请注意，有一个顺序需要声明您的立方体贴图的面，如here所述。查看dice cubemap，您需要直接获得订单，例如：
骰子-5，骰子-2，骰子-4，骰子-3，骰子-6，骰子-1

顺便说一下，我找到了cubemap component，但是还没有尝试过。

A帧没有拾取立方体贴图

1 个答案: