SceneJS

https://github.com/xeolabs/scenejs
Admin
An extensible WebGL-based 3D engine. This is an archived project.
Tokens:245,670
Snippets:852
Trust Score:8.6
License:MIT
Update:1 year ago
Show doc for...
Tokens:
Raw
### Loading and Navigating Examples in JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/index.html

The `load` function handles the process of loading a new example. It updates the UI to highlight the selected link, modifies the browser's URL hash for direct linking, sets the `viewer` iframe's source to display the example, and triggers the `updateSource` function to show the example's code.

```JavaScript
var load = function (file) {
  if (selected !== null) divs[selected].className = 'link';
  divs[file].className = 'link selected';
  window.location.hash = file;
  viewer.src = file + '.html';
  viewer.focus();
  sourceButton.style.display = '';
  selected = file;
  updateSource();
};
```

--------------------------------

### Initializing SceneJS and Creating a Scene with Orbit Camera

Source: https://github.com/xeolabs/scenejs/blob/master/examples/scenegraph_events_misc.html

This snippet configures SceneJS to load plugins from a specified path and then creates a new 3D scene. The scene includes an 'orbit' camera, which allows interactive navigation, and a simple teapot geometry rendered with a grey material. This setup forms the basic visual context for the event demonstrations.

```JavaScript
SceneJS.setConfigs({ pluginPath: "../api/latest/plugins" });
var scene = SceneJS.createScene({
    nodes: [
        {
            type: "cameras/orbit",
            yaw: -100,
            pitch: -10,
            zoom: 15,
            zoomSensitivity: 1.0,
            nodes: [
                {
                    type: "material",
                    color: { r: 0.5, g: 0.5, b: 0.6 },
                    nodes: [
                        { type: "geometry/teapot" }
                    ]
                }
            ]
        }
    ]
});
```

--------------------------------

### Displaying Example Sections and Files in JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/index.html

This snippet iterates through defined sections and files, creating headings for each section and clickable links for individual example files. It also handles special 'info' lines (starting with '#') by displaying them as comments, providing context for the examples.

```JavaScript
_index = 1;
for (var key in files) {
  var section = files[key];
  var div = document.createElement('h2');
  div.textContent = _index++ + "." + key;
  container.appendChild(div);
  catDivs[key] = div;
  for (var i = 0; i < section.length; i++) {
    var file = section[i];
    if (file.charAt(0) == "#") {
      var div = document.createElement('div');
      div.textContent = "// " + file.substring(1);
      div.className = (i == 0 ? 'infoFirst' : 'info');
      container.appendChild(div);
      continue;
    }
    (function (file) {
      var name = file.split('_');
      name.shift();
      name = name.join(' / ');
      var div = document.createElement('div');
      div.className = 'link';
      div.textContent = name;
      div.addEventListener('click', function () { load(file); });
      container.appendChild(div);
      divs[file] = div;
    })(file);
  }
}
```

--------------------------------

### Initializing SceneJS and Creating a Scene with Orbit Camera - JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/optimization_frustumClipping.html

This snippet configures SceneJS to load plugins from a specified path and then creates the main scene. It sets up an `orbit` camera, allowing user interaction, and includes a `flags` node to disable backface culling. The scene then populates with 1000 bodies generated by the `makeBodies` function, demonstrating a large-scale scene setup.

```JavaScript
SceneJS.setConfigs({ pluginPath:"../api/latest/plugins" });
var scene = SceneJS.createScene({
    nodes:[
        {
            type:"cameras/orbit",
            yaw:30, pitch:-30, zoom:100, zoomSensitivity:20.0, spin: 0.1,
            nodes:[
                {
                    type:"flags", flags:{ backfaces:false },
                    nodes:makeBodies(1000)
                }
            ]
        }
    ]
});
```

--------------------------------

### Initializing SceneJS with Post-processing Blur and Camera Orbit

Source: https://github.com/xeolabs/scenejs/blob/master/examples/postprocessing_blur.html

Configures the SceneJS plugin path and creates a complex scene graph. It integrates an orbiting camera, a post-processing blur effect, a cloudy sea skybox, a London reflection map, and randomly scattered objects, demonstrating a rich 3D environment setup.

```JavaScript
SceneJS.setConfigs({
    pluginPath: "../api/latest/plugins"
});
var scene = SceneJS.createScene({
    nodes: [
        // Mouse-orbit for camera,
        // implemented by plugin at http://scenejs.org/api/latest/plugins/node/cameras/orbit.js
        {
            type: "cameras/orbit",
            yaw: -40,
            pitch: -20,
            zoom: 500,
            eye: {
                x: 0,
                y: 150,
                z: -1000
            },
            look: {
                x: 0,
                y: 0,
                z: 0
            },
            zoomSensitivity: 10.0,
            spin: 0.1,
            // Slowly spin about X axis
            nodes: [
                // Blur effect, implemented by plugin at:
                // http://scenejs.org/api/latest/plugins/node/postprocess/blur.js
                {
                    type: "postprocess/blur",
                    id: "myBlur",
                    texelSize: 0.00099,
                    // Size of one texel (1 / width, 1 / height)
                    factor: 0.5,
                    // Amount of blur, in range [0..1]
                    nodes: [
                        // Cloudy sea skybox, implemented by plugin at:
                        // http://scenejs.org/api/latest/plugins/node/skybox/cloudySea.js
                        {
                            type: "skybox/cloudySea",
                            size: 5000
                            // Box half-size on each axis - default is 5000
                        },
                        // The reflection cube map
                        // Images taken from: http://hristo.oskov.com/projects/cs418/mp3/
                        {
                            type: "reflect/london",
                            intensity: 0.7,
                            nodes: [
                                // Randomly scattered boxes, implemented by plugin at
                                // http://scenejs.org/api/latest/plugins/node/geometry/randomObjects.js
                                {
                                    type: "geometry/randomObjects",
                                    numObjects: 1000
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
});
```

