Source: interaction/Interaction.js

interaction/Interaction.js

  1. import Ticker from '../utils/Ticker';
  2. import InteractionManager from './InteractionManager';
  3. /**
  4. * The interaction manager deals with mouse, touch and pointer events. Any DisplayObject can be interactive
  5. * if its interactive parameter is set to true
  6. * This manager also supports multitouch.
  7. *
  8. * reference to [pixi.js](http://www.pixijs.com/) impl
  9. *
  10. * @example
  11. * import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
  12. * import { Interaction } from 'three.interaction';
  13. * const renderer = new WebGLRenderer({ canvas: canvasElement });
  14. * const scene = new Scene();
  15. * const camera = new PerspectiveCamera(60, width / height, 0.1, 100);
  16. *
  17. * const interaction = new Interaction(renderer, scene, camera);
  18. * // then you can bind every interaction event with any mesh which you had `add` into `scene` before
  19. * const cube = new Mesh(
  20. * new BoxGeometry(1, 1, 1),
  21. * new MeshBasicMaterial({ color: 0xffffff }),
  22. * );
  23. * scene.add(cube);
  24. * cube.on('touchstart', ev => {
  25. * console.log(ev);
  26. * });
  27. *
  28. * cube.on('mousedown', ev => {
  29. * console.log(ev);
  30. * });
  31. *
  32. * cube.on('pointerdown', ev => {
  33. * console.log(ev);
  34. * });
  35. * // and so on ...
  36. *
  37. * // you can also listen on parent-node or any display-tree node,
  38. * // source event will bubble up along with display-tree.
  39. * // you can stop the bubble-up by invoke ev.stopPropagation function.
  40. * scene.on('touchstart', ev => {
  41. * console.log(ev);
  42. * })
  43. *
  44. * @class
  45. * @extends InteractionManager
  46. */
  47. class Interaction extends InteractionManager {
  48. /**
  49. * @param {WebGLRenderer} renderer - A reference to the current renderer
  50. * @param {Scene} scene - A reference to the current scene
  51. * @param {Camera} camera - A reference to the current camera
  52. * @param {Object} [options] - The options for the manager.
  53. * @param {Boolean} [options.autoPreventDefault=false] - Should the manager automatically prevent default browser actions.
  54. * @param {Boolean} [options.autoAttach=false] - Should the manager automatically attach target element.
  55. * @param {Number} [options.interactionFrequency=10] - Frequency increases the interaction events will be checked.
  56. */
  57. constructor(renderer, scene, camera, options) {
  58. options = Object.assign({ autoAttach: false }, options);
  59. super(renderer, scene, camera, options);
  60. /**
  61. * a ticker
  62. *
  63. * @private
  64. * @member {Ticker}
  65. */
  66. this.ticker = new Ticker();
  67. /**
  68. * update for some over event
  69. *
  70. * @private
  71. */
  72. this.update = this.update.bind(this);
  73. this.on('addevents', () => {
  74. this.ticker.on('tick', this.update);
  75. });
  76. this.on('removeevents', () => {
  77. this.ticker.off('tick', this.update);
  78. });
  79. this.setTargetElement(this.renderer.domElement);
  80. }
  81. }
  82. export default Interaction;