Wireframe.js 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108
  1. import {
  2. InstancedInterleavedBuffer,
  3. InterleavedBufferAttribute,
  4. Mesh,
  5. Vector3,
  6. Vector4
  7. } from 'three';
  8. import { LineSegmentsGeometry } from '../lines/LineSegmentsGeometry.js';
  9. import { LineMaterial } from '../lines/LineMaterial.js';
  10. const _start = new Vector3();
  11. const _end = new Vector3();
  12. const _viewport = new Vector4();
  13. /**
  14. * A class for creating wireframes based on wide lines.
  15. *
  16. * This module can only be used with {@link WebGLRenderer}. When using {@link WebGPURenderer},
  17. * import the class from `lines/webgpu/Wireframe.js`.
  18. *
  19. * ```js
  20. * const geometry = new THREE.IcosahedronGeometry();
  21. * const wireframeGeometry = new WireframeGeometry2( geo );
  22. *
  23. * const wireframe = new Wireframe( wireframeGeometry, material );
  24. * scene.add( wireframe );
  25. * ```
  26. *
  27. * @augments Mesh
  28. * @three_import import { Wireframe } from 'three/addons/lines/Wireframe.js';
  29. */
  30. class Wireframe extends Mesh {
  31. /**
  32. * Constructs a new wireframe.
  33. *
  34. * @param {LineSegmentsGeometry} [geometry] - The line geometry.
  35. * @param {LineMaterial} [material] - The line material.
  36. */
  37. constructor( geometry = new LineSegmentsGeometry(), material = new LineMaterial( { color: Math.random() * 0xffffff } ) ) {
  38. super( geometry, material );
  39. /**
  40. * This flag can be used for type testing.
  41. *
  42. * @type {boolean}
  43. * @readonly
  44. * @default true
  45. */
  46. this.isWireframe = true;
  47. this.type = 'Wireframe';
  48. }
  49. /**
  50. * Computes an array of distance values which are necessary for rendering dashed lines.
  51. * For each vertex in the geometry, the method calculates the cumulative length from the
  52. * current point to the very beginning of the line.
  53. *
  54. * @return {Wireframe} A reference to this instance.
  55. */
  56. computeLineDistances() {
  57. // for backwards-compatibility, but could be a method of LineSegmentsGeometry...
  58. const geometry = this.geometry;
  59. const instanceStart = geometry.attributes.instanceStart;
  60. const instanceEnd = geometry.attributes.instanceEnd;
  61. const lineDistances = new Float32Array( 2 * instanceStart.count );
  62. for ( let i = 0, j = 0, l = instanceStart.count; i < l; i ++, j += 2 ) {
  63. _start.fromBufferAttribute( instanceStart, i );
  64. _end.fromBufferAttribute( instanceEnd, i );
  65. lineDistances[ j ] = ( j === 0 ) ? 0 : lineDistances[ j - 1 ];
  66. lineDistances[ j + 1 ] = lineDistances[ j ] + _start.distanceTo( _end );
  67. }
  68. const instanceDistanceBuffer = new InstancedInterleavedBuffer( lineDistances, 2, 1 ); // d0, d1
  69. geometry.setAttribute( 'instanceDistanceStart', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 0 ) ); // d0
  70. geometry.setAttribute( 'instanceDistanceEnd', new InterleavedBufferAttribute( instanceDistanceBuffer, 1, 1 ) ); // d1
  71. return this;
  72. }
  73. onBeforeRender( renderer ) {
  74. const uniforms = this.material.uniforms;
  75. if ( uniforms && uniforms.resolution ) {
  76. renderer.getViewport( _viewport );
  77. this.material.uniforms.resolution.value.set( _viewport.z, _viewport.w );
  78. }
  79. }
  80. }
  81. export { Wireframe };