--------------------------------

### Configuring SceneJS Plugin Path - JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/models_backgrounds_water.html

This JavaScript line configures SceneJS to specify the base path for loading plugins. It directs SceneJS to look for plugin definitions in the `../api/latest/plugins` directory, which is crucial for the scene to correctly load custom node types like `background/water` and `cameras/orbit` from the SceneJS API.

```JavaScript
SceneJS.setConfigs({ pluginPath:"../api/latest/plugins" });
```

--------------------------------

### Redirecting to SceneJS Example Page Based on URL Parameter in JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples.html

This JavaScript block handles direct redirection to the SceneJS examples page. If a 'page' URL parameter is present and maps to a known legacy ID, the script appends the corresponding path as a hash to the examples page URL before redirecting.

```JavaScript
else { var examplesPage = "examples/index.html"; var page = gup("page"); if (page) { var path = legacyIDs[page]; if (path) { examplesPage += "#" + path } } window.location = examplesPage; }
```

--------------------------------

### Generating Test Navigation Buttons for SceneJS Examples in JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples.html

This JavaScript block conditionally generates HTML buttons for each legacy example ID when 'testLinks' is true. Clicking a button redirects the user to the corresponding example page, demonstrating the navigation mapping.

```JavaScript
if (testLinks) { for (var key in legacyIDs) { if (legacyIDs.hasOwnProperty(key)) { var button = document.createElement('div'); button.id = 'button'; button.textContent = legacyIDs[key]; button.addEventListener('click', (function () { var id = legacyIDs[key]; return function (event) { window.location = "examples/index.html#" + id; }; })(), false); document.body.appendChild(button); } } }
```

--------------------------------

### Defining SceneJS with Water Background, Orbit Camera, and Teapot - JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/models_backgrounds_water.html

This JavaScript code defines a SceneJS scene graph, creating a 3D environment. It includes a `models/backgrounds/water` node for a procedural water effect, a `cameras/orbit` node for interactive camera control (with initial yaw, pitch, and zoom), and a `geometry/teapot` node nested within a material node to render a blue teapot. All these nodes are loaded as plugins, demonstrating SceneJS's modularity.

```JavaScript
var scene = SceneJS.createScene({
  nodes:[
    // Water background node, implemented by plugin at
    // http://scenejs.org/api/latest/plugins/node/backgrounds/water.js
    { type:"models/backgrounds/water" },

    // Mouse-orbited camera, implemented by plugin at
    // http://scenejs.org/api/latest/plugins/node/cameras/orbit.js
    { type:"cameras/orbit", yaw:40, pitch:-20, zoom:10, zoomSensitivity:1.0, nodes:[
      { type:"material", color:{ r:0.3, g:0.3, b:1.0 }, nodes:[
        // Teapot primitive, implemented by plugin at
        // http://scenejs.org/api/latest/plugins/node/geometry/teapot.js
        { type:"geometry/teapot" }
      ] }
    ] }
  ]
});
```

--------------------------------

### Initializing SceneJS with Stormy Days Skybox and Teapot - JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/skyboxes_stormyDays.html

This SceneJS example initializes the library by setting the plugin path, then creates a 3D scene. It includes an orbit camera, a 'stormyDays' skybox with a specified size, and a blue-tinted teapot geometry, demonstrating basic scene composition and plugin usage.

```javascript
SceneJS.setConfigs({
    pluginPath:"../api/latest/plugins"
});

SceneJS.createScene({
    nodes:[
        {
            type:"cameras/orbit",
            yaw:340,
            pitch:-20,
            zoom:15,
            zoomSensitivity:10.0,
            nodes:[
                {
                    type:"skybox/stormyDays",
                    size:5000
                },
                {
                    type:"material",
                    color:{ r:0.4, g:0.4, b:0.9 },
                    nodes:[
                        {
                            type:"geometry/teapot"
                        }
                    ]
                }
            ]
        }
    ]
});
```

--------------------------------

### Styling Body for SceneJS Example - CSS

Source: https://github.com/xeolabs/scenejs/blob/master/examples/models_backgrounds_gradient.html

This CSS snippet initializes the page by setting the body margin to zero and disabling user text selection. This setup is typical for full-screen canvas applications like SceneJS, preventing unwanted text highlighting and scrollbars.

```CSS
body { margin: 0; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; }
```

--------------------------------

### Styling Body for SceneJS Example - CSS

Source: https://github.com/xeolabs/scenejs/blob/master/examples/models_backgrounds_water.html

This CSS snippet sets the margin of the `body` element to zero and disables user text selection across different browsers. This is a common practice for full-screen canvas applications like SceneJS to prevent unwanted text selection or scrolling, ensuring a clean visual presentation.

