First Steps in ayceVR

Setting up a simple Scene

Getting started with allyoucaneatVR

To get started with allyoucaneatVR let's begin by setting up a simple scene which will work in VR headsets and on the desktop. We'll create a spinning cube that is rendered onto an HTML canvas element. On the right you can see what the finished scene will look like. You can grab the latest version of ayceVR here.

  <html>
                                            
        <head>
            <script src="AyceVR.min.js"></script>
        </head>

        <body>
            <div  style="width: 500px; height: 300px;">
                <canvas id="ayce_canvas"></canvas>
                <script>...</script>
            </div>
        </body>
        
    </html>

First let's set up a the HTML page including the ayce canvas.

All we're doing here is adding the canvas tags and a reference to the ayceVR library. After ayceVR is initialized the canvas will automatically resize to fit its parent.
In the next step we'll add some JavaScript code to create our scene.

...
    <script>
        var scene = new Ayce.Scene(document.getElementById("ayce_canvas"));

        var cube = new Ayce.Geometry.Box(1, 1, 1);
        cube.offset.set(-cube.a/2.0, -cube.b/2.0, -cube.c/2.0);
        cube = cube.getO3D();
        cube.position.z = -2;
        scene.addToScene(cube);

        function update(){
            var y = (Date.now()/2000)%Math.PI*2.0;
            cube.rotation.fromEulerAngles(0, y, 0);

            Ayce.requestAnimFrame(update);
            scene.updateScene();
            scene.drawScene();
        }

        update();
    </script>
    ...

First let's create a new scene. This object will hold everything needed to draw the 3D world, including 3D objects, lights, sounds and camera.

Next we'll add the 3D cube by creating a new box geometry and setting its origin to the center of the box.
Every 3D object in our scene is an Object3D (O3D). The .getO3D() function retrieves an O3D from the box geometry. In guide 4 we'll cover the possibilities of O3Ds and their proper usage.

After shifting the cube two units along the z-Axis we're adding it to the scene. This completes the set up of our scene.

Time to add some movement and draw the scene. We'll start by creating an update function. In the first two lines we're setting the rotation of the cube. The cube.rotation object holds the orientation in form of a Ayce.Quaternion. The rotation angle is set by calling the .fromEulerAngles(x, y, z) function.

Ayce.requestAnimFrame(function) creates the animation loop. It takes a function as an argument which is called once the Browser is ready to render a new frame. We want the scene to be updated continuously so we're passing update() to this function. It is recommended to use this function for updating your Object3Ds, especially when you're making use of the WebVR functions in ayceVR.
Finally we're calling .updateScene() and .drawScene() to submit all changes to ayceVR and render the scene.

You have completed the first guide! Now you have a basic scene you can use as the base for your project. In the next guide we'll add VR functionality and look at the various render methods ayceVR provides. We'll also add some light. That's it for guide one of our ayceVR beginners' guide. You can download the sample code here.