Three.js API for AltspaceVR

API Overview

Note that many of our APIs make use of Promises. Learn about how they work here.

altspace.getThreeJSRenderer - Get AltspaceVR's renderer. Has one function that you should call every frame: render(scene).
altspace.getEnclosure - Retrieve the enclosure in which the app is loaded. Details the width, depth, and height of the enclosure, as well as the unit conversion factor to meter scale.
altspace.getUser - Retrieve the local user's id, name, and moderator status.
object.addEventListener - Be notified when a user interacts with an object. Available events are cursorup, cursordown, cursormove, cursorenter, and cursorleave.
altspace.utilities.sync.connect - Every user in a room is running their own copy of your app. Use this function to synchronize changes and events between users.
- SceneSync and Object3DSync are helper behaviors to make the sync process easier.
altspace.getThreeJSTrackingSkeleton - Keep track of the user's head and hands.
Behaviors - Our system for modularizing code so it's reusable on different objects. Many behaviors are built-in.

Examples and Resources

Quick Start

This is a fully functional example of what Three.js code looks like. Live Demo

<!DOCTYPE html>
<html lang=en>
    <head>
        <script src="https://cdn.rawgit.com/mrdoob/three.js/r84/build/three.js"></script>
        <script src="https://sdk.altvr.com/libs/altspace.js/2.9.0/altspace.min.js"></script>
    </head>
    <body>
        <script>
        // wraps up the renderer, scene, and animation loop
        var sim = new altspace.utilities.Simulation();

        // create a green cube 200 pixels in size
        var cube = new THREE.Mesh(
            new THREE.BoxGeometry(200, 200, 200),
            new THREE.MeshBasicMaterial({color: 0x00ff00})
        );
        sim.scene.add(cube);

        // attach a spin behavior to make it rotate over time
        cube.addBehavior( new altspace.utilities.behaviors.Spin() );
        </script>
    </body>
</html>