```CSS
body { margin: 0; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; }
```

--------------------------------

### Initializing SceneJS with View-Space Spot Light - JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/lighting_spot_view.html

This snippet initializes SceneJS, configures the plugin path, and creates the main scene graph. It sets up an orbit camera and defines a single spot light source in 'view' space, meaning the light's position is relative to the camera, simulating a head-mounted light. It also applies a material to the objects rendered by `getTeapots()`.

```JavaScript
// Point SceneJS to the bundled plugins
SceneJS.setConfigs({ pluginPath:"../api/latest/plugins" });

// Create scene
var scene = SceneJS.createScene({
    nodes:[
        // Mouse-orbited camera, implemented by plugin at http://scenejs.org/api/latest/plugins/node/cameras/orbit.js
        {
            type:"cameras/orbit",
            yaw:30,
            pitch:-30,
            zoom:50,
            zoomSensitivity:5,
            nodes:[
                // Override default lights with a single positional light source in View-space.
                // Since our light is in View-space, it will remain locked in alignment with
                // the view frustum and will therefore not change position relative to our
                // changing viewpoint. It will behave as if it were head-mounted.
                {
                    type:"lights",
                    id:"myLights", // So we can reference this lights node
                    lights:[
                        {
                            mode:"spot",
                            color:{ r:0.8, g:1.0, b:0.8 },
                            diffuse:true,
                            specular:true,
                            pos:{ x:1, y:1, z:0 },
                            dir:{ x:0, y:0, z:-1 },
                            innerCone: 0.02,
                            outerCone: 0.1,
                            space:"view"
                        }
                    ],
                    nodes:[
                        {
                            type:"material",
                            id:"myMaterial",
                            color:{ r:0.5, g:0.5, b:0.6 },
                            specularColor:{ r:1.0, g:1.0, b:1.0 },
                            specular:1.0,
                            shine:70.0,
                            emit:0,
                            alpha:1.0,
                            nodes:getTeapots()
                        }
                    ]
                }
            ]
        }
    ]
});
```

--------------------------------

### Initializing SceneJS GUI - JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/lighting_spot_view.html

This code initializes a simple graphical user interface (GUI) for the SceneJS application. The GUI is linked to the `scene` object and specifically targets the 'myLights' node, allowing interactive manipulation of the light properties at runtime.

```JavaScript
// Simple GUI for playing around with the lights and material nodes
new SceneJS.GUI(scene, ["myLights"]);
```

--------------------------------

### Styling Body Element with CSS

Source: https://github.com/xeolabs/scenejs/blob/master/examples/scenegraph_status.html

This CSS snippet sets the background color of the body to white, removes default margins, and disables user selection across different browser engines for a cleaner user experience.

```CSS
body { background: white; margin: 0; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; }
```

--------------------------------

### Building SceneJS Binaries with Grunt (CLI)

Source: https://github.com/xeolabs/scenejs/blob/master/README.markdown

This command builds the snapshot binaries for SceneJS using the Grunt task runner. It requires Grunt to be installed and configured. The generated binaries are placed in the `api/latest` directory and are utilized by the project's examples.

```Shell
grunt snapshot
```

--------------------------------

### Initializing SceneJS GUI for Light Control

Source: https://github.com/xeolabs/scenejs/blob/master/examples/lighting_spot_world.html

This snippet initializes the SceneJS GUI, linking it to the created scene and specifically enabling control over the 'myLights' node. This allows for interactive manipulation of the light properties at runtime.

```JavaScript
new SceneJS.GUI(scene, ["myLights"]);
```

--------------------------------

### Creating a SceneJS Heightmap Scene

Source: https://github.com/xeolabs/scenejs/blob/master/examples/geometry_heightmap_texture.html

Initializes a SceneJS scene with a mouse-controlled orbit camera and a textured heightmap geometry. It defines material properties, applies a texture, and configures the heightmap's dimensions and segmentation. This snippet demonstrates a complete SceneJS scene graph setup.

```JavaScript
SceneJS.createScene({
  nodes: [
    // Mouse-controlled camera that orbits a ray-picked point
    // implemented by plugin at http://scenejs.org/api/latest/plugins/node/cameras/orbitPick.js
    {
      type: "cameras/pickFlyOrbit",
      yaw: 40,
      pitch: -40,
      maxPitch: -10,
      minPitch: -80,
      zoom: 1800,
      eye: { x: 0, y: 150, z: -1000 },
      look: { x: 0, y: 150, z: 0 },
      zoomSensitivity: 20.0,
      showCursor: true,
      cursorSize: 10.0,
      nodes: [
        // Reddish material
        {
          type: "material",
          color: { r: 0.45, g: 0.3, b: 0.2 },
          specular: 0,
          nodes: [
            // The color map
            {
              type: "texture",
              src: "textures/superman.jpg",
              applyTo: "color", // Apply to material "color" property (default)
              nodes: [
                // Heightmap, implemented by plugin at
                // http://scenejs.org/api/latest/plugins/node/geometry/heightmap.js
                {
                  type: "geometry/heightmap",
                  // Texture image src: 'textures/heightMap.jpg',
                  src: "textures/heightMap.jpg",
                  wire: false, // Wireframe or solid - default is false
                  xSize: 1000,
                  zSize: 1000,
                  ySize: 120,
                  xSegments: 100,
                  zSegments: 100
                }
              ]
            }
          ]
        }
      ]
    }
  ]
});
```

