PaintViveController.js 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. /**
  2. * @author mrdoob / http://mrdoob.com
  3. */
  4. THREE.PaintViveController = function ( id ) {
  5. THREE.ViveController.call( this, id );
  6. var PI2 = Math.PI * 2;
  7. var MODES = { COLOR: 0, SIZE: 1 };
  8. var mode = MODES.COLOR;
  9. var color = new THREE.Color( 1, 1, 1 );
  10. var size = 1.0;
  11. //
  12. function generateHueTexture() {
  13. var canvas = document.createElement( 'canvas' );
  14. canvas.width = 256;
  15. canvas.height = 256;
  16. var context = canvas.getContext( '2d' );
  17. var imageData = context.getImageData( 0, 0, 256, 256 );
  18. var data = imageData.data;
  19. for ( var i = 0, j = 0; i < data.length; i += 4, j ++ ) {
  20. var x = ( ( j % 256 ) / 256 ) - 0.5;
  21. var y = ( Math.floor( j / 256 ) / 256 ) - 0.5;
  22. color.setHSL( Math.atan2( y, x ) / PI2, 1,( 0.5 - Math.sqrt( x * x + y * y ) ) * 2.0 );
  23. data[ i + 0 ] = color.r * 256;
  24. data[ i + 1 ] = color.g * 256;
  25. data[ i + 2 ] = color.b * 256;
  26. data[ i + 3 ] = 256;
  27. }
  28. context.putImageData( imageData, 0, 0 );
  29. return new THREE.CanvasTexture( canvas );
  30. }
  31. var geometry = new THREE.CircleGeometry( 1, 32 );
  32. var material = new THREE.MeshBasicMaterial( { map: generateHueTexture() } );
  33. var mesh = new THREE.Mesh( geometry, material );
  34. mesh.position.set( 0, 0.005, 0.0495 );
  35. mesh.rotation.x = - 1.45;
  36. mesh.scale.setScalar( 0.02 );
  37. this.add( mesh );
  38. var geometry = new THREE.IcosahedronGeometry( 0.1, 2 );
  39. var material = new THREE.MeshBasicMaterial();
  40. material.color = color;
  41. var ball = new THREE.Mesh( geometry, material );
  42. mesh.add( ball );
  43. function onAxisChanged( event ) {
  44. if ( this.getButtonState( 'thumbpad' ) === false ) return;
  45. var x = event.axes[ 0 ] / 2.0;
  46. var y = - event.axes[ 1 ] / 2.0;
  47. if ( mode === MODES.COLOR ) {
  48. color.setHSL( Math.atan2( y, x ) / PI2, 1, ( 0.5 - Math.sqrt( x * x + y * y ) ) * 2.0 );
  49. ball.position.x = event.axes[ 0 ];
  50. ball.position.y = event.axes[ 1 ];
  51. }
  52. if ( mode === MODES.SIZE ) {
  53. size = y + 1;
  54. }
  55. }
  56. function onGripsDown( event ) {
  57. if ( mode === MODES.COLOR ) {
  58. mode = MODES.SIZE;
  59. mesh.visible = false;
  60. return;
  61. }
  62. if ( mode === MODES.SIZE ) {
  63. mode = MODES.COLOR;
  64. mesh.visible = true;
  65. return;
  66. }
  67. }
  68. this.getColor = function () { return color; };
  69. this.getSize = function () { return size; };
  70. this.addEventListener( 'axischanged', onAxisChanged );
  71. this.addEventListener( 'gripsdown', onGripsDown );
  72. };
  73. THREE.PaintViveController.prototype = Object.create( THREE.ViveController.prototype );
  74. THREE.PaintViveController.prototype.constructor = THREE.PaintViveController;