/home/lindsay/xeolabs/xeogl-next/xeogl/examples/js/models/testModel.js
API Docs for:

File: /home/lindsay/xeolabs/xeogl-next/xeogl/examples/js/models/testModel.js

  1. /**
  2. A **TestModel** is a procedurally-generated test {{#crossLink "Model"}}{{/crossLink}} containing {{#crossLink "Mesh"}}Meshes{{/crossLink}} that represent city buildings.
  3.  
  4. <a href="../../examples/#models_generation_TestModel"><img src="http://i.giphy.com/l0HlPJO1AN01Lz27e.gif"></img></a>
  5.  
  6. ## Overview
  7.  
  8. * Procedurally generates simple content for development and testing.
  9. * Allows you to develop some basic capabilities of your app without needing to load any models.
  10.  
  11. It inherits these capabilities from its {{#crossLink "Model"}}{{/crossLink}} base class:
  12.  
  13. * Allows you to access and manipulate the components within it.
  14. * Can be transformed within World-space by attaching it to a {{#crossLink "Transform"}}{{/crossLink}}.
  15. * Provides its dynamic World-space axis-aligned boundary.
  16.  
  17. ## Examples
  18.  
  19. * TODO
  20.  
  21. ## Usage
  22.  
  23. ````javascript
  24. var model = new xeogl.TestModel({
  25. id: "myModel",
  26. size: 5000, // Width of each axis
  27. density: 4 // How many buildings on each axis
  28. });
  29. ````
  30.  
  31. @class TestModel
  32. @module xeogl
  33. @submodule models
  34. @constructor
  35. @param [scene] {Scene} Parent {{#crossLink "Scene"}}Scene{{/crossLink}} - creates this TestModel in the default
  36. {{#crossLink "Scene"}}Scene{{/crossLink}} when omitted.
  37. @param [cfg] {*} Configs
  38. @param [cfg.id] {String} Optional ID, unique among all components in the parent {{#crossLink "Scene"}}Scene{{/crossLink}},
  39. generated automatically when omitted.
  40. @param [cfg.entityType] {String} Optional entity classification when using within a semantic data model. See the {{#crossLink "Object"}}{{/crossLink}} documentation for usage.
  41. @param [cfg.meta] {String:Object} Optional map of user-defined metadata to attach to this TestModel.
  42. @param [cfg.size] {Number} World-space width of each axis.
  43. @param [cfg.density] {Number} Number of buildings on each axis.
  44. @param [cfg.position=[0,0,0]] {Float32Array} The TestModel's local 3D position.
  45. @param [cfg.scale=[1,1,1]] {Float32Array} The TestModel's local scale.
  46. @param [cfg.rotation=[0,0,0]] {Float32Array} The TestModel's local rotation, as Euler angles given in degrees.
  47. @param [cfg.matrix=[1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1] {Float32Array} The TestModel's local transform matrix. Overrides the position, scale and rotation parameters.
  48. @extends Model
  49. */
  50. xeogl.TestModel = class xeoglTestModel extends xeogl.BuildableModel {
  51.  
  52. init(cfg) {
  53. super.init(cfg);
  54. this._generate(cfg);
  55. }
  56.  
  57. _generate(options) {
  58.  
  59. this.destroyAll();
  60.  
  61. options = options || {};
  62.  
  63. // Create some geometry and material assets
  64.  
  65. this.createAsset("box", {
  66. type: "xeogl.BoxGeometry",
  67. xSize: 1,
  68. ySize: 1,
  69. zSize: 1
  70. });
  71.  
  72. this.createAsset("asphalt", {
  73. type: "xeogl.LambertMaterial",
  74. diffuse: [0.2, 0.2, 0.2],
  75. ambient: [0.2, 0.2, 0.2],
  76. specular: [0.0, 0.0, 0.0]
  77. });
  78.  
  79. this.createAsset("lightConcrete", {
  80. type: "xeogl.LambertMaterial",
  81. diffuse: [0.6, 0.6, 0.6],
  82. ambient: [0.2, 0.2, 0.2]
  83. });
  84.  
  85. this.createAsset("grass", {
  86. type: "xeogl.LambertMaterial",
  87. diffuse: [0, 0.5, 0.2],
  88. ambient: [0.1, 0.1, 0.1]
  89. });
  90.  
  91. // Select a couple of assets and generate the asphalt ground
  92.  
  93. this.setGeometry("box");
  94. this.setMaterial("asphalt");
  95. this.setPosition(20, -.5, 20);
  96. this.setScale(140, 0.1, 140);
  97. this.createMesh();
  98.  
  99. // Generate the buildings
  100.  
  101. var size = options.size || 1000;
  102. var halfSize = size * 0.5;
  103. var density = options.density || 10;
  104. var spacing = size / density;
  105.  
  106. for (var x = -halfSize; x <= halfSize; x += spacing) {
  107. for (var z = -halfSize; z <= halfSize; z += spacing) {
  108. this._generateBuilding(x + 2, z + 2, x + spacing - 2, z + spacing - 2, options);
  109. }
  110. }
  111. }
  112.  
  113. _generateBuilding(xmin, zmin, xmax, zmax, options) {
  114.  
  115. var xpos = (xmin + xmax) * 0.5;
  116. var ypos = 0;
  117. var zpos = (zmin + zmax) * 0.5;
  118.  
  119. // Each building gets a green lawn under it
  120.  
  121. this.setGeometry("box");
  122. this.setMaterial("grass");
  123. this.setPosition(xpos, ypos, zpos);
  124. this.setScale((xmax - xmin) / 2.5, 0.5, (zmax - zmin) / 2.5);
  125. this.setColorize(0.3 + Math.random() * 0.5, 0.3 + Math.random() * 0.5, 0.3 + Math.random() * 0.5, 1.0);
  126. this.createMesh();
  127.  
  128. // Now generate the building as a bunch of boxes
  129.  
  130. var yMaxSize = (Math.random() * 30) + 15;
  131. var ySize = yMaxSize + 10;
  132. var width;
  133. var axis;
  134. var sign;
  135.  
  136. var xminBox;
  137. var zminBox;
  138. var xmaxBox;
  139. var zmaxBox;
  140.  
  141. while (ySize > 5) {
  142.  
  143. width = (Math.random() * 5) + 2;
  144. axis = Math.round(Math.random());
  145. sign = Math.round(Math.random());
  146.  
  147. switch (axis) {
  148.  
  149. case 0:
  150.  
  151. if (sign == 0) {
  152.  
  153. xminBox = xmin;
  154. zminBox = zpos - width;
  155.  
  156. xmaxBox = xpos + width;
  157. zmaxBox = zpos + width;
  158.  
  159. } else {
  160.  
  161. xminBox = xpos - width;
  162. zminBox = zpos - width;
  163.  
  164. xmaxBox = xmax;
  165. zmaxBox = zpos + width;
  166. }
  167.  
  168. break;
  169.  
  170. case 1:
  171.  
  172. if (sign == 0) {
  173.  
  174. xminBox = xpos - width;
  175. zminBox = zmin;
  176.  
  177. xmaxBox = xpos + width;
  178. zmaxBox = zpos + width;
  179.  
  180. } else {
  181.  
  182. xminBox = xpos - width;
  183. zminBox = zpos - width;
  184.  
  185. xmaxBox = xpos + width;
  186. zmaxBox = zmax;
  187. }
  188.  
  189. break;
  190. }
  191.  
  192. this.setGeometry("box");
  193. this.setMaterial("lightConcrete");
  194. this.setPosition(xpos, ypos + ySize, zpos);
  195. this.setScale((xmaxBox - xminBox) * 0.5, ySize, (zmaxBox - zminBox) * 0.5);
  196. this.createMesh();
  197.  
  198. // Decrease current vertical box size
  199. ySize -= (Math.random() * 5) + 2;
  200. }
  201. }
  202. };
  203.  
  204.