Browsers
-in the-
Third
Dimension
2004
A-Frame
<a-scene>
<a-cube position="0 2 0" color="#4CC3D9"
width="2" height="2" depth="2">
<a-animation attribute="rotation"
to="360 1080 0"
dur="10000"
easing="linear"
repeat="indefinite">
</a-animation>
</a-cube>
<a-sky color="#888888"></a-sky>
</a-scene>
Web Components
Custom Elements
<a-scene>
☟
new THREE.Scene()
<a-cube>
☟
THREE.BoxGeometry
THREE.MeshLambertMaterial
THREE.Mesh
A-Frame
Custom Elements
Three.js
🎥
🎥 🎥
HMDVRDevice
var eyeParamsL = vrHMD.getEyeParameters('left');
var eyeParamsR = vrHMD.getEyeParameters('right');
LeftCamera.position.x = eyeParamsL.eyeTranslation;
RightCamera.position.x = eyeParamsR.eyeTranslation;
PositionSensorVRDevice
var state = positionSensor.getState();
state.position // 3d vector
state.orientation // Quaternion
Primitives
<a-camera>
<a-cube>
<a-curvedimage>
<a-cylinder>
<a-image>
<a-light>
<a-model>
<a-plane>
<a-sky>
<a-sphere>
<a-video>
<a-videosphere>
<a-sphere radius="4" color="#FC0"><a-sphere>
☟
<a-entity geometry="primitive: sphere;
radius: 4;"
material="color: #FC0;"></a-entity>
<a-sphere radius="4" color="#FC0"><a-sphere>
☟
<a-entity geometry="primitive: sphere;
radius: 4;"
material="color: #FC0;"></a-entity>