examples/boundaries_model_aabb.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>xeogl Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

    <script src="../build/xeogl.js"></script>
    <script src="js/models/glTFModel.js"></script>
    <script src="js/models/STLModel.js"></script>
    <script src="js/helpers/aabbHelper.js"></script>

    <link href="css/styles.css" rel="stylesheet"/>

<body>

<div id="info">
    <h1>using an <a href="../docs/classes/AABBGeometry.html" target="_parent">AABBGeometry</a> to show the boundary of
        a <a href="../docs/classes/GLTFModel.html" target="_parent">GLTFModel</a></h1>
    <br>
    <pre id="log">
    </pre>
</div>

<script>

    var models = new xeogl.Group({

        rotation: [0, 0, 0],
        position: [0, 0, 0],
        scale: [1, 1, 1],

        children: [

            new xeogl.GLTFModel({
                id: "engine",
                src: "models/gltf/2CylinderEngine/glTF/2CylinderEngine.gltf",
                scale: [.2, .2, .2],
                position: [-110, 0, 0],
                rotation: [0, 90, 0],
                objectTree: true
            }),

            new xeogl.GLTFModel({
                id: "hoverBike",
                src: "models/gltf/hover_bike/scene.gltf",
                scale: [.5, .5, .5],
                position: [0, -40, 0]
            }),

            new xeogl.STLModel({
                id: "f1Car",
                src: "models/stl/binary/F1Concept.stl",
                smoothNormals: true,
                scale: [3, 3, 3],
                position: [110, -20, 60],
                rotation: [0, 90, 0]
            })
        ]
    });

    new xeogl.CameraControl();

    var scene = models.scene;
    var camera = scene.camera;

    camera.eye = [-4.13, 137.33, 344.18];
    camera.look = [0, -7.69, 2.47];
    camera.up = [0, 0.92, -0.38];

    var engine = scene.models["engine"];

    scene.on("tick", function () {
        models.rotateY(.5); // Spin the whole group
        engine.rotateZ(.5); // Spin one of the models
    });

    // Show AABB around engine model
    new xeogl.Mesh({
        geometry: new xeogl.AABBGeometry({
            target: scene.components["engine"]
        }),
        material: new xeogl.PhongMaterial({
            diffuse: [0.5, 1.0, 0.5],
            emissive: [0.5, 1.0, 0.5],
            lineWidth: 2
        }),
        collidable: false
    });


</script>
</body>
</html>