--------------------------------

### Extracting URL Parameters in JavaScript (gup function)

Source: https://github.com/xeolabs/scenejs/blob/master/examples.html

This JavaScript utility function, 'gup' (Get URL Parameter), extracts the value of a specified query string parameter from the current URL. It uses regular expressions to parse the 'window.location.href' and returns the parameter's value or 'null' if not found.

```JavaScript
function gup(name) { name = name.replace(/[\\[]/, "\\\\\[").replace(/[\\]]/, "\\\\\]"); var regexS = "[\\\\?&]" + name + "=([^&#]*)"; var regex = new RegExp(regexS); var results = regex.exec(window.location.href); if (results == null) return null; else return results[1]; }
```

--------------------------------

### Initializing SceneJS and Creating Physics Scene

Source: https://github.com/xeolabs/scenejs/blob/master/examples/physics_materials.html

This snippet configures the SceneJS plugin path and defines the main scene graph. It sets up an orbit camera and four distinct physics material nodes, each encapsulating a call to 'makeSimulation' to create separate physics environments with varying material properties.

```JavaScript
// Basic demonstration of the "physics/body" and "physics/system" nodes
// within the SceneJS rigid-body physics system.
//
// In this demo, we're using the scene's default physics system to simulate
// a bunch of spheres falling and bouncing on a ground plane.
//
// Documentation on the physics system here: https://github.com/xeolabs/scenejs/wiki/Physics
//
// Point SceneJS to the bundled plugins
SceneJS.setConfigs({
    pluginPath: "../api/latest/plugins"
});

// Create scene
var scene = SceneJS.createScene({
    nodes: [
        // Mouse-orbited camera, implemented by plugin at
        // http://scenejs.org/api/latest/plugins/node/cameras/orbit.js
        {
            type: "cameras/orbit",
            yaw: 30,
            pitch: -30,
            zoom: 200,
            zoomSensitivity: 10.0,
            nodes: [
                {
                    type: "physics/material",
                    restitution: 2.0,
                    friction: 0.5,
                    nodes: [
                        makeSimulation(-50, -50, 50, "mySystem1")
                    ]
                },
                {
                    type: "physics/material",
                    restitution: 0.9,
                    friction: 0.4,
                    nodes: [
                        makeSimulation(+50, -50, 50, "mySystem2")
                    ]
                },
                {
                    type: "physics/material",
                    restitution: 0.5,
                    friction: 0.1,
                    nodes: [
                        makeSimulation(+50, +50, 50, "mySystem3")
                    ]
                },
                {
                    type: "physics/material",
                    restitution: 0.001,
                    friction: 1.0,
                    nodes: [
                        makeSimulation(-50, +50, 50, "mySystem4")
                    ]
                }
            ]
        }
    ]
});
```

--------------------------------

### Creating SceneJS Scene with Tank Model (JavaScript)

Source: https://github.com/xeolabs/scenejs/blob/master/examples/models_vehicles_tank.html

This code initializes a SceneJS scene, defining its structure with a 'modelView' environment plugin and a 'tank' model plugin. The 'modelView' environment provides a standard viewing setup, and the 'tank' plugin loads the 3D tank model, scaled to 0.3, into the scene.

```JavaScript
SceneJS.createScene({
    nodes: [
        // Model-viewing environment, implemented by plugin at:
        // http://scenejs.org/api/latest/plugins/node/environments/modelView.js
        {
            type: "environments/modelView",
            scale: 0.3,
            nodes: [
                // Tank,implemented by plugin at:
                // http://scenejs.org/api/latest/plugins/node/models/vehicles/tank.js
                {
                    type: "models/vehicles/tank"
                }
            ]
        }
    ]
});
```

--------------------------------

### Initializing SceneJS with Orbit Camera and LOD Objects - JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/optimization_discreteLOD.html

This snippet configures the SceneJS plugin path and initializes the main scene. It sets up an orbit camera for interactive navigation and includes a container for a large number of detail-culled objects, demonstrating the basic scene structure and integration of the LOD system.

```JavaScript
SceneJS.setConfigs({ pluginPath: "../api/latest/plugins" });

var scene = SceneJS.createScene({
    nodes: [
        // Mouse-orbited camera, implemented by plugin at
        // http://scenejs.org/api/latest/plugins/node/cameras/orbit.js
        {
            type: "cameras/orbit",
            yaw: 30,
            pitch: -30,
            zoom: 300,
            zoomSensitivity: 20.0,
            nodes: [
                // Don't need backfaces
                {
                    type: "flags",
                    flags: { backfaces: false },
                    // A cloud of detail-culled objects
                    nodes: makeBodies(600)
                }
            ]
        }
    ]
});
```

--------------------------------

### Styling Body for Transparent SceneJS Canvas (CSS)

Source: https://github.com/xeolabs/scenejs/blob/master/examples/canvas_transparent.html

This CSS snippet styles the `body` element to remove default margins, disable user selection, and apply a full-cover background image. This setup is crucial for demonstrating a transparent SceneJS canvas layered over a background, avoiding GPU rendering for the background.

