button.js 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384
  1. this.init = function(){
  2. this.height = this.height ? this.height : 0.3;
  3. this.width = this.width? this.width : 0.4;
  4. this.class = "clickable intersectable";
  5. this.baseColor = this.baseColor ? this.baseColor : 'white';
  6. this.hoverColor = this.hoverColor ? this.hoverColor : 'green';
  7. this.clickColor = this.clickColor ? this.clickColor : 'blue';
  8. let material = {
  9. "extends": "proxy/aframe/aMaterialComponent.vwf",
  10. "type": "component",
  11. "properties": {
  12. "transprent": true,
  13. "opacity": 0.3,
  14. "color": "white",
  15. "side": "double"
  16. }
  17. }
  18. let cursorListener = {
  19. "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
  20. "type": "component"
  21. }
  22. let raycasterListener = {
  23. "extends": "proxy/aframe/app-raycaster-listener-component.vwf",
  24. "type": "component"
  25. }
  26. let textNode = {
  27. "extends": "proxy/aframe/atext.vwf",
  28. "properties": {
  29. "value": this.text,
  30. "color": "white",
  31. "position": [-this.width/2, 0, 0],
  32. "width": this.width*10
  33. }
  34. }
  35. this.children.create('material', material);
  36. this.children.create('cursor-listener', cursorListener);
  37. this.children.create('raycaster-listener', raycasterListener);
  38. this.children.create('textNode', textNode);
  39. }
  40. this.intersectEventMethod = function(){
  41. this.material.opacity = 0.6;
  42. this.material.color = this.hoverColor
  43. }
  44. this.clearIntersectEventMethod = function(){
  45. this.material.opacity = 0.3;
  46. this.material.color = this.baseColor
  47. }
  48. this.mousedownAction = function(point, controllerID){
  49. this.triggerdownAction(point, controllerID);
  50. }
  51. this.mouseupAction = function(point, controllerID){
  52. this.triggerupAction(point, controllerID);
  53. }
  54. this.triggerdownAction = function(point, controllerID){
  55. this.material.color = this.clickColor;
  56. let target = this.target ? this.getScene().findNode(this.target) :
  57. this.parent;
  58. target.doButtonTriggerdownAction(this.id, controllerID, point);
  59. }
  60. this.triggerupAction = function(point, controllerID){
  61. this.material.color = this.baseColor;
  62. let target = this.target ? this.getScene().findNode(this.target) :
  63. this.parent;
  64. target.doButtonTriggerupAction(this.id, controllerID);
  65. }