Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

まよいの墓(WebVR編)

248 views

Published on

Hack Day 2017にて制作した「まよいの墓」に関する資料

Published in: Technology
  • Be the first to comment

  • Be the first to like this

まよいの墓(WebVR編)

  1. 1. (WebVR ) 2017/2/23 @
  2. 2. 16×16 WebVR 3D 16×16
  3. 3. 16×16 WebVR 3D 16×16
  4. 4. 16×16 WebVR
  5. 5. A-Frame HTML VR
  6. 6. <html> <head> <script src="https://aframe.io/releases/0.5.0/aframe.min.js" </head> <body> <a-scene> <a-box position="0 1 0" rotation="20 40 0" opacity="0.8" depth="2"></a-box> </a-scene> </body> </html>
  7. 7. DOM // <a-box> var newBox = document.createElement("a-box"); // <a-scene> var scene = document.getElementsByTagName('a-scene'); // <a-scene> <a-box> scene.appendChild(newBox);
  8. 8. * Hack Day
  9. 9. 3D
  10. 10. 3D aframe-obj-loader-component ( ...) <script src="./aframe-obj-loader-component.min.js"></script <a-entity obj-loader="src: url(./tree.obj); mtl: url(./tree.mtl);"> </a-entity>
  11. 11. TweenJS <a-entity obj-loader="src: url(./tree.obj); mtl: url(./tree.mtl) <a-animation dur = '200' attribute='position' from="7.5 0.25 7.5" to="7.5 0.35 7.5" direction="alternate-reverse" repeat="indefinite" easing="ease-out"> </a-animation> </a-entity>
  12. 12. https://tweenjs.github.io/tween.js/examples/03_grap hs.html
  13. 13. *
  14. 14. VR

×