```CSS
body { margin: 0; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; background-image: url(textures/cloudsBackground.jpg); background-size: cover; background-repeat: no-repeat; }
```

--------------------------------

### Initializing Page Setup with jQuery Ready - JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/index.html

This snippet uses jQuery's `ready` function to ensure that the DOM is fully loaded before executing a series of setup functions. It calls `addFeatures` to dynamically load and display features, `addPrettify` to format code blocks, and `addSlider` to initialize a content slider.

```JavaScript
jQuery(document).ready( function ($) {
    addFeatures();
    addPrettify();
    addSlider();
});
```

--------------------------------

### Initializing SceneJS and Creating Scene Graph - JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/scenegraph_flags_enabled.html

Configures SceneJS to load plugins from a specified path and creates a 3D scene graph. The scene includes an orbit camera and a 'flags' node wrapping a material and a teapot geometry, initially set to be enabled, demonstrating a basic SceneJS setup.

```JavaScript
SceneJS.setConfigs({ pluginPath:"../api/latest/plugins" });
var scene = SceneJS.createScene({ nodes:[
    { type:"cameras/orbit", yaw:30, pitch:-30, zoom:10, zoomSensitivity:5, nodes:[
        { type:"flags", id:"myFlags", flags:{ enabled:true }, nodes:[
            { type:"material", color:{ r:0.5, g:0.5, b:0.6 }, nodes:[
                { type:"geometry/teapot" }
            ] }
        ] }
    ] }
] });
```

--------------------------------

### Initializing SceneJS with Pick-Fly-Orbit Camera and Heightmap Geometry - JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/cameras_pickFlyOrbit_terrain.html

This snippet initializes a SceneJS scene, configuring the plugin path and setting up a `cameras/pickFlyOrbit` node for interactive camera control. It includes a `geometry/heightmap` node to render a textured terrain and a `skybox/clouds` node for background, demonstrating how to combine various SceneJS plugins to build a 3D scene.

```JavaScript
// Demo of the "geometry/heightmap" custom node type, with an "shader/fog" node thrown in for fun.
// Point SceneJS to the bundled plugins
SceneJS.setConfigs({
    pluginPath: "../api/latest/plugins"
});

// Create a scene
var scene = SceneJS.createScene({
    nodes: [
        // Mouse-controlled camera that orbits a ray-picked point
        // implemented by plugin at http://scenejs.org/api/latest/plugins/node/cameras/orbitPick.js
        {
            type: "cameras/pickFlyOrbit",
            yaw: -40,
            pitch: -20,
            maxPitch: -10,
            minPitch: -80,
            zoom: 800,
            eye: { x: 0, y: 150, z: -1000 },
            look: { x: 0, y: 150, z: 0 },
            zoomSensitivity: 20.0,
            showCursor: true,
            cursorSize: 6.0,
            nodes: [
                // Reddish material
                {
                    type: "material",
                    color: { r: 0.45, g: 0.3, b: 0.2 },
                    specular: 0,
                    nodes: [
                        // Heightmap, implemented by plugin at
                        // http://scenejs.org/api/latest/plugins/node/geometry/heightmap.js
                        {
                            type: "geometry/heightmap",
                            // Texture image
                            src: 'textures/heightMap.jpg',
                            // Wireframe or solid - default is false
                            wire: false,
                            // Dimensions
                            xSize: 5000,
                            zSize: 5000,
                            ySize: 400,
                            // Segments on X and Z axis
                            xSegments: 100,
                            zSegments: 100
                        },
                        // Skybox node, implemented by plugin at
                        // http://scenejs.org/api/latest/plugins/node/skybox/grimmNight.js
                        {
                            type: "skybox/clouds"
                        }
                    ]
                }
            ]
        }
    ]
});
```

--------------------------------

### Configuring SceneJS Plugin Path

Source: https://github.com/xeolabs/scenejs/blob/master/examples/lighting_spot_world.html

This snippet sets the configuration for SceneJS, specifically pointing to the directory where plugins are located. This is a prerequisite for using SceneJS plugins like the orbit camera.

```JavaScript
SceneJS.setConfigs({ pluginPath:"../api/latest/plugins" });
```

--------------------------------

### Initializing SceneJS and Creating a Scene with Orbit Camera and Random Objects

Source: https://github.com/xeolabs/scenejs/blob/master/examples/benchmarks_400000boxes.html

This JavaScript code initializes SceneJS by setting the plugin path and then creates a 3D scene. The scene includes an orbit camera for navigation and a large number of randomly scattered objects (400,000) for performance benchmarking.

```javascript
SceneJS.setConfigs({
    pluginPath: "../api/latest/plugins"
});

var scene = SceneJS.createScene({
    nodes: [
        {
            type:"cameras/orbit",
            yaw:30,
            pitch:-30,
            zoom:800,
            zoomSensitivity:10.0,
            spin: 0.1,
            nodes: [
                {
                    type: "geometry/randomObjects",
                    numObjects: 400000
                }
            ]
        }
    ]
});
```

--------------------------------

### Initializing Touch Start for Drag Detection in JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/picking_rayPicking_morphTargets.html

This snippet attaches a 'touchstart' event listener to the canvas. It records the initial client X and Y coordinates of the first touch point and sets a 'dragging' flag to true. This setup is crucial for subsequently determining if a touch gesture was a tap (minimal movement) or a drag.

