<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>/home/lindsay/xeolabs/xeogl-next/xeogl/examples/js/models/testModel.js</title>
    <link rel="stylesheet" href="http://yui.yahooapis.com/3.9.1/build/cssgrids/cssgrids-min.css">
    <link href='https://fonts.googleapis.com/css?family=Exo+2:400,800,900,700,600,500|Roboto:100,300,400,500,700,900'  rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="../assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="../assets/css/main.css" id="site_styles">
    <link rel="icon" href="../assets/favicon.ico">
    <script src="http://yui.yahooapis.com/combo?3.9.1/build/yui/yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">

                <h1 class="projectTitle"><a href="../../">xeogl</a> / <a href="../../docs">API Docs</a></h1>

        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: </em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">

    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="../classes/AABBGeometry.html">AABBGeometry</a></li>
            
                <li><a href="../classes/AABBHelper.html">AABBHelper</a></li>
            
                <li><a href="../classes/AmbientLight.html">AmbientLight</a></li>
            
                <li><a href="../classes/Annotation.html">Annotation</a></li>
            
                <li><a href="../classes/AnnotationStory.html">AnnotationStory</a></li>
            
                <li><a href="../classes/AxisHelper.html">AxisHelper</a></li>
            
                <li><a href="../classes/BIMServerModel.html">BIMServerModel</a></li>
            
                <li><a href="../classes/BoxGeometry.html">BoxGeometry</a></li>
            
                <li><a href="../classes/BuildableModel.html">BuildableModel</a></li>
            
                <li><a href="../classes/Button.html">Button</a></li>
            
                <li><a href="../classes/Camera.html">Camera</a></li>
            
                <li><a href="../classes/CameraControl.html">CameraControl</a></li>
            
                <li><a href="../classes/CameraFlightAnimation.html">CameraFlightAnimation</a></li>
            
                <li><a href="../classes/CameraFollowAnimation.html">CameraFollowAnimation</a></li>
            
                <li><a href="../classes/CameraPath.html">CameraPath</a></li>
            
                <li><a href="../classes/CameraPathAnimation.html">CameraPathAnimation</a></li>
            
                <li><a href="../classes/Canvas.html">Canvas</a></li>
            
                <li><a href="../classes/Clip.html">Clip</a></li>
            
                <li><a href="../classes/ClipControl.html">ClipControl</a></li>
            
                <li><a href="../classes/ClipHelper.html">ClipHelper</a></li>
            
                <li><a href="../classes/Component.html">Component</a></li>
            
                <li><a href="../classes/CubeTexture.html">CubeTexture</a></li>
            
                <li><a href="../classes/CubicBezierCurve.html">CubicBezierCurve</a></li>
            
                <li><a href="../classes/Curve.html">Curve</a></li>
            
                <li><a href="../classes/CustomProjection.html">CustomProjection</a></li>
            
                <li><a href="../classes/CylinderGeometry.html">CylinderGeometry</a></li>
            
                <li><a href="../classes/DirLight.html">DirLight</a></li>
            
                <li><a href="../classes/EdgeMaterial.html">EdgeMaterial</a></li>
            
                <li><a href="../classes/EmphasisMaterial.html">EmphasisMaterial</a></li>
            
                <li><a href="../classes/Fresnel.html">Fresnel</a></li>
            
                <li><a href="../classes/Frustum.html">Frustum</a></li>
            
                <li><a href="../classes/Geometry.html">Geometry</a></li>
            
                <li><a href="../classes/GeometryBuilder.html">GeometryBuilder</a></li>
            
                <li><a href="../classes/GLTFModel.html">GLTFModel</a></li>
            
                <li><a href="../classes/Group.html">Group</a></li>
            
                <li><a href="../classes/Input.html">Input</a></li>
            
                <li><a href="../classes/LambertMaterial.html">LambertMaterial</a></li>
            
                <li><a href="../classes/LightMap.html">LightMap</a></li>
            
                <li><a href="../classes/Material.html">Material</a></li>
            
                <li><a href="../classes/Mesh.html">Mesh</a></li>
            
                <li><a href="../classes/MetallicMaterial.html">MetallicMaterial</a></li>
            
                <li><a href="../classes/Model.html">Model</a></li>
            
                <li><a href="../classes/OBBGeometry.html">OBBGeometry</a></li>
            
                <li><a href="../classes/Object.html">Object</a></li>
            
                <li><a href="../classes/OBJModel.html">OBJModel</a></li>
            
                <li><a href="../classes/Ortho.html">Ortho</a></li>
            
                <li><a href="../classes/OutlineMaterial.html">OutlineMaterial</a></li>
            
                <li><a href="../classes/Path.html">Path</a></li>
            
                <li><a href="../classes/PathGeometry.html">PathGeometry</a></li>
            
                <li><a href="../classes/Perspective.html">Perspective</a></li>
            
                <li><a href="../classes/PhongMaterial.html">PhongMaterial</a></li>
            
                <li><a href="../classes/Pin.html">Pin</a></li>
            
                <li><a href="../classes/PlaneGeometry.html">PlaneGeometry</a></li>
            
                <li><a href="../classes/PlaneHelper.html">PlaneHelper</a></li>
            
                <li><a href="../classes/PointLight.html">PointLight</a></li>
            
                <li><a href="../classes/QuadraticBezierCurve.html">QuadraticBezierCurve</a></li>
            
                <li><a href="../classes/ReflectionMap.html">ReflectionMap</a></li>
            
                <li><a href="../classes/Scene.html">Scene</a></li>
            
                <li><a href="../classes/SceneJSModel.html">SceneJSModel</a></li>
            
                <li><a href="../classes/Shadow.html">Shadow</a></li>
            
                <li><a href="../classes/Skybox.html">Skybox</a></li>
            
                <li><a href="../classes/SpecularMaterial.html">SpecularMaterial</a></li>
            
                <li><a href="../classes/SphereGeometry.html">SphereGeometry</a></li>
            
                <li><a href="../classes/Spinner.html">Spinner</a></li>
            
                <li><a href="../classes/SplineCurve.html">SplineCurve</a></li>
            
                <li><a href="../classes/SplineCurveHelper.html">SplineCurveHelper</a></li>
            
                <li><a href="../classes/SpotLight.html">SpotLight</a></li>
            
                <li><a href="../classes/StereoEffect.html">StereoEffect</a></li>
            
                <li><a href="../classes/STLModel.html">STLModel</a></li>
            
                <li><a href="../classes/Story.html">Story</a></li>
            
                <li><a href="../classes/TeapotGeometry.html">TeapotGeometry</a></li>
            
                <li><a href="../classes/TestModel.html">TestModel</a></li>
            
                <li><a href="../classes/Texture.html">Texture</a></li>
            
                <li><a href="../classes/TorusGeometry.html">TorusGeometry</a></li>
            
                <li><a href="../classes/VectorTextGeometry.html">VectorTextGeometry</a></li>
            
                <li><a href="../classes/Viewport.html">Viewport</a></li>
            
                <li><a href="../classes/xeogl.xeogl.html">xeogl.xeogl</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
                <li><a href="..//modules/animation.html">animation</a></li>
            
                <li><a href="..//modules/annotations.html">annotations</a></li>
            
                <li><a href="..//modules/camera.html">camera</a></li>
            
                <li><a href="..//modules/canvas.html">canvas</a></li>
            
                <li><a href="..//modules/clipping.html">clipping</a></li>
            
                <li><a href="..//modules/controls.html">controls</a></li>
            
                <li><a href="..//modules/curves.html">curves</a></li>
            
                <li><a href="..//modules/effects.html">effects</a></li>
            
                <li><a href="..//modules/generation.html">generation</a></li>
            
                <li><a href="..//modules/geometry.html">geometry</a></li>
            
                <li><a href="..//modules/helpers.html">helpers</a></li>
            
                <li><a href="..//modules/input.html">input</a></li>
            
                <li><a href="..//modules/lighting.html">lighting</a></li>
            
                <li><a href="..//modules/materials.html">materials</a></li>
            
                <li><a href="..//modules/math.html">math</a></li>
            
                <li><a href="..//modules/meshes.html">meshes</a></li>
            
                <li><a href="..//modules/models.html">models</a></li>
            
                <li><a href="..//modules/objects.html">objects</a></li>
            
                <li><a href="..//modules/rendering.html">rendering</a></li>
            
                <li><a href="..//modules/scene.html">scene</a></li>
            
                <li><a href="..//modules/skyboxes.html">skyboxes</a></li>
            
                <li><a href="..//modules/stories.html">stories</a></li>
            
                <li><a href="..//modules/xeogl.html">xeogl</a></li>
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <!--<div id="api-options">-->
        <!--Show:-->
        <!--<label for="api-show-inherited">-->
            <!--<input type="checkbox" id="api-show-inherited" checked>-->
            <!--Inherited-->
        <!--</label>-->

        <!--<label for="api-show-protected">-->
            <!--<input type="checkbox" id="api-show-protected">-->
            <!--Protected-->
        <!--</label>-->

        <!--<label for="api-show-private">-->
            <!--<input type="checkbox" id="api-show-private">-->
            <!--Private-->
        <!--</label>-->
        <!--<label for="api-show-deprecated">-->
            <!--<input type="checkbox" id="api-show-deprecated">-->
            <!--Deprecated-->
        <!--</label>-->

    <!--</div>-->


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
<h1 class="file-heading">File: /home/lindsay/xeolabs/xeogl-next/xeogl/examples/js/models/testModel.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
/**
 A **TestModel** is a procedurally-generated test {{#crossLink &quot;Model&quot;}}{{/crossLink}} containing {{#crossLink &quot;Mesh&quot;}}Meshes{{/crossLink}} that represent city buildings.

 &lt;a href=&quot;../../examples/#models_generation_TestModel&quot;&gt;&lt;img src=&quot;http://i.giphy.com/l0HlPJO1AN01Lz27e.gif&quot;&gt;&lt;/img&gt;&lt;/a&gt;

 ## Overview

 * Procedurally generates simple content for development and testing.
 * Allows you to develop some basic capabilities of your app without needing to load any models.

 It inherits these capabilities from its {{#crossLink &quot;Model&quot;}}{{/crossLink}} base class:

 * Allows you to access and manipulate the components within it.
 * Can be transformed within World-space by attaching it to a {{#crossLink &quot;Transform&quot;}}{{/crossLink}}.
 * Provides its dynamic World-space axis-aligned boundary.

 ## Examples

 * TODO

 ## Usage

 &#x60;&#x60;&#x60;&#x60;javascript
 var model = new xeogl.TestModel({
     id: &quot;myModel&quot;,
     size: 5000, // Width of each axis
     density: 4 // How many buildings on each axis
 });
 &#x60;&#x60;&#x60;&#x60;

 @class TestModel
 @module xeogl
 @submodule models
 @constructor
 @param [scene] {Scene} Parent {{#crossLink &quot;Scene&quot;}}Scene{{/crossLink}} - creates this TestModel in the default
 {{#crossLink &quot;Scene&quot;}}Scene{{/crossLink}} when omitted.
 @param [cfg] {*} Configs
 @param [cfg.id] {String} Optional ID, unique among all components in the parent {{#crossLink &quot;Scene&quot;}}Scene{{/crossLink}},
 generated automatically when omitted.
 @param [cfg.entityType] {String} Optional entity classification when using within a semantic data model. See the {{#crossLink &quot;Object&quot;}}{{/crossLink}} documentation for usage.
 @param [cfg.meta] {String:Object} Optional map of user-defined metadata to attach to this TestModel.
 @param [cfg.size] {Number} World-space width of each axis.
 @param [cfg.density] {Number} Number of buildings on each axis.
 @param [cfg.position=[0,0,0]] {Float32Array} The TestModel&#x27;s local 3D position.
 @param [cfg.scale=[1,1,1]] {Float32Array} The TestModel&#x27;s local scale.
 @param [cfg.rotation=[0,0,0]] {Float32Array} The TestModel&#x27;s local rotation, as Euler angles given in degrees.
 @param [cfg.matrix=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] {Float32Array} The TestModel&#x27;s local transform matrix. Overrides the position, scale and rotation parameters.
 @extends Model
 */
