Scene Graphs

WIP

Basic Scene Graph

Run this example

//------------------------------------------------------------------------------------------------------------------
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------

import {Viewer} from "../src/viewer/Viewer.js";
import {Mesh} from "../src/scene/mesh/Mesh.js";
import {Node} from "../src/scene/nodes/Node.js";
import {PhongMaterial} from "../src/scene/materials/PhongMaterial.js";

//------------------------------------------------------------------------------------------------------------------
// Create a Viewer and arrange the camera
//------------------------------------------------------------------------------------------------------------------

const viewer = new Viewer({
    canvasId: "myCanvas"
});

viewer.camera.eye = [-21.80, 4.01, 6.56];
viewer.camera.look = [0, -5.75, 0];
viewer.camera.up = [0.37, 0.91, -0.11];

//------------------------------------------------------------------------------------------------------------------
// Build a simple scene graph representing a table with four legs
//------------------------------------------------------------------------------------------------------------------

new Node(viewer.scene, {
    objectId: "table", // <---------- Node with "objectId" represents a 3D object
    rotation: [0, 50, 0],
    position: [0, 0, 0],
    scale: [1, 1, 1],

    children: [

        new Mesh(viewer.scene, { // Red table leg
            objectId: "redLeg",
            position: [-4, -6, -4],
            scale: [1, 3, 1],
            rotation: [0, 0, 0],
            material: new PhongMaterial(viewer.scene, {
                diffuse: [1, 0.3, 0.3]
            })
        }),

        new Mesh(viewer.scene, { // Green table leg
            objectId: "greenLeg",
            position: [4, -6, -4],
            scale: [1, 3, 1],
            rotation: [0, 0, 0],
            material: new PhongMaterial(viewer.scene, {
                diffuse: [0.3, 1.0, 0.3]
            })
        }),

        new Mesh(viewer.scene, {// Blue table leg
            objectId: "blueLeg",
            position: [4, -6, 4],
            scale: [1, 3, 1],
            rotation: [0, 0, 0],
            material: new PhongMaterial(viewer.scene, {
                diffuse: [0.3, 0.3, 1.0]
            })
        }),

        new Mesh(viewer.scene, {  // Yellow table leg
            objectId: "yellowLeg",
            position: [-4, -6, 4],
            scale: [1, 3, 1],
            rotation: [0, 0, 0],
            material: new PhongMaterial(viewer.scene, {
                diffuse: [1.0, 1.0, 0.0]
            })
        }),

        new Mesh(viewer.scene, { // Purple table top
            objectId: "tableTop",
            position: [0, -3, 0],
            scale: [6, 0.5, 6],
            rotation: [0, 0, 0],
            material: new PhongMaterial(viewer.scene, {
                diffuse: [1.0, 0.3, 1.0]
            })
        })
    ]
});

//------------------------------------------------------------------------------------------------------------------
// Find scene graph nodes by their object IDs
//------------------------------------------------------------------------------------------------------------------

var table = viewer.scene.objects["table"];
var redLeg = viewer.scene.objects["redLeg"];
var greenLeg = viewer.scene.objects["greenLeg"];
var blueLeg = viewer.scene.objects["blueLeg"];

//------------------------------------------------------------------------------------------------------------------
// Periodically update transforms on our scene nodes
//------------------------------------------------------------------------------------------------------------------

viewer.scene.on("tick", function () {

    // Rotate legs
    redLeg.rotateY(0.5);
    greenLeg.rotateY(0.5);
    blueLeg.rotateY(0.5);

    // Rotate table
    table.rotateY(0.5);
    table.rotateX(0.3);
});

Scene Graph Containing Models

//------------------------------------------------------------------------------------------------------------------
// Import the modules we need for this example
//------------------------------------------------------------------------------------------------------------------

import {Viewer} from "../src/viewer/Viewer.js";
import {Node} from "../src/scene/nodes/Node.js";
import {OBJLoaderPlugin} from "../src/viewer/plugins/OBJLoaderPlugin/OBJLoaderPlugin.js";
import {GLTFLoaderPlugin} from "../src/viewer/plugins/GLTFLoaderPlugin/GLTFLoaderPlugin.js";

//------------------------------------------------------------------------------------------------------------------
// Create a Viewer and arrange the camera
//------------------------------------------------------------------------------------------------------------------

const viewer = new Viewer({
    canvasId: "myCanvas"
});

viewer.camera.eye = [-3.44, -0.14, 1.51];
viewer.camera.look = [-2.23, -0.12, -0.47];
viewer.camera.up = [-0.00, 0.98, 0.00];

//------------------------------------------------------------------------------------------------------------------
// Build a scene graph containing a bunch of models
//------------------------------------------------------------------------------------------------------------------

const objLoader = new OBJLoaderPlugin(viewer);
const gltfLoader = new GLTFLoaderPlugin(viewer);

new Node(viewer.scene, {

    scale: [.5, .5, .5], // Scale the whole scene down a bit

    children: [

        objLoader.load({ // Returns a Node
            modelId: "myModel",     // <---------- Registers Node on Viewer#scene#models
            src: "./models/obj/sportsCar/sportsCar.obj",
            position: [-5, -1, 0],
        }),

        gltfLoader.load({ // Returns a Node
            modelId: "myModel2",    // <---------- Registers Node on Viewer#scene#models
            src: "./models/gltf/schependomlaan/scene.gltf",
            rotation: [0, 50, 0],
            edges: true
        })
    ]
});