项目作者: jasonChen1982

项目描述 :
three.js interaction toolkit, help you built an interaction event-system for three.js, binding interaction event like browser-dom
高级语言: JavaScript
项目地址: git://github.com/jasonChen1982/three.interaction.js.git
创建时间: 2017-11-24T07:50:09Z
项目社区:https://github.com/jasonChen1982/three.interaction.js

开源协议:

下载


three.interaction

npm
javascript style guide
Standard Version

a full-interaction event manager, help three.js binding interaction event more simple

install

  1. npm install -S three.interaction

usage

  1. import { Scene, PerspectiveCamera, WebGLRenderer, Mesh, BoxGeometry, MeshBasicMaterial } from 'three';
  2. import { Interaction } from 'three.interaction';
  3. const renderer = new WebGLRenderer({ canvas: canvasElement });
  4. const scene = new Scene();
  5. const camera = new PerspectiveCamera(60, width / height, 0.1, 100);
  6. // new a interaction, then you can add interaction-event with your free style
  7. const interaction = new Interaction(renderer, scene, camera);
  8. const cube = new Mesh(
  9. new BoxGeometry(1, 1, 1),
  10. new MeshBasicMaterial({ color: 0xffffff }),
  11. );
  12. scene.add(cube);
  13. cube.cursor = 'pointer';
  14. cube.on('click', function(ev) {});
  15. cube.on('touchstart', function(ev) {});
  16. cube.on('touchcancel', function(ev) {});
  17. cube.on('touchmove', function(ev) {});
  18. cube.on('touchend', function(ev) {});
  19. cube.on('mousedown', function(ev) {});
  20. cube.on('mouseout', function(ev) {});
  21. cube.on('mouseover', function(ev) {});
  22. cube.on('mousemove', function(ev) {});
  23. cube.on('mouseup', function(ev) {});
  24. // and so on ...
  25. /**
  26. * you can also listen on parent-node or any display-tree node,
  27. * source event will bubble up along with display-tree.
  28. * you can stop the bubble-up by invoke ev.stopPropagation function.
  29. */
  30. scene.on('touchstart', ev => {
  31. console.log(ev);
  32. })
  33. scene.on('touchmove', ev => {
  34. console.log(ev);
  35. })

Documentation

documentation

Examples

examples cube

examples cube overlap