TubePainter.js 4.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. ( function () {
  2. function TubePainter() {
  3. const BUFFER_SIZE = 1000000 * 3;
  4. const positions = new THREE.BufferAttribute( new Float32Array( BUFFER_SIZE ), 3 );
  5. positions.usage = THREE.DynamicDrawUsage;
  6. const normals = new THREE.BufferAttribute( new Float32Array( BUFFER_SIZE ), 3 );
  7. normals.usage = THREE.DynamicDrawUsage;
  8. const colors = new THREE.BufferAttribute( new Float32Array( BUFFER_SIZE ), 3 );
  9. colors.usage = THREE.DynamicDrawUsage;
  10. const geometry = new THREE.BufferGeometry();
  11. geometry.setAttribute( 'position', positions );
  12. geometry.setAttribute( 'normal', normals );
  13. geometry.setAttribute( 'color', colors );
  14. geometry.drawRange.count = 0;
  15. const material = new THREE.MeshStandardMaterial( {
  16. vertexColors: true
  17. } );
  18. const mesh = new THREE.Mesh( geometry, material );
  19. mesh.frustumCulled = false; //
  20. function getPoints( size ) {
  21. const PI2 = Math.PI * 2;
  22. const sides = 10;
  23. const array = [];
  24. const radius = 0.01 * size;
  25. for ( let i = 0; i < sides; i ++ ) {
  26. const angle = i / sides * PI2;
  27. array.push( new THREE.Vector3( Math.sin( angle ) * radius, Math.cos( angle ) * radius, 0 ) );
  28. }
  29. return array;
  30. } //
  31. const vector1 = new THREE.Vector3();
  32. const vector2 = new THREE.Vector3();
  33. const vector3 = new THREE.Vector3();
  34. const vector4 = new THREE.Vector3();
  35. const color = new THREE.Color( 0xffffff );
  36. let size = 1;
  37. function stroke( position1, position2, matrix1, matrix2 ) {
  38. if ( position1.distanceToSquared( position2 ) === 0 ) return;
  39. let count = geometry.drawRange.count;
  40. const points = getPoints( size );
  41. for ( let i = 0, il = points.length; i < il; i ++ ) {
  42. const vertex1 = points[ i ];
  43. const vertex2 = points[ ( i + 1 ) % il ]; // positions
  44. vector1.copy( vertex1 ).applyMatrix4( matrix2 ).add( position2 );
  45. vector2.copy( vertex2 ).applyMatrix4( matrix2 ).add( position2 );
  46. vector3.copy( vertex2 ).applyMatrix4( matrix1 ).add( position1 );
  47. vector4.copy( vertex1 ).applyMatrix4( matrix1 ).add( position1 );
  48. vector1.toArray( positions.array, ( count + 0 ) * 3 );
  49. vector2.toArray( positions.array, ( count + 1 ) * 3 );
  50. vector4.toArray( positions.array, ( count + 2 ) * 3 );
  51. vector2.toArray( positions.array, ( count + 3 ) * 3 );
  52. vector3.toArray( positions.array, ( count + 4 ) * 3 );
  53. vector4.toArray( positions.array, ( count + 5 ) * 3 ); // normals
  54. vector1.copy( vertex1 ).applyMatrix4( matrix2 ).normalize();
  55. vector2.copy( vertex2 ).applyMatrix4( matrix2 ).normalize();
  56. vector3.copy( vertex2 ).applyMatrix4( matrix1 ).normalize();
  57. vector4.copy( vertex1 ).applyMatrix4( matrix1 ).normalize();
  58. vector1.toArray( normals.array, ( count + 0 ) * 3 );
  59. vector2.toArray( normals.array, ( count + 1 ) * 3 );
  60. vector4.toArray( normals.array, ( count + 2 ) * 3 );
  61. vector2.toArray( normals.array, ( count + 3 ) * 3 );
  62. vector3.toArray( normals.array, ( count + 4 ) * 3 );
  63. vector4.toArray( normals.array, ( count + 5 ) * 3 ); // colors
  64. color.toArray( colors.array, ( count + 0 ) * 3 );
  65. color.toArray( colors.array, ( count + 1 ) * 3 );
  66. color.toArray( colors.array, ( count + 2 ) * 3 );
  67. color.toArray( colors.array, ( count + 3 ) * 3 );
  68. color.toArray( colors.array, ( count + 4 ) * 3 );
  69. color.toArray( colors.array, ( count + 5 ) * 3 );
  70. count += 6;
  71. }
  72. geometry.drawRange.count = count;
  73. } //
  74. const up = new THREE.Vector3( 0, 1, 0 );
  75. const point1 = new THREE.Vector3();
  76. const point2 = new THREE.Vector3();
  77. const matrix1 = new THREE.Matrix4();
  78. const matrix2 = new THREE.Matrix4();
  79. function moveTo( position ) {
  80. point1.copy( position );
  81. matrix1.lookAt( point2, point1, up );
  82. point2.copy( position );
  83. matrix2.copy( matrix1 );
  84. }
  85. function lineTo( position ) {
  86. point1.copy( position );
  87. matrix1.lookAt( point2, point1, up );
  88. stroke( point1, point2, matrix1, matrix2 );
  89. point2.copy( point1 );
  90. matrix2.copy( matrix1 );
  91. }
  92. function setSize( value ) {
  93. size = value;
  94. } //
  95. let count = 0;
  96. function update() {
  97. const start = count;
  98. const end = geometry.drawRange.count;
  99. if ( start === end ) return;
  100. positions.updateRange.offset = start * 3;
  101. positions.updateRange.count = ( end - start ) * 3;
  102. positions.needsUpdate = true;
  103. normals.updateRange.offset = start * 3;
  104. normals.updateRange.count = ( end - start ) * 3;
  105. normals.needsUpdate = true;
  106. colors.updateRange.offset = start * 3;
  107. colors.updateRange.count = ( end - start ) * 3;
  108. colors.needsUpdate = true;
  109. count = geometry.drawRange.count;
  110. }
  111. return {
  112. mesh: mesh,
  113. moveTo: moveTo,
  114. lineTo: lineTo,
  115. setSize: setSize,
  116. update: update
  117. };
  118. }
  119. THREE.TubePainter = TubePainter;
  120. } )();