如何在 A-Frame 中为盒子的侧面分配不同的纹理

Question

有没有办法为 A-Frame 中的盒子几何体的每一侧分配不同的纹理，而无需从 6 个独特的平面构建盒子？

<a-box></a-box>  <!-- How to apply a cubemap? -->

更具体地说，如何在 A-Frame 中制作立方体贴图？这是three.js中立方体贴图的一个例子：http ://threejs.org/examples/#webgl_materials_cubemap

谢谢！

Answer 1

您可以使用立方体贴图组件。

<a-scene>
  <a-entity cubemap="folder: /assets/Yokohama3/"></a-entity>
</a-scene>

使用保存立方体贴图的文件夹路径作为属性，将组件附加到实体。

<a-entity cubemap="folder: /assets/Yokohama3/"></a-entity>

在该文件夹内，该组件采用以下命名方案：

var urls = [
  'posx.jpg', 'negx.jpg',
  'posy.jpg', 'negy.jpg',
  'posz.jpg', 'negz.jpg'
];

这是Three.js 的CubeTexture 使用的方案。如果您的立方体贴图图像不遵循此方案，您将需要重命名它们（或分叉此存储库并在index.js 中更改上述内容）。