```JavaScript
canvas.addEventListener('touchstart', function touchStart(event) { lastX = event.targetTouches[0].clientX; lastY = event.targetTouches[0].clientY; dragging = true; }, true);
```

--------------------------------

### Styling Basic HTML Elements and Info Box with CSS

Source: https://github.com/xeolabs/scenejs/blob/master/examples/cameras_path.html

This CSS snippet defines basic styles for the `body` and `a` (anchor) elements, including background, margins, text color, font, and user-select properties. It also styles an `#info` div for displaying information, setting its position, dimensions, colors, font, and opacity.

```CSS
body { background: white; margin: 0; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; } a { color: #ffffff; padding-top: 20px; font-family: Helvetica; font-size: 16px; } #info { position: absolute; top: 50px; left: 100px; width: auto; color: #ffffff; padding: 10px; padding-top: 20px; font-family: Helvetica; font-size: 16px; text-align: left; background: black; opacity: 0.6; z-index: 100000; }
```

--------------------------------

### Initializing SceneJS and Creating Benchmark Scene - JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/benchmarks_40000boxes.html

This snippet initializes SceneJS by setting the plugin path, then creates a 3D scene with an orbit camera and 40,000 randomly scattered objects using SceneJS plugins. It also sets up a Stats.js panel to display real-time performance metrics, updating the stats on every scene tick. This demonstrates how to set up a large-scale benchmark scene and monitor its rendering performance.

```javascript
SceneJS.setConfigs({ pluginPath: "../api/latest/plugins" });

var scene = SceneJS.createScene({
    nodes: [
        {
            type:"cameras/orbit",
            yaw:30,
            pitch:-30,
            zoom:800,
            zoomSensitivity:10.0,
            spin: 0.1,
            nodes: [
                {
                    type: "geometry/randomObjects",
                    numObjects: 40000
                }
            ]
        }
    ]
});

var container = document.createElement('div');
document.body.appendChild(container);
var stats = new Stats();
stats.domElement.style.position = 'absolute';
stats.domElement.style.top = '0px';
container.appendChild(stats.domElement);

scene.on("tick", function () {
    stats.update();
});
```

--------------------------------

### Initializing SceneJS with Bump Mapping - JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/texture_bump.html

Configures SceneJS to point to its bundled plugins and then creates a 3D scene. The scene includes an orbiting camera, custom ambient and directional lights optimized for bump mapping, and a texture node applying a normal map to a box geometry, demonstrating a complete 3D rendering setup.

```JavaScript
// Point SceneJS to the bundled plugins
SceneJS.setConfigs({ pluginPath: "../api/latest/plugins" });

// Create scene
SceneJS.createScene({
  nodes: [ // Orbiting camera node, implemented by plugin at // http://scenejs.org/api/latest/plugins/node/cameras/orbit.js
    {
      type: "cameras/orbit",
      yaw: 30,
      pitch: -30,
      zoom: 5,
      zoomSensitivity: 1.0,
      nodes: [ // Override SceneJS' default lights for optimal bump map effect
        {
          // type: "lights",
          lights: [
            {
              mode: "ambient",
              color: { r: 0.7, g: 0.7, b: 0.8 },
              diffuse: true,
              specular: false
            },
            {
              mode: "dir",
              color: { r: 1.0, g: 1.0, b: 1.0 },
              diffuse: true,
              specular: true,
              dir: { x: -0.4, y: 0.0, z: 0.5 },
              space: "world"
            }
          ],
          nodes: [ // The normal map
            {
              type: "texture",
              src: "textures/normalMap.png",
              wrapS: "repeat",
              wrapT: "repeat",
              applyTo: "normals", // Apply to geometry normal vectors
              nodes: [ // Box primitive implemented by plugin at // http://scenejs.org/api/latest/plugins/node/geometry/box.js
                {
                  type: "geometry/box"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
});
```

--------------------------------

### Querying SceneJS Loading Status in JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/scenegraph_status.html

This JavaScript code initializes a SceneJS scene, configures plugin paths, and creates a scene graph with an orbited camera and an Earth model. It then periodically queries the scene's loading status using `scene.getStatus()` and updates a display element with the number of active loading tasks.

```JavaScript
// Demonstrates how to query a scene for progress on loading content.
// In this case, loaded content consists of various plugins for custom node types, along with textures
// for a procedurally-generated city.

// Point SceneJS to the bundled plugins
SceneJS.setConfigs({
    pluginPath: "../api/latest/plugins"
});

// Create a scene with a rotating planet Earth
var scene = SceneJS.createScene({
    nodes: [
        // Mouse-orbited camera, implemented by plugin at
        // http://scenejs.org/api/latest/plugins/node/cameras/orbit.js
        {
            type: "cameras/orbit",
            yaw: -100,
            pitch: -10,
            zoom: 6,
            zoomSensitivity: 1.0,
            nodes: [
                {
                    type: "lights",
                    lights: [
                        {
                            mode: "dir",
                            color: { r: 1.0, g: 1.0, b: 1.0 },
                            diffuse: true,
                            specular: true,
                            dir: { x: 0.5, y: 0.0, z: -0.5 },
                            space: "view"
                        }
                    ],
                    nodes: [
                        // Planet Earth, implemented by plugin at
                        // http://scenejs.org/api/latest/plugins/node/models/space/planets/earth.js
                        {
                            type: "models/space/planets/earth"
                        }
                    ]
                }
            ]
        }
    ]
});

// Periodically query and log scene loading status to console
var info = document.getElementById("infoTxt");
var numTasks = 0;

setInterval(function () {
    var status = scene.getStatus();
    if (!status) {
        info.innerHTML = "Scene status: not found";
        return;
    }
    if (status.destroyed) {
        info.innerHTML = "Scene status: destroyed";
        return;
    }
    if (status.numTasks != numTasks) {
        info.innerHTML = "Scene status: loads in progress: " + status.numTasks;
        numTasks = status.numTasks;
    }
}, 100);
```