xeogl.TestModel = class xeoglTestModel extends xeogl.BuildableModel {

    init(cfg) {
        super.init(cfg);
        this._generate(cfg);
    }

    _generate(options) {

        this.destroyAll();

        options = options || {};

        // Create some geometry and material assets

        this.createAsset(&quot;box&quot;, {
            type: &quot;xeogl.BoxGeometry&quot;,
            xSize: 1,
            ySize: 1,
            zSize: 1
        });

        this.createAsset(&quot;asphalt&quot;, {
            type: &quot;xeogl.LambertMaterial&quot;,
            diffuse: [0.2, 0.2, 0.2],
            ambient: [0.2, 0.2, 0.2],
            specular: [0.0, 0.0, 0.0]
        });

        this.createAsset(&quot;lightConcrete&quot;, {
            type: &quot;xeogl.LambertMaterial&quot;,
            diffuse: [0.6, 0.6, 0.6],
            ambient: [0.2, 0.2, 0.2]
        });

        this.createAsset(&quot;grass&quot;, {
            type: &quot;xeogl.LambertMaterial&quot;,
            diffuse: [0, 0.5, 0.2],
            ambient: [0.1, 0.1, 0.1]
        });

        // Select a couple of assets and generate the asphalt ground

        this.setGeometry(&quot;box&quot;);
        this.setMaterial(&quot;asphalt&quot;);
        this.setPosition(20, -.5, 20);
        this.setScale(140, 0.1, 140);
        this.createMesh();

        // Generate the buildings

        var size = options.size || 1000;
        var halfSize = size * 0.5;
        var density = options.density || 10;
        var spacing = size / density;

        for (var x = -halfSize; x &lt;= halfSize; x += spacing) {
            for (var z = -halfSize; z &lt;= halfSize; z += spacing) {
                this._generateBuilding(x + 2, z + 2, x + spacing - 2, z + spacing - 2, options);
            }
        }
    }

    _generateBuilding(xmin, zmin, xmax, zmax, options) {

        var xpos = (xmin + xmax) * 0.5;
        var ypos = 0;
        var zpos = (zmin + zmax) * 0.5;

        // Each building gets a green lawn under it

        this.setGeometry(&quot;box&quot;);
        this.setMaterial(&quot;grass&quot;);
        this.setPosition(xpos, ypos, zpos);
        this.setScale((xmax - xmin) / 2.5, 0.5, (zmax - zmin) / 2.5);
        this.setColorize(0.3 + Math.random() * 0.5, 0.3 + Math.random() * 0.5, 0.3 + Math.random() * 0.5, 1.0);
        this.createMesh();

        // Now generate the building as a bunch of boxes

        var yMaxSize = (Math.random() * 30) + 15;
        var ySize = yMaxSize + 10;
        var width;
        var axis;
        var sign;

        var xminBox;
        var zminBox;
        var xmaxBox;
        var zmaxBox;

        while (ySize &gt; 5) {

            width = (Math.random() * 5) + 2;
            axis = Math.round(Math.random());
            sign = Math.round(Math.random());

            switch (axis) {

                case 0:

                    if (sign == 0) {

                        xminBox = xmin;
                        zminBox = zpos - width;

                        xmaxBox = xpos + width;
                        zmaxBox = zpos + width;

                    } else {

                        xminBox = xpos - width;
                        zminBox = zpos - width;

                        xmaxBox = xmax;
                        zmaxBox = zpos + width;
                    }

                    break;

                case 1:

                    if (sign == 0) {

                        xminBox = xpos - width;
                        zminBox = zmin;

                        xmaxBox = xpos + width;
                        zmaxBox = zpos + width;

                    } else {

                        xminBox = xpos - width;
                        zminBox = zpos - width;

                        xmaxBox = xpos + width;
                        zmaxBox = zmax;
                    }

                    break;
            }

            this.setGeometry(&quot;box&quot;);
            this.setMaterial(&quot;lightConcrete&quot;);
            this.setPosition(xpos, ypos + ySize, zpos);
            this.setScale((xmaxBox - xminBox) * 0.5, ySize, (zmaxBox - zminBox) * 0.5);
            this.createMesh();

            // Decrease current vertical box size
            ySize -= (Math.random() * 5) + 2;
        }
    }
};


    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="../assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="../assets/js/yui-prettify.js"></script>
<script src="../assets/../api.js"></script>
<script src="../assets/js/api-filter.js"></script>
<script src="../assets/js/api-list.js"></script>
<script src="../assets/js/api-search.js"></script>
<script src="../assets/js/apidocs.js"></script>
</body>
</html>
