In this guide you'll learn how to position the camera in your scene. This is one of the more advanced parts of setting up ayceVR because the position and orientation of the camera can be altered by multiple inputs. For example you could set up a HMD to look around and use mouse and keyboard to move.
This is achieved by using a camera manager which combines all input values and updates the camera accordingly. All input devices plug into the camera manager, not the camera itself. The camera manager also holds information other than orientation and position, like the IPD (Pupillary Distance) for the VR headset.

The example on the right shows a scene with the camera moving up and down slowly. By clicking on the canvas you can move the camera around using your mouse and the W/A/S/D keys.

    var cameraManager = scene.getCamera().getManager();

    var myModifier = new Ayce.CameraModifier();
    cameraManager.modifiers.push(myModifier);
                                            

In order to set the position of the camera we need to configure the camera manager. Therefore we're retrieving the manager from the camera by calling scene.getCamera().getManager().
The manager combines the input data of all added devices into one value each for camera position and rotation.
A Ayce.DeviceConfig is an object which stores positional and rotational attributes. In the example we’re going to create an empty Ayce.DeviceConfig object and add it to the camera manager by pushing it into the devices array of the camera manager. Later on we will update the myConfig object so that the camera moves up and down.
But first we're creating a DeviceConfig for mouse and keyboard input.

    var cameraManager = scene.getCamera().getManager();
    // ...
    var mouseKeyboard = new Ayce.MouseKeyboard(canvas, canvas);
    cameraManager.modifiers.push(mouseKeyboard);
                                                

This is done by creating a Ayce.MouseKeyboard(canvas, clickElement) object. This is a camera modifier preset which is included in ayceVR. The constructor of MouseKeyboard takes two arguments. The first one is the canvas we’re rendering to and the second one is the HTML-Element which the user clicks on to lock the cursor for mouse control.
After we've pushed the MouseKeyboard object into the camera manager's devices array it is handled in the same manner as the myConfig object.

    if(!mouseKeyboard.isMouseLocked()){
        myModifier.position.y = 1+Math.sin(Date.now()/1000)/2;
    }
                                            

Let's let the camera move up and down slowly while the user is not using the mouse to look around. Therefore we’re going to change the position attribute of the myConfig object inside the update method.
That’s all you need to do to change the camera position and orientation. Now you also know how to add multiple input devices like HMD input and game controllers. If you want to add a modifier ayceVR doesn't provide a preset for, you can look at the source code of the default DeviceConfig here and code your own.

    ...
    <script>
        var canvas = document.getElementById("ayce_canvas");
        var scene = new Ayce.Scene(canvas);
        scene.setClearColor(0.2, 0.2, 0.35);
        scene.setAmbientLight(0.9, 0.9, 0.9);

        var light = new Ayce.Light();
        light.position.set(0, 1, 2);
        scene.addToScene(light);

        //Adding objects to the scene
        var o3Ds = new Ayce.OBJLoader("assets/obj/suzanne.obj");
        var suzanne = o3Ds["Suzanne"];
        var plane = o3Ds["Plane"];

        suzanne.position.z = -4;
        suzanne.useSpecularLighting = true;
        suzanne.shininess = 10;

        scene.addToScene(suzanne);
        scene.addToScene(plane);

        //Getting the camera manager
        var cameraManager = scene.getCamera().getManager();

        //creating a custom camera modifier
        var myModifier = new Ayce.CameraModifier();
        cameraManager.modifiers.push(myModifier);

        //creating a mouse/keyboard camera modifier
        var mouseKeyboard = new Ayce.MouseKeyboard(canvas, canvas);
        cameraManager.modifiers.push(mouseKeyboard);


        function update() {
        //Check if the mouse is locked
        if(!mouseKeyboard.isMouseLocked()){
        //Setting the position of the custom modifier
        myModifier.position.y = 1+Math.sin(Date.now()/1000)/2;
        }
        Ayce.requestAnimFrame(update);
        scene.updateScene();
        scene.drawScene();
        }

        update();
    </script>
    ...

Complete Code