<< User Guide

Creating a Cube

This example demonstrates how to use the xeokit SDK to create and display a 3D box in the browser.
Click on the preview below to run the example. Scroll down to learn how it's made.

Click to load
Placeholder image

Creating a Cube


HTML

Listed below is the HTML for this example.


<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Creating a Cube</title>
    <style>
        body {
            background-color: white;
            overflow: hidden;
            margin: 0;
            user-select: none;
        }

        #demoCanvas {
            width: 100%;
            height: 100%;
            position: absolute;
            background: white;
            border: 0;
        }
    </style>
</head>
<body>
<canvas id="demoCanvas"></canvas>
</body>
<script type="module" src="./index.js"></script>
</html>

JavaScript

Listed below is the JavaScript for this example, which we'll break down into steps.

1. Import the SDK from a bundle built for these examples

import * as xeokit from "../../js/xeokit-demo-bundle.js";
import {DemoHelper} from "../../js/DemoHelper.js";

2. Create a Scene to hold geometry and materials

const scene = new xeokit.scene.Scene();

3. Create a WebGLRenderer to use the browser's WebGL API for 3D graphics

const renderer = new xeokit.webglrenderer.WebGLRenderer({});

4. Create a Viewer that views our Scene using the WebGLRenderer. Note that the Scene and WebGLRenderer can only be attached to one Viewer at a time.

const viewer = new xeokit.viewer.Viewer({
    id: "demoViewer",
    scene,
    renderer
});

5. Ignore the DemoHelper

const demoHelper = new DemoHelper({
    viewer
});
demoHelper.init().then(() => {

6. Create a single View that renders to a canvas in the page

    const view = viewer.createView({
        id: "demoView",
        elementId: "demoCanvas"
    });

7. Position the View's Camera to look at the origin of the coordinate system

    view.camera.eye = [2, 3, 2];
    view.camera.look = [0, 0, 0];
    view.camera.up = [0, 0, 1];

8. Add a CameraControl to the View to control its Camera with mouse and touchpad input

    new xeokit.cameracontrol.CameraControl(view);

9. Within the Scene, create a SceneModel to hold geometry and materials for our model

    const sceneModel = scene.createModel({
        id: "demoModel"
    });

10. Create a SceneGeometry that defines the shape of the box

    sceneModel.createGeometry({
        id: "boxGeometry",
        primitive: xeokit.constants.TrianglesPrimitive,

11. Define the SceneGeometry vertices - eight for our box, each one spanning three array elements for X,Y and Z

        positions: [
            1.0, 1.0, 1.0, // v0-v1-v2-v3 front
            -1.0, 1.0, 1.0,
            -1.0, -1.0, 1.0,
            1.0, -1.0, 1.0,
            1.0, 1.0, 1.0, // v0-v3-v4-v1 right
            1.0, -1.0, 1.0,
            1.0, -1.0, -1.0,
            1.0, 1.0, -1.0,
            1.0, 1.0, 1.0, // v0-v1-v6-v1 top
            1.0, 1.0, -1.0,
            -1.0, 1.0, -1.0,
            -1.0, 1.0, 1.0,
            -1.0, 1.0, 1.0,  // v1-v6-v7-v2 left
            -1.0, 1.0, -1.0,
            -1.0, -1.0, -1.0,
            -1.0, -1.0, 1.0,
            -1.0, -1.0, -1.0, // v7-v4-v3-v2 bottom
            1.0, -1.0, -1.0,
            1.0, -1.0, 1.0,
            -1.0, -1.0, 1.0,
            1.0, -1.0, -1.0,  // v4-v7-v6-v1 back
            -1.0, -1.0, -1.0,
            -1.0, 1.0, -1.0,
            1.0, 1.0, -1.0
        ],

12. Define the SceneGeometry indices - these organise the positions coordinates into geometric primitives in accordance with the TrianglesPrimitive parameter, in this case a set of three indices for each triangle. Note that each triangle is specified in counter-clockwise winding order.

        indices: [
            0, 1, 2,   // Front
            0, 2, 3,
            4, 5, 6,  // Right
            4, 6, 7,
            8, 9, 10, // Top
            8, 10, 11,
            12, 13, 14,   // Left
            12, 14, 15,
            16, 17, 18,  // Bottom
            16, 18, 19,
            20, 21, 22,// Back
            20, 22, 23
        ]
    });

13. Create a red SceneMesh that instances our SceneGeometry

    sceneModel.createMesh({
        id: "boxMesh",
        geometryId: "boxGeometry",
        position: [0, 0, 0], // Default
        scale: [1, 1, 1], // Default
        rotation: [0, 0, 0], // Default
        color: [1.0, 0.0, 0.0] // Default is [1,1,1]
    });

14. Create a SceneObject that aggregates our SceneMesh

    sceneModel.createObject({
        id: "boxObject",
        meshIds: ["boxMesh"]
    });

15. Build the SceneModel, causing the red box to appear in the View's canvas.

    sceneModel.build().then(() => {

16. At this point, the View will contain a single ViewObject that has the same ID as the SceneObject. Through the ViewObject, we can now update the appearance of the box in that View.

        view.objects["boxObject"].highlighted = true;
        view.setObjectsHighlighted(view.highlightedObjectIds, false);

17. Ignore the DemoHelper

        demoHelper.finished();
    }).catch(reason => {
        console.error(reason);
        demoHelper.finished();
    });
});