Reference Source

src/plugins/StoreyViewsPlugin/StoreyViewsPlugin.js

  1. import {Plugin} from "../../viewer/Plugin.js";
  2. import {Storey} from "./Storey.js";
  3. import {math} from "../../viewer/scene/math/math.js";
  4. import {ObjectsMemento} from "../../viewer/scene/mementos/ObjectsMemento.js";
  5. import {CameraMemento} from "../../viewer/scene/mementos/CameraMemento.js";
  6. import {StoreyMap} from "./StoreyMap.js";
  7. import {utils} from "../../viewer/scene/utils.js";
  8.  
  9. const tempVec3a = math.vec3();
  10. const tempMat4 = math.mat4();
  11.  
  12. const EMPTY_IMAGE = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNkYPhfDwAChwGA60e6kgAAAABJRU5ErkJggg==";
  13.  
  14.  
  15. /**
  16. * @desc A {@link Viewer} plugin that provides methods for visualizing IfcBuildingStoreys.
  17. *
  18. * <a href="https://xeokit.github.io/xeokit-sdk/examples/navigation/#StoreyViewsPlugin_recipe3"><img src="http://xeokit.io/img/docs/StoreyViewsPlugin/minimap.gif"></a>
  19. *
  20. * [[Run this example](https://xeokit.github.io/xeokit-sdk/examples/navigation/#StoreyViewsPlugin_recipe3)]
  21. *
  22. * ## Overview
  23. *
  24. * StoreyViewsPlugin provides a flexible set of methods for visualizing building storeys in 3D and 2D.
  25. *
  26. * Use the first two methods to set up 3D views of storeys:
  27. *
  28. * * [showStoreyObjects](#instance-method-showStoreyObjects) - shows the {@link Entity}s within a storey, and
  29. * * [gotoStoreyCamera](#instance-method-gotoStoreyCamera) - positions the {@link Camera} for a plan view of the Entitys within a storey.
  30. * <br> <br>
  31. *
  32. * Use the second two methods to create 2D plan view mini-map images:
  33. *
  34. * * [createStoreyMap](#instance-method-createStoreyMap) - creates a 2D plan view image of a storey, and
  35. * * [pickStoreyMap](#instance-method-pickStoreyMap) - picks the {@link Entity} at the given 2D pixel coordinates within a plan view image.
  36. *
  37. * ## Usage
  38. *
  39. * Let's start by creating a {@link Viewer} with a StoreyViewsPlugin and an {@link XKTLoaderPlugin}.
  40. *
  41. * Then we'll load a BIM building model from an ```.xkt``` file.
  42. *
  43. * ````javascript
  44. * import {Viewer, XKTLoaderPlugin, StoreyViewsPlugin} from "xeokit-sdk.es.js";
  45. *
  46. * // Create a Viewer, arrange the camera
  47. *
  48. * const viewer = new Viewer({
  49. * canvasId: "myCanvas",
  50. * transparent: true
  51. * });
  52. *
  53. * viewer.camera.eye = [-2.56, 8.38, 8.27];
  54. * viewer.camera.look = [13.44, 3.31, -14.83];
  55. * viewer.camera.up = [0.10, 0.98, -0.14];
  56. *
  57. * // Add an XKTLoaderPlugin
  58. *
  59. * const xktLoader = new XKTLoaderPlugin(viewer);
  60. *
  61. * // Add a StoreyViewsPlugin
  62. *
  63. * const storeyViewsPlugin = new StoreyViewsPlugin(viewer);
  64. *
  65. * // Load a BIM model from .xkt format
  66. *
  67. * const model = xktLoader.load({
  68. * id: "myModel",
  69. * src: "./models/xkt/Schependomlaan.xkt",
  70. * edges: true
  71. * });
  72. * ````
  73. *
  74. * ## Finding Storeys
  75. *
  76. * Getting information on a storey in our model:
  77. *
  78. * ````javascript
  79. * const storey = storeyViewsPlugin.storeys["2SWZMQPyD9pfT9q87pgXa1"]; // ID of the IfcBuildingStorey
  80. *
  81. * const modelId = storey.modelId; // "myModel"
  82. * const storeyId = storey.storeyId; // "2SWZMQPyD9pfT9q87pgXa1"
  83. * const aabb = storey.aabb; // Axis-aligned 3D World-space boundary of the IfcBuildingStorey
  84. * ````
  85. *
  86. * We can also get a "storeys" event every time the set of storeys changes, ie. every time a storey is created or destroyed:
  87. *
  88. * ````javascript
  89. * storeyViewsPlugin.on("storeys", ()=> {
  90. * const storey = storeyViewsPlugin.storeys["2SWZMQPyD9pfT9q87pgXa1"];
  91. * //...
  92. * });
  93. * ````
  94. *
  95. * ## Showing Entitys within Storeys
  96. *
  97. * Showing the {@link Entity}s within a storey:
  98. *
  99. * ````javascript
  100. * storeyViewsPlugin.showStoreyObjects("2SWZMQPyD9pfT9q87pgXa1");
  101. * ````
  102. *
  103. * Showing **only** the Entitys in a storey, hiding all others:
  104. *
  105. * ````javascript
  106. * storeyViewsPlugin.showStoreyObjects("2SWZMQPyD9pfT9q87pgXa1", {
  107. * hideOthers: true
  108. * });
  109. * ````
  110. * Showing only the storey Entitys:
  111. *
  112. * ````javascript
  113. * storeyViewsPlugin.showStoreyObjects("2SWZMQPyD9pfT9q87pgXa1", {
  114. * hideOthers: true
  115. * });
  116. * ````
  117. *
  118. * When using this option, at some point later you'll probably want to restore all Entitys to their original visibilities and
  119. * appearances.
  120. *
  121. * To do that, save their visibility and appearance states in an {@link ObjectsMemento} beforehand, from
  122. * which you can restore them later:
  123. *
  124. * ````javascript
  125. * const objectsMemento = new ObjectsMemento();
  126. *
  127. * // Save all Entity visibility and appearance states
  128. *
  129. * objectsMemento.saveObjects(viewer.scene);
  130. *
  131. * // Show storey view Entitys
  132. *
  133. * storeyViewsPlugin.showStoreyObjects("2SWZMQPyD9pfT9q87pgXa1");
  134. *
  135. * //...
  136. *
  137. * // Later, restore all Entitys to their saved visibility and appearance states
  138. * objectsMemento.restoreObjects(viewer.scene);
  139. * ````
  140. *
  141. * ## Arranging the Camera for Storey Plan Views
  142. *
  143. * The {@link StoreyViewsPlugin#gotoStoreyCamera} method positions the {@link Camera} for a plan view of
  144. * the {@link Entity}s within the given storey.
  145. *
  146. * Let's fly the {@link Camera} to a downward-looking orthographic view of the Entitys within our storey.
  147. *
  148. * ````javascript
  149. * storeyViewsPlugin.gotoStoreyCamera("2SWZMQPyD9pfT9q87pgXa1", {
  150. * projection: "ortho", // Orthographic projection
  151. * duration: 2.5, // 2.5 second transition
  152. * done: () => {
  153. * viewer.cameraControl.planView = true; // Disable rotation
  154. * }
  155. * });
  156. * ````
  157. *
  158. * Note that we also set {@link CameraControl#planView} ````true````, which prevents the CameraControl from rotating
  159. * or orbiting. In orthographic mode, this effectively makes the {@link Viewer} behave as if it were a 2D viewer, with
  160. * picking, panning and zooming still enabled.
  161. *
  162. * If you need to be able to restore the Camera to its previous state, you can save it to a {@link CameraMemento}
  163. * beforehand, from which you can restore it later:
  164. *
  165. * ````javascript
  166. * const cameraMemento = new CameraMemento();
  167. *
  168. * // Save camera state
  169. *
  170. * cameraMemento.saveCamera(viewer.scene);
  171. *
  172. * // Position camera for a downward-looking orthographic view of our storey
  173. *
  174. * storeyViewsPlugin.gotoStoreyCamera("2SWZMQPyD9pfT9q87pgXa1", {
  175. * projection: "ortho",
  176. * duration: 2.5,
  177. * done: () => {
  178. * viewer.cameraControl.planView = true; // Disable rotation
  179. * }
  180. * });
  181. *
  182. * //...
  183. *
  184. * // Later, restore the Camera to its saved state
  185. * cameraMemento.restoreCamera(viewer.scene);
  186. * ````
  187. *
  188. * ## Creating StoreyMaps
  189. *
  190. * The {@link StoreyViewsPlugin#createStoreyMap} method creates a 2D orthographic plan image of the given storey.
  191. *
  192. * This method creates a {@link StoreyMap}, which provides the plan image as a Base64-encoded string.
  193. *
  194. * Let's create a 2D plan image of our building storey:
  195. *
  196. * ````javascript
  197. * const storeyMap = storeyViewsPlugin.createStoreyMap("2SWZMQPyD9pfT9q87pgXa1", {
  198. * width: 300,
  199. * format: "png"
  200. * });
  201. *
  202. * const imageData = storeyMap.imageData; // Base64-encoded image data string
  203. * const width = storeyMap.width; // 300
  204. * const height = storeyMap.height; // Automatically derived from width
  205. * const format = storeyMap.format; // "png"
  206. * ````
  207. *
  208. * We can also specify a ````height```` for the plan image, as an alternative to ````width````:
  209. *
  210. * ````javascript
  211. * const storeyMap = storeyViewsPlugin.createStoreyMap("2SWZMQPyD9pfT9q87pgXa1", {
  212. * height: 200,
  213. * format: "png"
  214. * });
  215. * ````
  216. *
  217. * ## Picking Entities in StoreyMaps
  218. *
  219. * We can use {@link StoreyViewsPlugin#pickStoreyMap} to pick Entities in our building storey, using 2D coordinates from mouse or touch events on our {@link StoreyMap}'s 2D plan image.
  220. *
  221. * Let's programmatically pick the Entity at the given 2D pixel coordinates within our image:
  222. *
  223. * ````javascript
  224. * const mouseCoords = [65, 120]; // Mouse coords within the image extents
  225. *
  226. * const pickResult = storeyViewsPlugin.pickStoreyMap(storeyMap, mouseCoords);
  227. *
  228. * if (pickResult && pickResult.entity) {
  229. * pickResult.entity.highlighted = true;
  230. * }
  231. * ````
  232. */
  233. class StoreyViewsPlugin extends Plugin {
  234.  
  235. /**
  236. * @constructor
  237. *
  238. * @param {Viewer} viewer The Viewer.
  239. * @param {Object} cfg Plugin configuration.
  240. * @param {String} [cfg.id="StoreyViews"] Optional ID for this plugin, so that we can find it within {@link Viewer#plugins}.
  241. * @param {Boolean} [cfg.fitStoreyMaps=false] If enabled, the elements of each floor map image will be proportionally resized to encompass the entire image. This leads to varying scales among different floor map images. If disabled, each floor map image will display the model's extents, ensuring a consistent scale across all images.
  242. */
  243. constructor(viewer, cfg = {}) {
  244.  
  245. super("StoreyViews", viewer);
  246.  
  247. this._objectsMemento = new ObjectsMemento();
  248. this._cameraMemento = new CameraMemento();
  249.  
  250. /**
  251. * A {@link Storey} for each ````IfcBuildingStorey```.
  252. *
  253. * There will be a {@link Storey} for every existing {@link MetaObject} whose {@link MetaObject#type} equals "IfcBuildingStorey".
  254. *
  255. * These are created and destroyed automatically as models are loaded and destroyed.
  256. *
  257. * @type {{String:Storey}}
  258. */
  259. this.storeys = {};
  260.  
  261. this._storeysList = null;
  262.  
  263. /**
  264. * A set of {@link Storey}s for each {@link MetaModel}.
  265. *
  266. * These are created and destroyed automatically as models are loaded and destroyed.
  267. *
  268. * @type {{String: {String:Storey}}}
  269. */
  270. this.modelStoreys = {};
  271.  
  272. this._fitStoreyMaps = (!!cfg.fitStoreyMaps);
  273.  
  274. this._onModelLoaded = this.viewer.scene.on("modelLoaded", (modelId) => {
  275. this._registerModelStoreys(modelId);
  276. this.fire("storeys", this.storeys);
  277. });
  278. }
  279.  
  280. _registerModelStoreys(modelId) {
  281. const viewer = this.viewer;
  282. const scene = viewer.scene;
  283. const metaScene = viewer.metaScene;
  284. const metaModel = metaScene.metaModels[modelId];
  285. const model = scene.models[modelId];
  286. if (!metaModel || !metaModel.rootMetaObjects) {
  287. return;
  288. }
  289. const rootMetaObjects = metaModel.rootMetaObjects;
  290. for (let j = 0, lenj = rootMetaObjects.length; j < lenj; j++) {
  291. const storeyIds = rootMetaObjects[j].getObjectIDsInSubtreeByType(["IfcBuildingStorey"]);
  292. for (let i = 0, len = storeyIds.length; i < len; i++) {
  293. const storeyId = storeyIds[i];
  294. const metaObject = metaScene.metaObjects[storeyId];
  295. const childObjectIds = metaObject.getObjectIDsInSubtree();
  296. const storeyAABB = scene.getAABB(childObjectIds);
  297. const numObjects = (Math.random() > 0.5) ? childObjectIds.length : 0;
  298. const storey = new Storey(this, model.aabb, storeyAABB, modelId, storeyId, numObjects);
  299. storey._onModelDestroyed = model.once("destroyed", () => {
  300. this._deregisterModelStoreys(modelId);
  301. this.fire("storeys", this.storeys);
  302. });
  303. this.storeys[storeyId] = storey;
  304. this._storeysList = null;
  305. if (!this.modelStoreys[modelId]) {
  306. this.modelStoreys[modelId] = {};
  307. }
  308. this.modelStoreys[modelId][storeyId] = storey;
  309. }
  310. }
  311. this._clipBoundingBoxes();
  312. }
  313.  
  314. _clipBoundingBoxes() {
  315. const storeysList = this.storeysList;
  316. const metaScene = this.viewer.metaScene;
  317. const camera = this.viewer.camera;
  318. const worldUp = camera.worldUp;
  319. const xUp = worldUp[0] > worldUp[1] && worldUp[0] > worldUp[2];
  320. const yUp = !xUp && worldUp[1] > worldUp[0] && worldUp[1] > worldUp[2];
  321. const zUp = !xUp && !yUp && worldUp[2] > worldUp[0] && worldUp[2] > worldUp[1];
  322.  
  323. let bbIndex;
  324.  
  325. if(xUp) bbIndex = 0;
  326. else if(yUp) bbIndex = 1;
  327. else bbIndex = 2;
  328. for (let i = 0, len = storeysList.length; i < len; i++) {
  329.  
  330. const storeyMetaObjectCur = metaScene.metaObjects[storeysList[i].storeyId];
  331. const elevationCur = storeyMetaObjectCur.attributes.elevation;
  332.  
  333. if(isNaN(elevationCur)) return;
  334.  
  335. const bb = storeysList[i].storeyAABB;
  336. bb[bbIndex] = Math.max(bb[1], parseFloat(elevationCur));
  337.  
  338. if (i > 0) {
  339. const storeyMetaObjectNext = metaScene.metaObjects[storeysList[i - 1].storeyId];
  340. const elevationNext = storeyMetaObjectNext.attributes.elevation;
  341. bb[4] = Math.min(bb[bbIndex + 3], parseFloat(elevationNext));
  342. }
  343.  
  344. this.storeys[storeysList[i].storeyId].storeyAABB = bb;
  345. }
  346.  
  347. }
  348.  
  349. _deregisterModelStoreys(modelId) {
  350. const storeys = this.modelStoreys[modelId];
  351. if (storeys) {
  352. const scene = this.viewer.scene;
  353. for (let storyObjectId in storeys) {
  354. if (storeys.hasOwnProperty(storyObjectId)) {
  355. const storey = storeys[storyObjectId];
  356. const model = scene.models[storey.modelId];
  357. if (model) {
  358. model.off(storey._onModelDestroyed);
  359. }
  360. delete this.storeys[storyObjectId];
  361. this._storeysList = null;
  362. }
  363. }
  364. delete this.modelStoreys[modelId];
  365. }
  366. }
  367.  
  368. /**
  369. * When true, the elements of each floor map image will be proportionally resized to encompass the entire image. This leads to varying scales among different
  370. * floor map images. If false, each floor map image will display the model's extents, ensuring a consistent scale across all images.
  371. * @returns {*|boolean}
  372. */
  373. get fitStoreyMaps() {
  374. return this._fitStoreyMaps;
  375. }
  376.  
  377. /**
  378. * Arranges the {@link Camera} for a 3D orthographic view of the {@link Entity}s within the given storey.
  379. *
  380. * See also: {@link CameraMemento}, which saves and restores the state of the {@link Scene}'s {@link Camera}
  381. *
  382. * @param {String} storeyId ID of the ````IfcBuildingStorey```` object.
  383. * @param {*} [options] Options for arranging the Camera.
  384. * @param {String} [options.projection] Projection type to transition the Camera to. Accepted values are "perspective" and "ortho".
  385. * @param {Function} [options.done] Callback to fire when the Camera has arrived. When provided, causes an animated flight to the saved state. Otherwise jumps to the saved state.
  386. */
  387. gotoStoreyCamera(storeyId, options = {}) {
  388.  
  389. const storey = this.storeys[storeyId];
  390.  
  391. if (!storey) {
  392. this.error("IfcBuildingStorey not found with this ID: " + storeyId);
  393. if (options.done) {
  394. options.done();
  395. }
  396. return;
  397. }
  398.  
  399. const viewer = this.viewer;
  400. const scene = viewer.scene;
  401. const camera = scene.camera;
  402. const storeyAABB = storey.storeyAABB;
  403.  
  404. if (storeyAABB[3] < storeyAABB[0] || storeyAABB[4] < storeyAABB[1] || storeyAABB[5] < storeyAABB[2]) { // Don't fly to an inverted boundary
  405. if (options.done) {
  406. options.done();
  407. }
  408. return;
  409. }
  410. if (storeyAABB[3] === storeyAABB[0] && storeyAABB[4] === storeyAABB[1] && storeyAABB[5] === storeyAABB[2]) { // Don't fly to an empty boundary
  411. if (options.done) {
  412. options.done();
  413. }
  414. return;
  415. }
  416. const look2 = math.getAABB3Center(storeyAABB);
  417. const diag = math.getAABB3Diag(storeyAABB);
  418. const fitFOV = 45; // fitFOV;
  419. const sca = Math.abs(diag / Math.tan(fitFOV * math.DEGTORAD));
  420.  
  421. const orthoScale2 = diag * 1.3;
  422.  
  423. const eye2 = tempVec3a;
  424.  
  425. eye2[0] = look2[0] + (camera.worldUp[0] * sca);
  426. eye2[1] = look2[1] + (camera.worldUp[1] * sca);
  427. eye2[2] = look2[2] + (camera.worldUp[2] * sca);
  428.  
  429. const up2 = camera.worldForward;
  430.  
  431. if (options.done) {
  432.  
  433. viewer.cameraFlight.flyTo(utils.apply(options, {
  434. eye: eye2,
  435. look: look2,
  436. up: up2,
  437. orthoScale: orthoScale2
  438. }), () => {
  439. options.done();
  440. });
  441.  
  442. } else {
  443.  
  444. viewer.cameraFlight.jumpTo(utils.apply(options, {
  445. eye: eye2,
  446. look: look2,
  447. up: up2,
  448. orthoScale: orthoScale2
  449. }));
  450.  
  451. viewer.camera.ortho.scale = orthoScale2;
  452. }
  453. }
  454.  
  455. /**
  456. * Shows the {@link Entity}s within the given storey.
  457. *
  458. * Optionally hides all other Entitys.
  459. *
  460. * See also: {@link ObjectsMemento}, which saves and restores a memento of the visual state
  461. * of the {@link Entity}'s that represent objects within a {@link Scene}.
  462. *
  463. * @param {String} storeyId ID of the ````IfcBuildingStorey```` object.
  464. * @param {*} [options] Options for showing the Entitys within the storey.
  465. * @param {Boolean} [options.hideOthers=false] When ````true````, hide all other {@link Entity}s.
  466. */
  467. showStoreyObjects(storeyId, options = {}) {
  468.  
  469. const storey = this.storeys[storeyId];
  470.  
  471. if (!storey) {
  472. this.error("IfcBuildingStorey not found with this ID: " + storeyId);
  473. return;
  474. }
  475.  
  476. const viewer = this.viewer;
  477. const scene = viewer.scene;
  478. const metaScene = viewer.metaScene;
  479. const storeyMetaObject = metaScene.metaObjects[storeyId];
  480.  
  481. if (!storeyMetaObject) {
  482. return;
  483. }
  484.  
  485. if (options.hideOthers) {
  486. scene.setObjectsVisible(viewer.scene.visibleObjectIds, false);
  487. }
  488.  
  489. this.withStoreyObjects(storeyId, (entity, metaObject) => {
  490. if (entity) {
  491. entity.visible = true;
  492. }
  493. });
  494. }
  495.  
  496. /**
  497. * Executes a callback on each of the objects within the given storey.
  498. *
  499. * ## Usage
  500. *
  501. * In the example below, we'll show all the {@link Entity}s, within the given ````IfcBuildingStorey````,
  502. * that have {@link MetaObject}s with type ````IfcSpace````. Note that the callback will only be given
  503. * an {@link Entity} when one exists for the given {@link MetaObject}.
  504. *
  505. * ````JavaScript
  506. * myStoreyViewsPlugin.withStoreyObjects(storeyId, (entity, metaObject) => {
  507. * if (entity && metaObject && metaObject.type === "IfcSpace") {
  508. * entity.visible = true;
  509. * }
  510. * });
  511. * ````
  512. *
  513. * @param {String} storeyId ID of the ````IfcBuildingStorey```` object.
  514. * @param {Function} callback The callback.
  515. */
  516. withStoreyObjects(storeyId, callback) {
  517. const viewer = this.viewer;
  518. const scene = viewer.scene;
  519. const metaScene = viewer.metaScene;
  520. const rootMetaObject = metaScene.metaObjects[storeyId];
  521. if (!rootMetaObject) {
  522. return;
  523. }
  524. const storeySubObjects = rootMetaObject.getObjectIDsInSubtree();
  525. for (var i = 0, len = storeySubObjects.length; i < len; i++) {
  526. const objectId = storeySubObjects[i];
  527. const metaObject = metaScene.metaObjects[objectId];
  528. const entity = scene.objects[objectId];
  529. if (entity) {
  530. callback(entity, metaObject);
  531. }
  532. }
  533. }
  534.  
  535. /**
  536. * Creates a 2D map of the given storey.
  537. *
  538. * @param {String} storeyId ID of the ````IfcBuildingStorey```` object.
  539. * @param {*} [options] Options for creating the image.
  540. * @param {Number} [options.width=300] Image width in pixels. Height will be automatically determined from this, if not given.
  541. * @param {Number} [options.height=300] Image height in pixels, as an alternative to width. Width will be automatically determined from this, if not given.
  542. * @param {String} [options.format="png"] Image format. Accepted values are "png" and "jpeg".
  543. * @param {Boolean} [options.captureSectionPlanes=false] Whether the storey map is sliced or not.
  544. * @returns {StoreyMap} The StoreyMap.
  545. */
  546. createStoreyMap(storeyId, options = {}) {
  547.  
  548. const storey = this.storeys[storeyId];
  549. if (!storey) {
  550. this.error("IfcBuildingStorey not found with this ID: " + storeyId);
  551. return EMPTY_IMAGE;
  552. }
  553.  
  554. const viewer = this.viewer;
  555. const scene = viewer.scene;
  556. const format = options.format || "png";
  557. const aabb = (this._fitStoreyMaps) ? storey.storeyAABB : storey.modelAABB;
  558. const aspect = Math.abs((aabb[5] - aabb[2]) / (aabb[3] - aabb[0]));
  559. const padding = options.padding || 0;
  560. const captureSectionPlanes = !!options.captureSectionPlanes;
  561.  
  562. let width;
  563. let height;
  564.  
  565. if (options.width && options.height) {
  566. width = options.width;
  567. height = options.height;
  568.  
  569. } else if (options.height) {
  570. height = options.height;
  571. width = Math.round(height / aspect);
  572.  
  573. } else if (options.width) {
  574. width = options.width;
  575. height = Math.round(width * aspect);
  576.  
  577. } else {
  578. width = 300;
  579. height = Math.round(width * aspect);
  580. }
  581.  
  582. const mask = {
  583. visible: true,
  584. }
  585.  
  586. this._objectsMemento.saveObjects(scene, mask);
  587. this._cameraMemento.saveCamera(scene);
  588.  
  589. this.showStoreyObjects(storeyId, utils.apply(options, {
  590. hideOthers: true
  591. }));
  592. if (captureSectionPlanes)
  593. this._toggleSectionPlanes(false);
  594.  
  595. this._arrangeStoreyMapCamera(storey);
  596.  
  597. const src = viewer.getSnapshot({
  598. width: width,
  599. height: height,
  600. format: format,
  601. });
  602.  
  603. this._objectsMemento.restoreObjects(scene, mask);
  604. this._cameraMemento.restoreCamera(scene);
  605. if (captureSectionPlanes)
  606. this._toggleSectionPlanes(true);
  607.  
  608. return new StoreyMap(storeyId, src, format, width, height, padding);
  609. }
  610.  
  611. _toggleSectionPlanes(visible) {
  612. const planes = this.viewer.scene.sectionPlanes;
  613. for (const key in planes) {
  614. planes[key].active = visible;
  615. }
  616. }
  617.  
  618. _arrangeStoreyMapCamera(storey) {
  619. const viewer = this.viewer;
  620. const scene = viewer.scene;
  621. const camera = scene.camera;
  622. const aabb = (this._fitStoreyMaps) ? storey.storeyAABB : storey.modelAABB;
  623. const look = math.getAABB3Center(aabb);
  624. const sca = 0.5;
  625. const eye = tempVec3a;
  626. eye[0] = look[0] + (camera.worldUp[0] * sca);
  627. eye[1] = look[1] + (camera.worldUp[1] * sca);
  628. eye[2] = look[2] + (camera.worldUp[2] * sca);
  629. const up = camera.worldForward;
  630. viewer.cameraFlight.jumpTo({eye: eye, look: look, up: up});
  631. const xHalfSize = (aabb[3] - aabb[0]) / 2;
  632. const yHalfSize = (aabb[4] - aabb[1]) / 2;
  633. const zHalfSize = (aabb[5] - aabb[2]) / 2;
  634. const xmin = -xHalfSize;
  635. const xmax = +xHalfSize;
  636. const ymin = -yHalfSize;
  637. const ymax = +yHalfSize;
  638. const zmin = -zHalfSize;
  639. const zmax = +zHalfSize;
  640. viewer.camera.customProjection.matrix = math.orthoMat4c(xmin, xmax, zmin, zmax, ymin, ymax, tempMat4);
  641. viewer.camera.projection = "customProjection";
  642. }
  643.  
  644. /**
  645. * Attempts to pick an {@link Entity} at the given pixel coordinates within a StoreyMap image.
  646. *
  647. * @param {StoreyMap} storeyMap The StoreyMap.
  648. * @param {Number[]} imagePos 2D pixel coordinates within the bounds of {@link StoreyMap#imageData}.
  649. * @param {*} [options] Picking options.
  650. * @param {Boolean} [options.pickSurface=false] Whether to return the picked position on the surface of the Entity.
  651. * @returns {PickResult} The pick result, if an Entity was successfully picked, else null.
  652. */
  653. pickStoreyMap(storeyMap, imagePos, options = {}) {
  654.  
  655. const storeyId = storeyMap.storeyId;
  656. const storey = this.storeys[storeyId];
  657.  
  658. if (!storey) {
  659. this.error("IfcBuildingStorey not found with this ID: " + storeyId);
  660. return null
  661. }
  662.  
  663. const normX = 1.0 - (imagePos[0] / storeyMap.width);
  664. const normZ = 1.0 - (imagePos[1] / storeyMap.height);
  665.  
  666. const aabb = (this._fitStoreyMaps) ? storey.storeyAABB : storey.modelAABB;
  667.  
  668. const xmin = aabb[0];
  669. const ymin = aabb[1];
  670. const zmin = aabb[2];
  671. const xmax = aabb[3];
  672. const ymax = aabb[4];
  673. const zmax = aabb[5];
  674.  
  675. const xWorldSize = xmax - xmin;
  676. const yWorldSize = ymax - ymin;
  677. const zWorldSize = zmax - zmin;
  678.  
  679. const origin = math.vec3([xmin + (xWorldSize * normX), ymin + (yWorldSize * 0.5), zmin + (zWorldSize * normZ)]);
  680. const direction = math.vec3([0, -1, 0]);
  681. const look = math.addVec3(origin, direction, tempVec3a);
  682. const worldForward = this.viewer.camera.worldForward;
  683. const matrix = math.lookAtMat4v(origin, look, worldForward, tempMat4);
  684.  
  685. const pickResult = this.viewer.scene.pick({ // Picking with arbitrarily-positioned ray
  686. pickSurface: options.pickSurface,
  687. pickInvisible: true,
  688. matrix
  689. });
  690.  
  691. return pickResult;
  692. }
  693.  
  694. storeyMapToWorldPos(storeyMap, imagePos, options = {}) {
  695.  
  696. const storeyId = storeyMap.storeyId;
  697. const storey = this.storeys[storeyId];
  698.  
  699. if (!storey) {
  700. this.error("IfcBuildingStorey not found with this ID: " + storeyId);
  701. return null
  702. }
  703.  
  704. const normX = 1.0 - (imagePos[0] / storeyMap.width);
  705. const normZ = 1.0 - (imagePos[1] / storeyMap.height);
  706.  
  707. const aabb = (this._fitStoreyMaps) ? storey.storeyAABB : storey.modelAABB;
  708.  
  709. const xmin = aabb[0];
  710. const ymin = aabb[1];
  711. const zmin = aabb[2];
  712. const xmax = aabb[3];
  713. const ymax = aabb[4];
  714. const zmax = aabb[5];
  715.  
  716. const xWorldSize = xmax - xmin;
  717. const yWorldSize = ymax - ymin;
  718. const zWorldSize = zmax - zmin;
  719.  
  720. const origin = math.vec3([xmin + (xWorldSize * normX), ymin + (yWorldSize * 0.5), zmin + (zWorldSize * normZ)]);
  721.  
  722. return origin;
  723. }
  724.  
  725.  
  726. /**
  727. * Gets the ID of the storey that contains the given 3D World-space position.
  728. *.
  729. * @param {Number[]} worldPos 3D World-space position.
  730. * @returns {String} ID of the storey containing the position, or null if the position falls outside all the storeys.
  731. */
  732. getStoreyContainingWorldPos(worldPos, modelId = null) {
  733. const storeys = modelId ? this._filterStoreys(modelId) : this.storeys;
  734. for (let storeyId in storeys) {
  735. const storey = storeys[storeyId];
  736. if (math.point3AABB3AbsoluteIntersect(storey.storeyAABB, worldPos)) {
  737. return storeyId;
  738. }
  739. }
  740. return null;
  741. }
  742.  
  743. /**
  744. * Gets the ID of the storey which's bounding box contains the y point of the world position
  745. *
  746. * @param {Number[]} worldPos 3D World-space position.
  747. * @returns {String} ID of the storey containing the position, or null if the position falls outside all the storeys.
  748. */
  749. getStoreyInVerticalRange(worldPos, modelId = null) {
  750. const storeys = modelId ? this._filterStoreys(modelId) : this.storeys;
  751. for (let storeyId in storeys) {
  752. const storey = storeys[storeyId];
  753. const aabb = [0, 0, 0, 0, 0, 0], pos = [0, 0, 0];
  754. aabb[1] = storey.storeyAABB[1];
  755. aabb[4] = storey.storeyAABB[4];
  756. pos[1] = worldPos[1];
  757. if (math.point3AABB3AbsoluteIntersect(aabb, pos)) {
  758. return storeyId;
  759. }
  760. }
  761. return null;
  762. }
  763.  
  764. /**
  765. * Returns whether a position is above or below a building
  766. *
  767. * @param {Number[]} worldPos 3D World-space position.
  768. * @returns {String} ID of the lowest/highest story or null.
  769. */
  770. isPositionAboveOrBelowBuilding(worldPos, modelId = null) {
  771. const storeys = modelId ? this._filterStoreys(modelId) : this.storeys;
  772. const keys = Object.keys(storeys);
  773. if(keys.length <= 0) return null;
  774. const ids = [keys[0], keys[keys.length - 1]];
  775. if (worldPos[1] < storeys[ids[0]].storeyAABB[1])
  776. return ids[0];
  777. else if (worldPos[1] > storeys[ids[1]].storeyAABB[4])
  778. return ids[1];
  779. return null;
  780. }
  781.  
  782. /**
  783. * Converts a 3D World-space position to a 2D position within a StoreyMap image.
  784. *
  785. * Use {@link StoreyViewsPlugin#pickStoreyMap} to convert 2D image positions to 3D world-space.
  786. *
  787. * @param {StoreyMap} storeyMap The StoreyMap.
  788. * @param {Number[]} worldPos 3D World-space position within the storey.
  789. * @param {Number[]} imagePos 2D pixel position within the {@link StoreyMap#imageData}.
  790. * @returns {Boolean} True if ````imagePos```` is within the bounds of the {@link StoreyMap#imageData}, else ````false```` if it falls outside.
  791. */
  792. worldPosToStoreyMap(storeyMap, worldPos, imagePos) {
  793.  
  794. const storeyId = storeyMap.storeyId;
  795. const storey = this.storeys[storeyId];
  796.  
  797. if (!storey) {
  798. this.error("IfcBuildingStorey not found with this ID: " + storeyId);
  799. return false
  800. }
  801.  
  802. const aabb = (this._fitStoreyMaps) ? storey.storeyAABB : storey.modelAABB;
  803.  
  804. const xmin = aabb[0];
  805. const ymin = aabb[1];
  806. const zmin = aabb[2];
  807.  
  808. const xmax = aabb[3];
  809. const ymax = aabb[4];
  810. const zmax = aabb[5];
  811.  
  812. const xWorldSize = xmax - xmin;
  813. const yWorldSize = ymax - ymin;
  814. const zWorldSize = zmax - zmin;
  815.  
  816. const camera = this.viewer.camera;
  817. const worldUp = camera.worldUp;
  818.  
  819. const xUp = worldUp[0] > worldUp[1] && worldUp[0] > worldUp[2];
  820. const yUp = !xUp && worldUp[1] > worldUp[0] && worldUp[1] > worldUp[2];
  821. const zUp = !xUp && !yUp && worldUp[2] > worldUp[0] && worldUp[2] > worldUp[1];
  822.  
  823. const ratioX = (storeyMap.width / xWorldSize);
  824. const ratioY = yUp ? (storeyMap.height / zWorldSize) : (storeyMap.height / yWorldSize); // Assuming either Y or Z is "up", but never X
  825.  
  826. imagePos[0] = Math.floor(storeyMap.width - ((worldPos[0] - xmin) * ratioX));
  827. imagePos[1] = Math.floor(storeyMap.height - ((worldPos[2] - zmin) * ratioY));
  828.  
  829. return (imagePos[0] >= 0 && imagePos[0] < storeyMap.width && imagePos[1] >= 0 && imagePos[1] <= storeyMap.height);
  830. }
  831.  
  832. /**
  833. * Converts a 3D World-space direction vector to a 2D vector within a StoreyMap image.
  834. *
  835. * @param {StoreyMap} storeyMap The StoreyMap.
  836. * @param {Number[]} worldDir 3D World-space direction vector.
  837. * @param {Number[]} imageDir Normalized 2D direction vector.
  838. */
  839. worldDirToStoreyMap(storeyMap, worldDir, imageDir) {
  840. const camera = this.viewer.camera;
  841. const eye = camera.eye;
  842. const look = camera.look;
  843. const eyeLookDir = math.subVec3(look, eye, tempVec3a);
  844. const worldUp = camera.worldUp;
  845. const xUp = worldUp[0] > worldUp[1] && worldUp[0] > worldUp[2];
  846. const yUp = !xUp && worldUp[1] > worldUp[0] && worldUp[1] > worldUp[2];
  847. const zUp = !xUp && !yUp && worldUp[2] > worldUp[0] && worldUp[2] > worldUp[1];
  848. if (xUp) {
  849. imageDir[0] = eyeLookDir[1];
  850. imageDir[1] = eyeLookDir[2];
  851. } else if (yUp) {
  852. imageDir[0] = eyeLookDir[0];
  853. imageDir[1] = eyeLookDir[2];
  854. } else {
  855. imageDir[0] = eyeLookDir[0];
  856. imageDir[1] = eyeLookDir[1];
  857. }
  858. math.normalizeVec2(imageDir);
  859. }
  860.  
  861. /**
  862. * Destroys this StoreyViewsPlugin.
  863. */
  864. destroy() {
  865. this.viewer.scene.off(this._onModelLoaded);
  866. super.destroy();
  867. }
  868.  
  869. /**
  870. * Gets Storeys in a list, spatially sorted on the vertical World axis, the lowest Storey first.
  871. *
  872. * @returns {null}
  873. */
  874. get storeysList() {
  875. if (!this._storeysList) {
  876. this._storeysList = Object.values(this.storeys);
  877. this._storeysList.sort(this._getSpatialSortFunc());
  878. }
  879. return this._storeysList;
  880. }
  881.  
  882. _getSpatialSortFunc() {
  883. const viewer = this.viewer;
  884. const scene = viewer.scene;
  885. const camera = scene.camera;
  886. return this._spatialSortFunc || (this._spatialSortFunc = (storey1, storey2) => {
  887. let idx = 0;
  888. if (camera.xUp) {
  889. idx = 0;
  890. } else if (camera.yUp) {
  891. idx = 1;
  892. } else {
  893. idx = 2;
  894. }
  895. const metaScene = this.viewer.metaScene;
  896. const storey1MetaObject = metaScene.metaObjects[storey1.storeyId];
  897. const storey2MetaObject = metaScene.metaObjects[storey2.storeyId];
  898.  
  899. if (storey1MetaObject && (storey1MetaObject.attributes && storey1MetaObject.attributes.elevation !== undefined) &&
  900. storey2MetaObject && (storey2MetaObject.attributes && storey2MetaObject.attributes.elevation !== undefined)) {
  901. const elevation1 = Number.parseFloat(storey1MetaObject.attributes.elevation);
  902. const elevation2 = Number.parseFloat(storey2MetaObject.attributes.elevation);
  903. if (elevation1 > elevation2) {
  904. return -1;
  905. }
  906. if (elevation1 < elevation2) {
  907. return 1;
  908. }
  909. return 0;
  910. } else {
  911. if (storey1.aabb[idx] > storey2.aabb[idx]) {
  912. return -1;
  913. }
  914. if (storey1.aabb[idx] < storey2.aabb[idx]) {
  915. return 1;
  916. }
  917. return 0;
  918. }
  919. });
  920. }
  921.  
  922. _filterStoreys(modelId) {
  923. return Object.fromEntries(
  924. Object.entries(this.storeys).filter(([_, value]) => value.modelId === modelId)
  925. );
  926. }
  927. }
  928.  
  929. export {StoreyViewsPlugin}