I just learned about Mozilla's A-Frame framework for VR development. Wired touts it as an easier solution to the heavy lifting required by the Unity environment. The main thing this get rid of are the iOS or Android platform requirements of setting up a Unity environment. The process here is just coding a single HTML page that references a single .js file. One can do this online with Codepen.io and see the immediate results, though the live view doesn't seem to work on a mobile device, which Google Cardboard obviously requires. So to really get it working a workflow has to be developed where you can develop your page locally along with any assets (images or Collada files) and publish to the web yourself. I'm not sure how I would do that with students yet. Once you do get it published it does a remarkable job of just making the VR UI just work. The cardboard button is placed right there ready for you to switch your phone's screen over for use in cardboard. So far I have only learned how to place and animate objects in a scene. I don't know if it's possible to add user controls, like touching the screen to move around like I was able to work out in Unity.
What Can You Do?
There's a lot of good documentation and templates to get started with, so within an hour I had the basic coding for what you see in the screenshot above. I've learned how to place 3D shapes, 3D Collada models, how to give them specific attributes, like a position, color, and rotation, and how to animate them. Here is a screencast of what I was able to do in pretty short time, oh, and here is the live link to it online:And here is all the code for it. One thing I will point out for how objects are coded in the overall scene is you can see each object (sphere, etc. or media is an entity) and then the animations for each, like a position or color tween, or a rotation, are nested within that object's tag. Actually, since you are mainly adding attributes to a JavaScript object it's similar to coding animations in GifLoopCoder, which my students really loved working with.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello, World! • A-Frame</title>
<meta name="description" content="Hello, World! • A-Frame">
<script src="aframe.js"></script>
</head>
<body>
<a-scene>
<a-sphere radius="1.25">
<a-animation attribute="material.color"
from="white"
to="red"
dur="8000"
repeat="indefinite"
direction="alternate">
</a-animation>
<a-animation attribute="position"
from="-2 2 -5"
to="2 -1 -6"
dur="4000"
repeat="indefinite"
direction="alternate">
</a-animation>
</a-sphere>
<a-box position="-1 1 -3" width="1" height="1" depth="1">
<a-animation attribute="material.color"
from="purple"
to="orange"
dur="11000"
repeat="indefinite"
direction="alternate">
</a-animation>
<a-animation attribute="rotation"
dur="7000"
fill="forwards"
to="360 180 0"
repeat="indefinite"
direction="alternate">
</a-animation>
</a-box>
<a-cylinder radius="0.5" height="1.5">
<a-animation attribute="rotation"
dur="6000"
fill="forwards"
to="0 180 360"
repeat="indefinite"
direction="alternate">
</a-animation>
<a-animation attribute="material.color"
from="green"
to="yellow"
dur="5000"
repeat="indefinite"
direction="alternate">
</a-animation>
<a-animation attribute="position"
from="-1 1 -3"
to="2 2 -3"
dur="5000"
repeat="indefinite"
direction="alternate">
</a-animation>
</a-cylinder>
<a-plane rotation="-90 0 0" position="0 0 -5" width="5" height="4">
<a-animation attribute="rotation"
dur="20000"
fill="forwards"
to="0 88 0"
repeat="indefinite"
direction="alternate">
</a-animation>
<a-animation attribute="material.color"
from="brown"
to="blue"
dur="12000"
repeat="indefinite"
direction="alternate">
</a-animation>
</a-plane>
<a-entity collada-model="url(luna/princess-luna-season-1-high-resolution.dae)" position="0 0 -15" rotation="0 45 0">
<a-animation attribute="rotation"
dur="4000"
fill="forwards"
from="0 -45 0"
to="0 45 0"
repeat="indefinite"
direction="alternate">
</a-animation>
</a-entity>
<a-sky>
<a-animation attribute="material.color"
from="blue"
to="black"
dur="20000"
repeat="indefinite"
direction="alternate">
</a-animation>
</a-sky>
</a-scene>
</body>
</html>
I only scratched the surface with this environment, but just the basics are really fun and could provide a pretty easy way for middle and high schoolers to start playing with VR.
No comments :
Post a Comment