--------------------------------

### Creating SceneJS Scene with Orbit Camera and Teapot - JavaScript

Source: https://github.com/xeolabs/scenejs/blob/master/examples/transforms_projection_default.html

This JavaScript code creates a SceneJS 3D scene. It defines an orbiting camera with specific yaw, pitch, and zoom settings, and nests a default perspective camera within it. The scene then renders a teapot geometry, demonstrating a basic 3D setup using SceneJS plugins.

```JavaScript
SceneJS.createScene({
    nodes:[
        // Orbiting camera node, implemented by plugin at
        // http://scenejs.org/api/latest/plugins/node/cameras/orbit.js
        {
            type:"cameras/orbit",
            yaw:30,
            pitch:-30,
            zoom:15,
            zoomSensitivity:1.0,
            nodes:[
                // The camera node in this scene has the same properties
                // as the one that SceneJS provides by default, and is defined
                // here to show what those are.
                {
                    type:"camera",
                    optics:{
                        type:"perspective",
                        fovy:45.0,
                        aspect:1.0,
                        near:0.1,
                        far:5000.0
                    },
                    nodes:[
                        // Teapot primitive, implemented by plugin at
                        // http://scenejs.org/api/latest/plugins/node/geometry/teapot.js
                        {
                            type:"geometry/teapot"
                        }
                    ]
                }
            ]
        }
    ]
});
```

--------------------------------

### Importing 3DS Model and Setting Up Scene in SceneJS

Source: https://github.com/xeolabs/scenejs/blob/master/examples/importing_3ds_comet.html

This snippet initializes SceneJS, configures the plugin path, and creates a scene graph. It sets up an orbit camera, defines custom point and ambient lights, applies a material, and imports a 3DS model ('osiris.3ds') using the 'import/3ds' plugin, with automatic normal computation. The 'import/3ds' node internally uses the K3D library for parsing.

```JavaScript
// Using the "import/3ds" node to import a mesh from .3ds format
// Internally, the node uses the K3D library for parsing - http://k3d.ivank.net/

// Point SceneJS to the bundled plugins
SceneJS.setConfigs({
    pluginPath: "../api/latest/plugins"
});

// Create a scene
SceneJS.createScene({
    nodes: [
        // Mouse-orbited camera,implemented by plugin at
        // http://scenejs.org/api/latest/plugins/node/cameras/orbit.js
        {
            type: "cameras/orbit",
            yaw: 0,
            pitch: 20,
            zoom: 3,
            zoomSensitivity: 1.0,
            spinYaw: 0.3,
            spinPitch: -0.1,
            nodes: [
                // Override default lights
                {
                    type: "lights",
                    lights: [
                        {
                            mode: "point",
                            color: { r: 1.0, g: 1.0, b: 1.0 },
                            diffuse: true,
                            pos: { x: 1.0, y: -0.0, z: -0.8 },
                            space: "view"
                        },
                        {
                            mode: "ambient",
                            color: { r: 0.1, g: 0.1, b: 0.1 }
                        }
                    ],
                    nodes: [
                        // Matte light grey material
                        {
                            type: "material",
                            color: { r: 0.6, g: 0.6, b: 0.6 },
                            specular: 0.0,
                            nodes: [
                                // Import the .3ds mesh
                                //
                                // This node is implemented by plugin at:
                                // http://scenejs.org/api/latest/plugins/node/import/3ds.js
                                //
                                // The .3ds file is loaded from:
                                // http://scenejs.org/examples/models/3ds/osiris.3ds
                                {
                                    type: "import/3ds",
                                    src: "models/3ds/osiris.3ds",
                                    normals: "auto" // Autocompute normals
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
});
```

--------------------------------

### Initializing SceneJS and Creating a 3D Scene

Source: https://github.com/xeolabs/scenejs/blob/master/examples/effects_zspace_geometries.html

This snippet configures SceneJS to load plugins from a specified path and then creates a 3D scene. The scene includes a 'lookAt' node for camera positioning, a 'camera' node with frustum optics, and a 'rotate' node containing a 'geometry/randomObjects' plugin to render scattered boxes. It sets up the initial view and scene structure.

