5

Is there a way to assign different textures for each side of a box geometry in A-Frame, without building the box from 6 unique planes?

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

More specifically, how can I do a cubemap in A-Frame? Here is an example of cubemapping in three.js: http://threejs.org/examples/#webgl_materials_cubemap

Thanks!

ngokevin
  • 12,980
  • 2
  • 38
  • 84
Nathan Diesel
  • 91
  • 2
  • 4

2 Answers2

2

You might want to try this component that allows you to add different textures to different sides of a-frame shapes (including boxes)

https://github.com/elbobo/aframe-multisrc-component

I think it could be more what you are looking for. Have a go, it would be great to hear how you get on with it.

Nick
  • 914
  • 1
  • 10
  • 30
1

You can use the Cubemap Component.

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

Attach the component to an entity using the path to the folder holding your cubemap as the attribute.

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

Inside the folder, the component assumes the following naming scheme:

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

This is the scheme used by Three.js's CubeTexture. If your cubemap images do not follow this scheme, you will need to rename them (or fork this repo and alter the above in index.js).

ngokevin
  • 12,980
  • 2
  • 38
  • 84
  • Thank you for the reply. Unfortunately, my level of understanding is too elementary to implement this. My original question was rewritten by community moderators and they reframed it as a question about cubemapping, which isn't what I originally asked. But thank you anyway. – Nathan Diesel Sep 02 '16 at 19:00