/home/lindsay/xeolabs/xeogl-next/xeogl/src/geometry/boxGeometry.js
API Docs for:

File: /home/lindsay/xeolabs/xeogl-next/xeogl/src/geometry/boxGeometry.js

  1. /**
  2. A **BoxGeometry** is a parameterized {{#crossLink "Geometry"}}{{/crossLink}} that defines a box-shaped mesh for attached {{#crossLink "Mesh"}}Meshes{{/crossLink}}.
  3.  
  4. <a href="../../examples/#geometry_primitives_box"><img src="../../assets/images/screenshots/BoxGeometry.png"></img></a>
  5.  
  6. ## Overview
  7.  
  8. * Dynamically modify a BoxGeometry's dimensions at any time by updating its {{#crossLink "BoxGeometry/center:property"}}{{/crossLink}}, {{#crossLink "BoxGeometry/xSize:property"}}{{/crossLink}}, {{#crossLink "BoxGeometry/ySize:property"}}{{/crossLink}} and {{#crossLink "BoxGeometry/zSize:property"}}{{/crossLink}} properties.
  9. * Dynamically switch its primitive type between ````"points"````, ````"lines"```` and ````"triangles"```` at any time by
  10. updating its {{#crossLink "Geometry/primitive:property"}}{{/crossLink}} property.
  11.  
  12. ## Examples
  13.  
  14. * [Textured BoxGeometry](../../examples/#geometry_primitives_box)
  15.  
  16. ## Usage
  17.  
  18. An {{#crossLink "Mesh"}}{{/crossLink}} with a BoxGeometry and a {{#crossLink "PhongMaterial"}}{{/crossLink}} with
  19. diffuse {{#crossLink "Texture"}}{{/crossLink}}:
  20.  
  21. ````javascript
  22. new xeogl.Mesh({
  23.  
  24. geometry: new xeogl.BoxGeometry({
  25. center: [0,0,0],
  26. xSize: 1, // Half-size on each axis; BoxGeometry is actually two units big on each side.
  27. ySize: 1,
  28. zSize: 1
  29. }),
  30.  
  31. material: new xeogl.PhongMaterial({
  32. diffuseMap: new xeogl.Texture({
  33. src: "textures/diffuse/uvGrid2.jpg"
  34. })
  35. })
  36. });
  37. ````
  38.  
  39. @class BoxGeometry
  40. @module xeogl
  41. @submodule geometry
  42. @constructor
  43. @param [owner] {Component} Owner component. When destroyed, the owner will destroy this component as well. Creates this component within the default {{#crossLink "Scene"}}{{/crossLink}} when omitted.
  44. @param [cfg] {*} Configs
  45. @param [cfg.id] {String} Optional ID, unique among all components in the parent {{#crossLink "Scene"}}Scene{{/crossLink}},
  46. generated automatically when omitted.
  47. @param [cfg.meta] {String:Object} Optional map of user-defined metadata to attach to this BoxGeometry.
  48. @param [cfg.primitive="triangles"] {String} The primitive type. Accepted values for a BoxGeometry are 'points', 'lines' and 'triangles'.
  49. @param [cfg.center] {Float32Array} 3D point indicating the center position.
  50. @param [cfg.xSize=1.0] {Number} Half-size on the X-axis.
  51. @param [cfg.ySize=1.0] {Number} Half-size on the Y-axis.
  52. @param [cfg.zSize=1.0] {Number} Half-size on the Z-axis.
  53. @extends Geometry
  54. */
  55.  
  56. import {utils} from '../utils.js';
  57. import {Geometry} from './geometry.js';
  58. import {componentClasses} from "./../componentClasses.js";
  59.  
  60. const type = "xeogl.BoxGeometry";
  61.  
  62. class BoxGeometry extends Geometry {
  63.  
  64. /**
  65. JavaScript class name for this Component.
  66.  
  67. For example: "xeogl.AmbientLight", "xeogl.MetallicMaterial" etc.
  68.  
  69. @property type
  70. @type String
  71. @final
  72. */
  73. get type() {
  74. return type;
  75. }
  76.  
  77. init(cfg) {
  78.  
  79. let xSize = cfg.xSize || 1;
  80. if (xSize < 0) {
  81. this.error("negative xSize not allowed - will invert");
  82. xSize *= -1;
  83. }
  84.  
  85. let ySize = cfg.ySize || 1;
  86. if (ySize < 0) {
  87. this.error("negative ySize not allowed - will invert");
  88. ySize *= -1;
  89. }
  90.  
  91. let zSize = cfg.zSize || 1;
  92. if (zSize < 0) {
  93. this.error("negative zSize not allowed - will invert");
  94. zSize *= -1;
  95. }
  96.  
  97. const center = cfg.center;
  98. const centerX = center ? center[0] : 0;
  99. const centerY = center ? center[1] : 0;
  100. const centerZ = center ? center[2] : 0;
  101.  
  102. const xmin = -xSize + centerX;
  103. const ymin = -ySize + centerY;
  104. const zmin = -zSize + centerZ;
  105. const xmax = xSize + centerX;
  106. const ymax = ySize + centerY;
  107. const zmax = zSize + centerZ;
  108.  
  109. super.init(utils.apply(cfg, {
  110.  
  111. // The vertices - eight for our cube, each
  112. // one spanning three array elements for X,Y and Z
  113. positions: [
  114.  
  115. // v0-v1-v2-v3 front
  116. xmax, ymax, zmax,
  117. xmin, ymax, zmax,
  118. xmin, ymin, zmax,
  119. xmax, ymin, zmax,
  120.  
  121. // v0-v3-v4-v1 right
  122. xmax, ymax, zmax,
  123. xmax, ymin, zmax,
  124. xmax, ymin, zmin,
  125. xmax, ymax, zmin,
  126.  
  127. // v0-v1-v6-v1 top
  128. xmax, ymax, zmax,
  129. xmax, ymax, zmin,
  130. xmin, ymax, zmin,
  131. xmin, ymax, zmax,
  132.  
  133. // v1-v6-v7-v2 left
  134. xmin, ymax, zmax,
  135. xmin, ymax, zmin,
  136. xmin, ymin, zmin,
  137. xmin, ymin, zmax,
  138.  
  139. // v7-v4-v3-v2 bottom
  140. xmin, ymin, zmin,
  141. xmax, ymin, zmin,
  142. xmax, ymin, zmax,
  143. xmin, ymin, zmax,
  144.  
  145. // v4-v7-v6-v1 back
  146. xmax, ymin, zmin,
  147. xmin, ymin, zmin,
  148. xmin, ymax, zmin,
  149. xmax, ymax, zmin
  150. ],
  151.  
  152. // Normal vectors, one for each vertex
  153. normals: [
  154.  
  155. // v0-v1-v2-v3 front
  156. 0, 0, 1,
  157. 0, 0, 1,
  158. 0, 0, 1,
  159. 0, 0, 1,
  160.  
  161. // v0-v3-v4-v5 right
  162. 1, 0, 0,
  163. 1, 0, 0,
  164. 1, 0, 0,
  165. 1, 0, 0,
  166.  
  167. // v0-v5-v6-v1 top
  168. 0, 1, 0,
  169. 0, 1, 0,
  170. 0, 1, 0,
  171. 0, 1, 0,
  172.  
  173. // v1-v6-v7-v2 left
  174. -1, 0, 0,
  175. -1, 0, 0,
  176. -1, 0, 0,
  177. -1, 0, 0,
  178.  
  179. // v7-v4-v3-v2 bottom
  180. 0, -1, 0,
  181. 0, -1, 0,
  182. 0, -1, 0,
  183. 0, -1, 0,
  184.  
  185. // v4-v7-v6-v5 back
  186. 0, 0, -1,
  187. 0, 0, -1,
  188. 0, 0, -1,
  189. 0, 0, -1
  190. ],
  191.  
  192. // UV coords
  193. uv: [
  194.  
  195. // v0-v1-v2-v3 front
  196. 1, 0,
  197. 0, 0,
  198. 0, 1,
  199. 1, 1,
  200.  
  201. // v0-v3-v4-v1 right
  202. 0, 0,
  203. 0, 1,
  204. 1, 1,
  205. 1, 0,
  206.  
  207. // v0-v1-v6-v1 top
  208. 1, 1,
  209. 1, 0,
  210. 0, 0,
  211. 0, 1,
  212.  
  213. // v1-v6-v7-v2 left
  214. 1, 0,
  215. 0, 0,
  216. 0, 1,
  217. 1, 1,
  218.  
  219. // v7-v4-v3-v2 bottom
  220. 0, 1,
  221. 1, 1,
  222. 1, 0,
  223. 0, 0,
  224.  
  225. // v4-v7-v6-v1 back
  226. 0, 1,
  227. 1, 1,
  228. 1, 0,
  229. 0, 0
  230. ],
  231.  
  232. // Indices - these organise the
  233. // positions and uv texture coordinates
  234. // into geometric primitives in accordance
  235. // with the "primitive" parameter,
  236. // in this case a set of three indices
  237. // for each triangle.
  238. //
  239. // Note that each triangle is specified
  240. // in counter-clockwise winding order.
  241. //
  242. // You can specify them in clockwise
  243. // order if you configure the Modes
  244. // node's frontFace flag as "cw", instead of
  245. // the default "ccw".
  246. indices: [
  247. 0, 1, 2,
  248. 0, 2, 3,
  249. // front
  250. 4, 5, 6,
  251. 4, 6, 7,
  252. // right
  253. 8, 9, 10,
  254. 8, 10, 11,
  255. // top
  256. 12, 13, 14,
  257. 12, 14, 15,
  258. // left
  259. 16, 17, 18,
  260. 16, 18, 19,
  261. // bottom
  262. 20, 21, 22,
  263. 20, 22, 23
  264. ],
  265.  
  266. // Tangents are lazy-computed from normals and UVs
  267. // for Normal mapping once we know we have texture
  268.  
  269. tangents: null
  270. }));
  271.  
  272. this.box = true;
  273. }
  274. }
  275.  
  276. componentClasses[type] = BoxGeometry;
  277.  
  278. export{BoxGeometry};
  279.