aframe-extras.misc.js 24 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784
  1. (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
  2. 'use strict';
  3. require('./src/misc');
  4. },{"./src/misc":5}],2:[function(require,module,exports){
  5. 'use strict';
  6. module.exports = AFRAME.registerComponent('checkpoint', {
  7. schema: {
  8. offset: { default: { x: 0, y: 0, z: 0 }, type: 'vec3' }
  9. },
  10. init: function init() {
  11. this.active = false;
  12. this.targetEl = null;
  13. this.fire = this.fire.bind(this);
  14. this.offset = new THREE.Vector3();
  15. },
  16. update: function update() {
  17. this.offset.copy(this.data.offset);
  18. },
  19. play: function play() {
  20. this.el.addEventListener('click', this.fire);
  21. },
  22. pause: function pause() {
  23. this.el.removeEventListener('click', this.fire);
  24. },
  25. remove: function remove() {
  26. this.pause();
  27. },
  28. fire: function fire() {
  29. var targetEl = this.el.sceneEl.querySelector('[checkpoint-controls]');
  30. if (!targetEl) {
  31. throw new Error('No `checkpoint-controls` component found.');
  32. }
  33. targetEl.components['checkpoint-controls'].setCheckpoint(this.el);
  34. },
  35. getOffset: function getOffset() {
  36. return this.offset.copy(this.data.offset);
  37. }
  38. });
  39. },{}],3:[function(require,module,exports){
  40. 'use strict';
  41. /**
  42. * @param {Array<THREE.Material>|THREE.Material} material
  43. * @return {Array<THREE.Material>}
  44. */
  45. function ensureMaterialArray(material) {
  46. if (!material) {
  47. return [];
  48. } else if (Array.isArray(material)) {
  49. return material;
  50. } else if (material.materials) {
  51. return material.materials;
  52. } else {
  53. return [material];
  54. }
  55. }
  56. /**
  57. * @param {THREE.Object3D} mesh
  58. * @param {Array<string>} materialNames
  59. * @param {THREE.Texture} envMap
  60. * @param {number} reflectivity [description]
  61. */
  62. function applyEnvMap(mesh, materialNames, envMap, reflectivity) {
  63. if (!mesh) return;
  64. materialNames = materialNames || [];
  65. mesh.traverse(function (node) {
  66. if (!node.isMesh) return;
  67. var meshMaterials = ensureMaterialArray(node.material);
  68. meshMaterials.forEach(function (material) {
  69. if (material && !('envMap' in material)) return;
  70. if (materialNames.length && materialNames.indexOf(material.name) === -1) return;
  71. material.envMap = envMap;
  72. material.reflectivity = reflectivity;
  73. material.needsUpdate = true;
  74. });
  75. });
  76. }
  77. /**
  78. * Specifies an envMap on an entity, without replacing any existing material
  79. * properties.
  80. */
  81. module.exports = AFRAME.registerComponent('cube-env-map', {
  82. multiple: true,
  83. schema: {
  84. path: { default: '' },
  85. extension: { default: 'jpg', oneOf: ['jpg', 'png'] },
  86. format: { default: 'RGBFormat', oneOf: ['RGBFormat', 'RGBAFormat'] },
  87. enableBackground: { default: false },
  88. reflectivity: { default: 1, min: 0, max: 1 },
  89. materials: { default: [] }
  90. },
  91. init: function init() {
  92. var _this = this;
  93. var data = this.data;
  94. this.texture = new THREE.CubeTextureLoader().load([data.path + 'posx.' + data.extension, data.path + 'negx.' + data.extension, data.path + 'posy.' + data.extension, data.path + 'negy.' + data.extension, data.path + 'posz.' + data.extension, data.path + 'negz.' + data.extension]);
  95. this.texture.format = THREE[data.format];
  96. this.object3dsetHandler = function () {
  97. var mesh = _this.el.getObject3D('mesh');
  98. var data = _this.data;
  99. applyEnvMap(mesh, data.materials, _this.texture, data.reflectivity);
  100. };
  101. this.el.addEventListener('object3dset', this.object3dsetHandler);
  102. },
  103. update: function update(oldData) {
  104. var data = this.data;
  105. var mesh = this.el.getObject3D('mesh');
  106. var addedMaterialNames = [];
  107. var removedMaterialNames = [];
  108. if (data.materials.length) {
  109. if (oldData.materials) {
  110. addedMaterialNames = data.materials.filter(function (name) {
  111. return !oldData.materials.includes(name);
  112. });
  113. removedMaterialNames = oldData.materials.filter(function (name) {
  114. return !data.materials.includes(name);
  115. });
  116. } else {
  117. addedMaterialNames = data.materials;
  118. }
  119. }
  120. if (addedMaterialNames.length) {
  121. applyEnvMap(mesh, addedMaterialNames, this.texture, data.reflectivity);
  122. }
  123. if (removedMaterialNames.length) {
  124. applyEnvMap(mesh, removedMaterialNames, null, 1);
  125. }
  126. if (oldData.materials && data.reflectivity !== oldData.reflectivity) {
  127. var maintainedMaterialNames = data.materials.filter(function (name) {
  128. return oldData.materials.includes(name);
  129. });
  130. if (maintainedMaterialNames.length) {
  131. applyEnvMap(mesh, maintainedMaterialNames, this.texture, data.reflectivity);
  132. }
  133. }
  134. if (this.data.enableBackground && !oldData.enableBackground) {
  135. this.setBackground(this.texture);
  136. } else if (!this.data.enableBackground && oldData.enableBackground) {
  137. this.setBackground(null);
  138. }
  139. },
  140. remove: function remove() {
  141. this.el.removeEventListener('object3dset', this.object3dsetHandler);
  142. var mesh = this.el.getObject3D('mesh');
  143. var data = this.data;
  144. applyEnvMap(mesh, data.materials, null, 1);
  145. if (data.enableBackground) this.setBackground(null);
  146. },
  147. setBackground: function setBackground(texture) {
  148. this.el.sceneEl.object3D.background = texture;
  149. }
  150. });
  151. },{}],4:[function(require,module,exports){
  152. 'use strict';
  153. /* global CANNON */
  154. /**
  155. * Based on aframe/examples/showcase/tracked-controls.
  156. *
  157. * Handles events coming from the hand-controls.
  158. * Determines if the entity is grabbed or released.
  159. * Updates its position to move along the controller.
  160. */
  161. module.exports = AFRAME.registerComponent('grab', {
  162. init: function init() {
  163. this.system = this.el.sceneEl.systems.physics;
  164. this.GRABBED_STATE = 'grabbed';
  165. this.grabbing = false;
  166. this.hitEl = /** @type {AFRAME.Element} */null;
  167. this.physics = /** @type {AFRAME.System} */this.el.sceneEl.systems.physics;
  168. this.constraint = /** @type {CANNON.Constraint} */null;
  169. // Bind event handlers
  170. this.onHit = this.onHit.bind(this);
  171. this.onGripOpen = this.onGripOpen.bind(this);
  172. this.onGripClose = this.onGripClose.bind(this);
  173. },
  174. play: function play() {
  175. var el = this.el;
  176. el.addEventListener('hit', this.onHit);
  177. el.addEventListener('gripdown', this.onGripClose);
  178. el.addEventListener('gripup', this.onGripOpen);
  179. el.addEventListener('trackpaddown', this.onGripClose);
  180. el.addEventListener('trackpadup', this.onGripOpen);
  181. el.addEventListener('triggerdown', this.onGripClose);
  182. el.addEventListener('triggerup', this.onGripOpen);
  183. },
  184. pause: function pause() {
  185. var el = this.el;
  186. el.removeEventListener('hit', this.onHit);
  187. el.removeEventListener('gripdown', this.onGripClose);
  188. el.removeEventListener('gripup', this.onGripOpen);
  189. el.removeEventListener('trackpaddown', this.onGripClose);
  190. el.removeEventListener('trackpadup', this.onGripOpen);
  191. el.removeEventListener('triggerdown', this.onGripClose);
  192. el.removeEventListener('triggerup', this.onGripOpen);
  193. },
  194. onGripClose: function onGripClose() {
  195. this.grabbing = true;
  196. },
  197. onGripOpen: function onGripOpen() {
  198. var hitEl = this.hitEl;
  199. this.grabbing = false;
  200. if (!hitEl) {
  201. return;
  202. }
  203. hitEl.removeState(this.GRABBED_STATE);
  204. this.hitEl = undefined;
  205. this.system.removeConstraint(this.constraint);
  206. this.constraint = null;
  207. },
  208. onHit: function onHit(evt) {
  209. var hitEl = evt.detail.el;
  210. // If the element is already grabbed (it could be grabbed by another controller).
  211. // If the hand is not grabbing the element does not stick.
  212. // If we're already grabbing something you can't grab again.
  213. if (!hitEl || hitEl.is(this.GRABBED_STATE) || !this.grabbing || this.hitEl) {
  214. return;
  215. }
  216. hitEl.addState(this.GRABBED_STATE);
  217. this.hitEl = hitEl;
  218. this.constraint = new CANNON.LockConstraint(this.el.body, hitEl.body);
  219. this.system.addConstraint(this.constraint);
  220. }
  221. });
  222. },{}],5:[function(require,module,exports){
  223. 'use strict';
  224. require('./checkpoint');
  225. require('./cube-env-map');
  226. require('./grab');
  227. require('./jump-ability');
  228. require('./kinematic-body');
  229. require('./mesh-smooth');
  230. require('./normal-material');
  231. require('./sphere-collider');
  232. },{"./checkpoint":2,"./cube-env-map":3,"./grab":4,"./jump-ability":6,"./kinematic-body":7,"./mesh-smooth":8,"./normal-material":9,"./sphere-collider":10}],6:[function(require,module,exports){
  233. 'use strict';
  234. var ACCEL_G = -9.8,
  235. // m/s^2
  236. EASING = -15; // m/s^2
  237. /**
  238. * Jump ability.
  239. */
  240. module.exports = AFRAME.registerComponent('jump-ability', {
  241. dependencies: ['velocity'],
  242. /* Schema
  243. ——————————————————————————————————————————————*/
  244. schema: {
  245. on: { default: 'keydown:Space gamepadbuttondown:0' },
  246. playerHeight: { default: 1.764 },
  247. maxJumps: { default: 1 },
  248. distance: { default: 5 },
  249. debug: { default: false }
  250. },
  251. init: function init() {
  252. this.velocity = 0;
  253. this.numJumps = 0;
  254. var beginJump = this.beginJump.bind(this),
  255. events = this.data.on.split(' ');
  256. this.bindings = {};
  257. for (var i = 0; i < events.length; i++) {
  258. this.bindings[events[i]] = beginJump;
  259. this.el.addEventListener(events[i], beginJump);
  260. }
  261. this.bindings.collide = this.onCollide.bind(this);
  262. this.el.addEventListener('collide', this.bindings.collide);
  263. },
  264. remove: function remove() {
  265. for (var event in this.bindings) {
  266. if (this.bindings.hasOwnProperty(event)) {
  267. this.el.removeEventListener(event, this.bindings[event]);
  268. delete this.bindings[event];
  269. }
  270. }
  271. this.el.removeEventListener('collide', this.bindings.collide);
  272. delete this.bindings.collide;
  273. },
  274. beginJump: function beginJump() {
  275. if (this.numJumps < this.data.maxJumps) {
  276. var data = this.data,
  277. initialVelocity = Math.sqrt(-2 * data.distance * (ACCEL_G + EASING)),
  278. v = this.el.getAttribute('velocity');
  279. this.el.setAttribute('velocity', { x: v.x, y: initialVelocity, z: v.z });
  280. this.numJumps++;
  281. this.el.emit('jumpstart');
  282. }
  283. },
  284. onCollide: function onCollide() {
  285. if (this.numJumps > 0) this.el.emit('jumpend');
  286. this.numJumps = 0;
  287. }
  288. });
  289. },{}],7:[function(require,module,exports){
  290. 'use strict';
  291. /* global CANNON */
  292. /**
  293. * Kinematic body.
  294. *
  295. * Managed dynamic body, which moves but is not affected (directly) by the
  296. * physics engine. This is not a true kinematic body, in the sense that we are
  297. * letting the physics engine _compute_ collisions against it and selectively
  298. * applying those collisions to the object. The physics engine does not decide
  299. * the position/velocity/rotation of the element.
  300. *
  301. * Used for the camera object, because full physics simulation would create
  302. * movement that feels unnatural to the player. Bipedal movement does not
  303. * translate nicely to rigid body physics.
  304. *
  305. * See: http://www.learn-cocos2d.com/2013/08/physics-engine-platformer-terrible-idea/
  306. * And: http://oxleygamedev.blogspot.com/2011/04/player-physics-part-2.html
  307. */
  308. var EPS = 0.000001;
  309. module.exports = AFRAME.registerComponent('kinematic-body', {
  310. dependencies: ['velocity'],
  311. /*******************************************************************
  312. * Schema
  313. */
  314. schema: {
  315. mass: { default: 5 },
  316. radius: { default: 1.3 },
  317. userHeight: { default: 1.6 },
  318. linearDamping: { default: 0.05 },
  319. enableSlopes: { default: true }
  320. },
  321. /*******************************************************************
  322. * Lifecycle
  323. */
  324. init: function init() {
  325. this.system = this.el.sceneEl.systems.physics;
  326. this.system.addComponent(this);
  327. var el = this.el,
  328. data = this.data,
  329. position = new CANNON.Vec3().copy(el.getAttribute('position'));
  330. this.body = new CANNON.Body({
  331. material: this.system.getMaterial('staticMaterial'),
  332. position: position,
  333. mass: data.mass,
  334. linearDamping: data.linearDamping,
  335. fixedRotation: true
  336. });
  337. this.body.addShape(new CANNON.Sphere(data.radius), new CANNON.Vec3(0, data.radius - data.height, 0));
  338. this.body.el = this.el;
  339. this.el.body = this.body;
  340. this.system.addBody(this.body);
  341. if (el.hasAttribute('wasd-controls')) {
  342. console.warn('[kinematic-body] Not compatible with wasd-controls, use movement-controls.');
  343. }
  344. },
  345. remove: function remove() {
  346. this.system.removeBody(this.body);
  347. this.system.removeComponent(this);
  348. delete this.el.body;
  349. },
  350. /*******************************************************************
  351. * Update
  352. */
  353. /**
  354. * Checks CANNON.World for collisions and attempts to apply them to the
  355. * element automatically, in a player-friendly way.
  356. *
  357. * There's extra logic for horizontal surfaces here. The basic requirements:
  358. * (1) Only apply gravity when not in contact with _any_ horizontal surface.
  359. * (2) When moving, project the velocity against exactly one ground surface.
  360. * If in contact with two ground surfaces (e.g. ground + ramp), choose
  361. * the one that collides with current velocity, if any.
  362. */
  363. beforeStep: function beforeStep(t, dt) {
  364. if (!dt) return;
  365. var el = this.el;
  366. var body = this.body;
  367. body.velocity.copy(el.getAttribute('velocity'));
  368. body.position.copy(el.getAttribute('position'));
  369. body.position.y += this.data.userHeight;
  370. },
  371. step: function () {
  372. var velocity = new THREE.Vector3(),
  373. normalizedVelocity = new THREE.Vector3(),
  374. currentSurfaceNormal = new THREE.Vector3(),
  375. groundNormal = new THREE.Vector3();
  376. return function (t, dt) {
  377. if (!dt) return;
  378. var body = this.body,
  379. data = this.data,
  380. didCollide = false,
  381. height = void 0,
  382. groundHeight = -Infinity,
  383. groundBody = void 0,
  384. contacts = this.system.getContacts();
  385. dt = Math.min(dt, this.system.data.maxInterval * 1000);
  386. groundNormal.set(0, 0, 0);
  387. velocity.copy(this.el.getAttribute('velocity'));
  388. body.velocity.copy(velocity);
  389. for (var i = 0, contact; contact = contacts[i]; i++) {
  390. // 1. Find any collisions involving this element. Get the contact
  391. // normal, and make sure it's oriented _out_ of the other object and
  392. // enabled (body.collisionReponse is true for both bodies)
  393. if (!contact.enabled) {
  394. continue;
  395. }
  396. if (body.id === contact.bi.id) {
  397. contact.ni.negate(currentSurfaceNormal);
  398. } else if (body.id === contact.bj.id) {
  399. currentSurfaceNormal.copy(contact.ni);
  400. } else {
  401. continue;
  402. }
  403. didCollide = body.velocity.dot(currentSurfaceNormal) < -EPS;
  404. if (didCollide && currentSurfaceNormal.y <= 0.5) {
  405. // 2. If current trajectory attempts to move _through_ another
  406. // object, project the velocity against the collision plane to
  407. // prevent passing through.
  408. velocity = velocity.projectOnPlane(currentSurfaceNormal);
  409. } else if (currentSurfaceNormal.y > 0.5) {
  410. // 3. If in contact with something roughly horizontal (+/- 45º) then
  411. // consider that the current ground. Only the highest qualifying
  412. // ground is retained.
  413. height = body.id === contact.bi.id ? Math.abs(contact.rj.y + contact.bj.position.y) : Math.abs(contact.ri.y + contact.bi.position.y);
  414. if (height > groundHeight) {
  415. groundHeight = height;
  416. groundNormal.copy(currentSurfaceNormal);
  417. groundBody = body.id === contact.bi.id ? contact.bj : contact.bi;
  418. }
  419. }
  420. }
  421. normalizedVelocity.copy(velocity).normalize();
  422. if (groundBody && normalizedVelocity.y < 0.5) {
  423. if (!data.enableSlopes) {
  424. groundNormal.set(0, 1, 0);
  425. } else if (groundNormal.y < 1 - EPS) {
  426. groundNormal.copy(this.raycastToGround(groundBody, groundNormal));
  427. }
  428. // 4. Project trajectory onto the top-most ground object, unless
  429. // trajectory is > 45º.
  430. velocity = velocity.projectOnPlane(groundNormal);
  431. } else if (this.system.driver.world) {
  432. // 5. If not in contact with anything horizontal, apply world gravity.
  433. // TODO - Why is the 4x scalar necessary.
  434. // NOTE: Does not work if physics runs on a worker.
  435. velocity.add(this.system.driver.world.gravity.scale(dt * 4.0 / 1000));
  436. }
  437. // 6. If the ground surface has a velocity, apply it directly to current
  438. // position, not velocity, to preserve relative velocity.
  439. if (groundBody && groundBody.el && groundBody.el.components.velocity) {
  440. var groundVelocity = groundBody.el.getAttribute('velocity');
  441. body.position.copy({
  442. x: body.position.x + groundVelocity.x * dt / 1000,
  443. y: body.position.y + groundVelocity.y * dt / 1000,
  444. z: body.position.z + groundVelocity.z * dt / 1000
  445. });
  446. }
  447. body.velocity.copy(velocity);
  448. body.position.y -= data.userHeight;
  449. this.el.setAttribute('velocity', body.velocity);
  450. this.el.setAttribute('position', body.position);
  451. };
  452. }(),
  453. /**
  454. * When walking on complex surfaces (trimeshes, borders between two shapes),
  455. * the collision normals returned for the player sphere can be very
  456. * inconsistent. To address this, raycast straight down, find the collision
  457. * normal, and return whichever normal is more vertical.
  458. * @param {CANNON.Body} groundBody
  459. * @param {CANNON.Vec3} groundNormal
  460. * @return {CANNON.Vec3}
  461. */
  462. raycastToGround: function raycastToGround(groundBody, groundNormal) {
  463. var ray = void 0,
  464. hitNormal = void 0,
  465. vFrom = this.body.position,
  466. vTo = this.body.position.clone();
  467. vTo.y -= this.data.height;
  468. ray = new CANNON.Ray(vFrom, vTo);
  469. ray._updateDirection(); // TODO - Report bug.
  470. ray.intersectBody(groundBody);
  471. if (!ray.hasHit) return groundNormal;
  472. // Compare ABS, in case we're projecting against the inside of the face.
  473. hitNormal = ray.result.hitNormalWorld;
  474. return Math.abs(hitNormal.y) > Math.abs(groundNormal.y) ? hitNormal : groundNormal;
  475. }
  476. });
  477. },{}],8:[function(require,module,exports){
  478. 'use strict';
  479. /**
  480. * Apply this component to models that looks "blocky", to have Three.js compute
  481. * vertex normals on the fly for a "smoother" look.
  482. */
  483. module.exports = AFRAME.registerComponent('mesh-smooth', {
  484. init: function init() {
  485. this.el.addEventListener('model-loaded', function (e) {
  486. e.detail.model.traverse(function (node) {
  487. if (node.isMesh) node.geometry.computeVertexNormals();
  488. });
  489. });
  490. }
  491. });
  492. },{}],9:[function(require,module,exports){
  493. 'use strict';
  494. /**
  495. * Recursively applies a MeshNormalMaterial to the entity, such that
  496. * face colors are determined by their orientation. Helpful for
  497. * debugging geometry
  498. */
  499. module.exports = AFRAME.registerComponent('normal-material', {
  500. init: function init() {
  501. this.material = new THREE.MeshNormalMaterial({ flatShading: true });
  502. this.applyMaterial = this.applyMaterial.bind(this);
  503. this.el.addEventListener('object3dset', this.applyMaterial);
  504. },
  505. remove: function remove() {
  506. this.el.removeEventListener('object3dset', this.applyMaterial);
  507. },
  508. applyMaterial: function applyMaterial() {
  509. var _this = this;
  510. this.el.object3D.traverse(function (node) {
  511. if (node.isMesh) node.material = _this.material;
  512. });
  513. }
  514. });
  515. },{}],10:[function(require,module,exports){
  516. 'use strict';
  517. /**
  518. * Based on aframe/examples/showcase/tracked-controls.
  519. *
  520. * Implement bounding sphere collision detection for entities with a mesh.
  521. * Sets the specified state on the intersected entities.
  522. *
  523. * @property {string} objects - Selector of the entities to test for collision.
  524. * @property {string} state - State to set on collided entities.
  525. *
  526. */
  527. module.exports = AFRAME.registerComponent('sphere-collider', {
  528. schema: {
  529. objects: { default: '' },
  530. state: { default: 'collided' },
  531. radius: { default: 0.05 },
  532. watch: { default: true }
  533. },
  534. init: function init() {
  535. /** @type {MutationObserver} */
  536. this.observer = null;
  537. /** @type {Array<Element>} Elements to watch for collisions. */
  538. this.els = [];
  539. /** @type {Array<Element>} Elements currently in collision state. */
  540. this.collisions = [];
  541. this.handleHit = this.handleHit.bind(this);
  542. this.handleHitEnd = this.handleHitEnd.bind(this);
  543. },
  544. remove: function remove() {
  545. this.pause();
  546. },
  547. play: function play() {
  548. var sceneEl = this.el.sceneEl;
  549. if (this.data.watch) {
  550. this.observer = new MutationObserver(this.update.bind(this, null));
  551. this.observer.observe(sceneEl, { childList: true, subtree: true });
  552. }
  553. },
  554. pause: function pause() {
  555. if (this.observer) {
  556. this.observer.disconnect();
  557. this.observer = null;
  558. }
  559. },
  560. /**
  561. * Update list of entities to test for collision.
  562. */
  563. update: function update() {
  564. var data = this.data;
  565. var objectEls = void 0;
  566. // Push entities into list of els to intersect.
  567. if (data.objects) {
  568. objectEls = this.el.sceneEl.querySelectorAll(data.objects);
  569. } else {
  570. // If objects not defined, intersect with everything.
  571. objectEls = this.el.sceneEl.children;
  572. }
  573. // Convert from NodeList to Array
  574. this.els = Array.prototype.slice.call(objectEls);
  575. },
  576. tick: function () {
  577. var position = new THREE.Vector3(),
  578. meshPosition = new THREE.Vector3(),
  579. colliderScale = new THREE.Vector3(),
  580. distanceMap = new Map();
  581. return function () {
  582. var el = this.el,
  583. data = this.data,
  584. mesh = el.getObject3D('mesh'),
  585. collisions = [];
  586. var colliderRadius = void 0;
  587. if (!mesh) {
  588. return;
  589. }
  590. distanceMap.clear();
  591. position.copy(el.object3D.getWorldPosition());
  592. el.object3D.getWorldScale(colliderScale);
  593. colliderRadius = data.radius * scaleFactor(colliderScale);
  594. // Update collision list.
  595. this.els.forEach(intersect);
  596. // Emit events and add collision states, in order of distance.
  597. collisions.sort(function (a, b) {
  598. return distanceMap.get(a) > distanceMap.get(b) ? 1 : -1;
  599. }).forEach(this.handleHit);
  600. // Remove collision state from current element.
  601. if (collisions.length === 0) {
  602. el.emit('hit', { el: null });
  603. }
  604. // Remove collision state from other elements.
  605. this.collisions.filter(function (el) {
  606. return !distanceMap.has(el);
  607. }).forEach(this.handleHitEnd);
  608. // Store new collisions
  609. this.collisions = collisions;
  610. // Bounding sphere collision detection
  611. function intersect(el) {
  612. var radius = void 0,
  613. mesh = void 0,
  614. distance = void 0,
  615. box = void 0,
  616. extent = void 0,
  617. size = void 0;
  618. if (!el.isEntity) {
  619. return;
  620. }
  621. mesh = el.getObject3D('mesh');
  622. if (!mesh) {
  623. return;
  624. }
  625. box = new THREE.Box3().setFromObject(mesh);
  626. size = box.getSize();
  627. extent = Math.max(size.x, size.y, size.z) / 2;
  628. radius = Math.sqrt(2 * extent * extent);
  629. box.getCenter(meshPosition);
  630. if (!radius) {
  631. return;
  632. }
  633. distance = position.distanceTo(meshPosition);
  634. if (distance < radius + colliderRadius) {
  635. collisions.push(el);
  636. distanceMap.set(el, distance);
  637. }
  638. }
  639. // use max of scale factors to maintain bounding sphere collision
  640. function scaleFactor(scaleVec) {
  641. return Math.max.apply(null, scaleVec.toArray());
  642. }
  643. };
  644. }(),
  645. handleHit: function handleHit(targetEl) {
  646. targetEl.emit('hit');
  647. targetEl.addState(this.data.state);
  648. this.el.emit('hit', { el: targetEl });
  649. },
  650. handleHitEnd: function handleHitEnd(targetEl) {
  651. targetEl.emit('hitend');
  652. targetEl.removeState(this.data.state);
  653. this.el.emit('hitend', { el: targetEl });
  654. }
  655. });
  656. },{}]},{},[1]);