a frame

A-FRAME Build theVirtual RealityW eb MozillaVRT eam @ cvanw @ - PowerPoint PPT Presentation

A-FRAME Build theVirtual RealityW eb MozillaVRT eam @ cvanw @ dmarcos @ fernandojsg @ kearwoodgilbert @ ngokevin_ @ whoyee . It s too hard to create WebVR experiences. Josh Carpenter I ndex.htrnl - rainbowrneJT1brane


  1. A-FRAME Build theVirtual RealityW eb

  2. MozillaVRT eam @ cvanw @ dmarcos @ fernandojsg @ kearwoodgilbert @ ngokevin_ @ whoyee

  3. . ••

  4. It ’ s too hard to create WebVR experiences.

  5. Josh Carpenter I ndex.htrnl - rainbowrneJT1brane UNREGISTERED FOLDERS T e, rainbowmembrane ... CJ audio ... CJ examples ... CJ img ... CJ lib ... D models ... CJ shaderChunks ... CJ shaders .index.html.swn G l : ) create.js G l : ) GEM.js G : l ) GUl.js G l : ) initTones. js G l : ) Opening.js G l : ) RayMaker. js G l : ) RepelerMesh.js G l : ) Tone.js

  6. <a-box> <a-sphere> <a-obj-model>

  7. <a-box depth= “5” height= “0.5” width= “2” > <a-sphere color= “crimson” radius= “1.5” > <a-obj-model src= “fox.obj” >

  8. A-FRAME An open source framework for creating virtual reality web experiences without having to knowWebGL

  9. OUT -OF-THE-BOX ELEMENTS <a-light> <a-collada-model> <a-sphere> <a-videosphere> <a-image> <a-curvedimage> <a-video> <a-cylinder> <a-sky> <a-box> <a-obj-model>

  10. WITHVANILLA JAVASCRIPT .querySelector( ‘a - image’ ) .getAttribute( ‘opacity’ ) ’blanchedalmond’ ) .setAttribute( ‘material’ , ‘color’ , .addEventListener( ‘collide’ ) .createElement( ‘a - entity’ )

  11. WITH LIBRARIES $( ‘a - box’ ).attr( ‘width’ , 5) d3.select( ‘a - scene’ ).selectAll( ‘a - box.bar’ ).data(data) <Entity geometry={{ primitive: ‘ring’, radiusInner: 1.5 }} ‘flat’ }} material={{ color: ‘red’ , shader: . light={...lightProperties} onClick={this.changeColor}/> .

  12. ANIMATION SYSTEM <a-box> <a-animation attribute= “rotation” repeat= “indefinite” to= “ 0 36 0 0” ></a-animation> </a-box>

  13. ASSET MANAGEMENT SYSTEM <a-scene> <a-assets> <a-asset-item id= “monster” src= “monster.obj” ></a-asset-item> </a-assets> <a-entity obj-model= “src: #monster” ></a-entity> </a-scene>

  14. Let ’ s build a scene

  15. ENTITY -COMPONENT -SYSTEM Composability over inheritance

  16. ENTITY -COMPONENT -SYSTEM • Entities - placeholder objects • Components - modify appearance,behavior , functionality of entities

  17. REVEALINGTHE ABSTRACTION LAYER <a-bo x width=“ 5 ” color= “ #2E3837 ” > <a-entity geometry=“primitive: box; width: 5 ” material=“color : #2E3837 ” >

  18. COMPOSINGAN ENTITY <a-entity>

  19. COMPOSING AN ENTITY <a-entity geometry= “primitive: sphere; radius: 1.5” material= “color : tomato; metalness: 0.7 ” >

  20. COMPOSING AN ENTITY <a-entity geometry= “primitive: sphere; radius: 1.5” material= “color : tomato; metalness: 0.7” color : tomato” light= “type : point; #rickroll; volume: 0.9 ” > sound= “src:

  21. COMPOSING AN ENTITY <a-entity geometry= “primitive: sphere; radius: 1.5” material= “color : tomato; metalness: 0.7” color : tomato” light= “type : point; volume : 0.9” sound= “src : #rickroll; physics= “boundingRadius: 1.5; mass : 1” aggro= “100” explode follow-player vibrate>

  22. ANA T OMYAND PHYSIOLOGY AFRAME.registerComponent( ‘position’ , { });

  23. ANATOMY AND PHYSIOLOGY AFRAME.registerComponent( ‘position’ , { schema: { type: ‘vec3’ }, });

  24. ANATOMY AND PHYSIOLOGY AFRAME.registerComponent( ‘position’ , { schema: { type: ‘vec3’ }, update: function () { this.el.object3D.position.set ( this.data.x, this.data.y, this.data.z ); }); }

  25. STANDARD COMPONENTS position rotation look-controls sound scale light obj-model look-at fog text collada-model physics geometry material

  26. COMMUNITY COMPONENTS obj-loader layout lazy-load gamepad-controls along-path lathe-geometry leap-motion-controls collider spawner extrude-geometry proxy-controls

  27. COMPOSING MIXINS <a-scene> <a-assets> <a-mixin id= “ball” geometry= “primitive: sphere ” ></a-mixin> <a-mixin id= “cube” geometry= “primitive: box” ></a-mixin> <a-mixin #B4CD93” ></a-mixin> id= “green” material= “color: <a-mixin point” ></a-mixin> id= “shiny” light= “type: </a-assets> <a-entity mixin= “green ball” ></a-entity> <a-entity mixin= “shiny ball” ></a-entity> <a-entity mixin= “shiny gree n cube” ></a-entity> </a-scene>

  28. LATER ON, STYLESHEETS #basketball { geometry { primitive: sphere; radius: 0.5; } material { roughness: 0.9; src: url(basketball.png); } physics { 0.5; boundingRadius: mass: 0.8; } visible: true; }

  29. A-FRAME + WEBVR

  30. GET INVOLVED • aframevr -slack.herokuapp.com • aframe.io • github.com/aframevr • mozvr .com

Recommend


More recommend