An alternative to <a-sky>, but uses stereo cube-map textures (ie. left and right eye textures)
Presented at Autodesk Forge conference.
- DEMO: final.html
video showing that a-frame works on gearVR browser: mp4
Intermediate Steps:
- interm1: interm1.html
- interm2: interm2.html
- interm3: interm3.html
- interm4: interm4.html
Using images from Autodesk A360 Gallery, Project: brooke-and-lauren-model
Add stereocube.js ...
< script src="stereocube.js" >
Then, attach the component to an entity using the path to the folder holding your cubemap as the attribute. Add two, one for the left eye, one for the right and set the eye property too, like this...
<a-entity skycube="folder:brooke1L; eye:left" scale="1 1 -1"></a-entity>
<a-entity skycube="folder:brooke1R; eye:right" scale="1 1 -1"></a-entity>
Note: the scale property was added here, instead of as a modification to the matrix, to avoid raycast issue with the skybox.
Inside the folder, the component assumes the following naming scheme:
var urls = [ 'L-0.jpg', 'L-1.jpg', 'L-2.jpg', 'L-3.jpg', 'L-4.jpg', 'L-5.jpg' ];
ie. front, right, back, left, floor, ceiling
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 stereocube.js).
Finally, add the 'stereocam' property to your camera, like this:
<a-camera stereocam position="0 0 0"> </a-camera>
- A-Frame Blog: A Week of A-Frame 14
- Facebook f8 conference: Under the hood: Building 360 video
- Reddit: webVR
- Forward Web Summit, Youtube: Build the Virtual Reality Web with A-Frame
- Tutorial : build a simple webVR UI with a-frame
- Why A-Frame (vs 3dml etc): ngokevin's blog
- I'd prefer to use cubetextureLoader, but ran into issues with caching (??): github
- aframe's coordinate system: aframe-demo
- material based cubemap: PhaseOne