A-frame 没有拾取立方体贴图答案

【问题标题】：A-frame not picking up a cubemapA-frame 没有拾取立方体贴图
【发布时间】：2017-06-15 23:30:12
【问题描述】：

我正在尝试创建一个简单的骰子下落动画。使用下面的代码，我正在尝试将立方体贴图应用于 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>

【问题讨论】：

标签： aframe

【解决方案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，立方体贴图正在处理他的index.html

请注意，他的示例中的立方体贴图确实不适用于第一个实体，所以我的建议是复制他的立方体贴图声明，并使用您的 envMap 创建<a-entity>，但使用 scale="0 0 0"，或者可见=“假”。这样做后，第一个实体会被“窃听”（但不可见，所以谁在乎），您的实体应该可以正常工作。
对我来说很好用，不过倒置了我的来源：http://gftruj.nazwa.pl/cubemap/
请注意，您需要按顺序声明立方体贴图的面，如here 所述。查看dice cubemap，您需要直接下订单，例如：
骰子 5、骰子 2、骰子 4、骰子 3、骰子 6、骰子 1

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

【讨论】：

我已经试过了。但是，它并没有成功地将骰子面的纹理包裹在骰子周围，例如一侧一个点，另一侧六个点。
@PrakashBayas 查看我的更新，我认为您需要在立方体贴图中重新排列您的面孔
我从给定的链接尝试了立方体贴图，骰子只显示了三个面，即底部、左侧和背面。此外，组件立方体贴图并不与动态体组件齐头并进。对于该 github 存储库中给出的任何示例，我也无法使用此节点服务器加载检查器。我也更新了订单，但没有取得丰硕的成果。在我沿着这些方向进行研究之后，我得出结论，围绕 a-box 或类似实体的完美立方体贴图纹理的工作仍在进行中。
嗨 Piotr，下面的代码适用于骰子我需要在最后一个平面添加 180 度使它成为一个完美的立方体。