xeoEngine Concept

API Walkthrough

In this walkthrough we'll create the spinning torus scene shown in the screenshot below.

To show how xeoEngine scenes are dynamically editable, we'll create the scene incrementally: first we'll create the basic torus entity, then set it spinning, and then add texture.

Finally, to show how data-driven xeoEngine is, we'll clone the scene, which involves serializing and deserializing it as JSON.

Creating the 3D Scene

First, include xeoengine.min.js in your HTML page:

<script src="https://cdn.rawgit.com/xeolabs/xeoengine/master/build/xeoengine.min.js"></script>

Using the JavaScript API, create the 3D scene as an entity-component graph, as shown in the diagram below. Note how a scene is basically a container of components that are tied together by entities.

var scene = new XEO.Scene();

var material = new XEO.PhongMaterial(scene, {
    diffuse: [ 0.6, 0.6, 0.7 ]

var geometry = new XEO.TorusGeometry(scene);

var entity = new XEO.Entity(scene, {
    material: material,
    geometry: geometry


xeoEngine provides defaults for pretty much everything, which means that we only need to create things wherever we need to override those defaults. For our entity, we provided our own material and geometry components, leaving the entity to fall back on the scene's default flyweight instances for all the other components it needs (camera, lights etc).


Animate scenes by updating component properties. Almost everything in xeoEngine fires change events that you can subscribe to, which is quite handy for scripting.

     function(value) {
            console.log("Material diffuse is now: " + value);

// This is going to fire our change listener above
material.diffuse = [0.9, 0.9, 0.6];

Likewise, you can update properties on any of the scene's default flyweight components, such as the default camera, which we'll orbit a little bit on each frame:

scene.on("tick", function () {
    var view = scene.camera.view;


You can edit everything in your scene dynamically, at runtime. Create and destroy components, link or unlink them to each other, update their properties, and so on. Let's add a diffuse texture map to our material, which will immediately appear on our torus:

material.diffuseMap = new XEO.Texture(scene, {
    src: "textures/uvGrid2.jpg"

Saving and Loading

You can save or load a JSON snapshot of your scene at any time. This snippet will dump the whole state of our scene to JSON, then load that JSON again to create a second, identical scene:

var json = scene.json;

var scene2 = new XEO.Scene({ json: json });

Learn More

xeoEngine Features