```JavaScript
SceneJS.setConfigs({
    pluginPath: "../api/latest/plugins"
});

var scene = SceneJS.createScene({
    webgl2: true,
    nodes: [
        {
            type: "lookAt",
            id: "theLookat",
            eye: {x: 0, y: 0, z: 10},
            look: {x: 0, y: 0, z: 0},
            up: {x: 0, y: 1, z: 0},
            nodes: [
                {
                    type: "camera",
                    id: "theCamera",
                    optics: {
                        type: "frustumAngles",
                        left:20,
                        down:20,
                        near:0.1,
                        right:20,
                        up:20,
                        far:10000
                    },
                    nodes: [
                        {
                            type: "rotate",
                            id: "theRotate",
                            x: 0,
                            y: -1,
                            z: 0, // Axis of rotation
                            angle: 90.0,
                            nodes: [
                                // Randomly scattered boxes, implemented by plugin at
                                // http://scenejs.org/api/latest/plugins/node/geometry/randomObjects.js
                                { type: "geometry/randomObjects", numObjects: 500 }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
});
var lookat = scene.getNode("theLookat");
var camera = scene.getNode("theCamera");
var rotate = scene.getNode("theRotate");
```

--------------------------------

### Configuring SceneJS Scene with Path Camera, Lights, and Environment

Source: https://github.com/xeolabs/scenejs/blob/master/examples/cameras_path.html

This JavaScript code initializes SceneJS by setting the plugin path and then creates a complex 3D scene. It defines a `path` camera with multiple keyframes for animation, configures ambient and directional lights, adds a `clouds` skybox, and applies a `fog` effect. The scene also includes a grid ground, a solid green surface, and a reflective city model, all utilizing various SceneJS plugins.

```JavaScript
SceneJS.setConfigs({
    pluginPath: "../api/latest/plugins"
});
var scene = SceneJS.createScene({
    nodes: [
        // Path camera, implemented by plugin at
        // http://scenejs.org/api/latest/plugins/node/cameras/path.js
        {
            type: "cameras/path",
            id: "myPathCamera",
            path: [
                {
                    time: 0,
                    eye: { x: 0, y: 60, z: -2000 },
                    look: { x: 0, y: 0, z: 0 },
                    up: { x: 0, y: 1, z: 0 }
                },
                {
                    time: 5,
                    eye: { x: -2000, y: 60, z: 0 },
                    look: { x: 0, y: 0, z: 0 },
                    up: { x: 0, y: 1, z: 0 }
                },
                {
                    time: 10,
                    eye: { x: 0, y: 150, z: -10 },
                    look: { x: 0, y: 0, z: 0 },
                    up: { x: 0, y: 1, z: 0 }
                },
                {
                    time: 15,
                    eye: { x: 100, y: 50, z: 100 },
                    look: { x: 100, y: 0, z: 0 },
                    up: { x: 0, y: 1, z: 0 }
                }
            ],
            nodes: [
                {
                    type: "lights",
                    lights: [
                        { mode: "ambient", color: { r: 0.5, g: 0.5, b: 0.6 } },
                        { mode: "dir", color: { r: 1.0, g: 1.0, b: 1.0 }, diffuse: true, specular: true, dir: { x: 0.5, y: 0.0, z: -1.0 }, space: "view" }
                    ],
                    nodes: [
                        // Clouds skybox, implemented by plugin at
                        // http://scenejs.org/api/latest/plugins/node/skybox/clouds.js
                        { type: "skybox/clouds" },
                        // Fog effect, implemented by plugin at
                        // http://scenejs.org/api/latest/plugins/node/shader/fog.js
                        {
                            // type:"shader/fog",
                            mode: "exp2", // Quadratic
                            density: 0.1, // Fog density
                            start: 30.0, // Near starting point
                            end: 1500.0, // Far ending point
                            color: { r: 1.0, g: 1.0, b: 0.8 }, // Yellowish fog color
                            nodes: [
                                {
                                    type: "material",
                                    color: { r: 0.5, g: 1.0, b: 0.5 },
                                    emit: 0.1,
                                    nodes: [
                                        // Grid ground, implemented by plugin at
                                        // http://scenejs.org/api/latest/plugins/node/models/ground/grid.js
                                        { type: "geometry/grid", size: { x: 10000, z: 10000 }, width: 10000, height: 10000, widthSegments: 100, heightSegments: 100 }
                                    ]
                                },
                                {
                                    type: "translate",
                                    y: -3,
                                    nodes: [
                                        {
                                            type: "material",
                                            color: { r: 0.5, g: 1.0, b: 0.5 },
                                            emit: 0.01,
                                            nodes: [
                                                // Solid green surface under the grid, implemented by plugin at
                                                // http://scenejs.org/api/latest/plugins/node/models/ground/grid.js
                                                { type: "geometry/grid", size: { x: 10000, z: 10000 }, width: 10000, height: 10000, widthSegments: 10, heightSegments: 10, wire: false }
                                            ]
                                        }
                                    ]
                                },
                                // Flags to switch off backfaces
                                {
                                    type: "flags",
                                    flags: { backfaces: false },
                                    nodes: [
                                        // Reflection cube map
                                        // Images taken from: http://hristo.oskov.com/projects/cs418/mp3/
                                        { type: "reflect/clouds", intensity: 1.5, nodes: [
                                            // City, implemented by plugin at
                                            // http://scenejs.org/api/latest/plugins/node/models/buildings/city.js
                                            { type: "models/buildings/city", width: 600 }
                                        ] }
                                    ]
                                }
                            ]
                        }
                    ]
                }
            ]
        }
    ]
});
```
Tokens:
Raw