VertexNormalsHelper.js 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155
  1. import {
  2. BufferGeometry,
  3. Float32BufferAttribute,
  4. LineSegments,
  5. LineBasicMaterial,
  6. Matrix3,
  7. Vector3
  8. } from 'three';
  9. const _v1 = new Vector3();
  10. const _v2 = new Vector3();
  11. const _normalMatrix = new Matrix3();
  12. /**
  13. * Visualizes an object's vertex normals.
  14. *
  15. * Requires that normals have been specified in the geometry as a buffer attribute or
  16. * have been calculated using {@link BufferGeometry#computeVertexNormals}.
  17. * ```js
  18. * const geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
  19. * const material = new THREE.MeshStandardMaterial();
  20. * const mesh = new THREE.Mesh( geometry, material );
  21. * scene.add( mesh );
  22. *
  23. * const helper = new VertexNormalsHelper( mesh, 1, 0xff0000 );
  24. * scene.add( helper );
  25. * ```
  26. *
  27. * @augments LineSegments
  28. * @three_import import { VertexNormalsHelper } from 'three/addons/helpers/VertexNormalsHelper.js';
  29. */
  30. class VertexNormalsHelper extends LineSegments {
  31. /**
  32. * Constructs a new vertex normals helper.
  33. *
  34. * @param {Object3D} object - The object for which to visualize vertex normals.
  35. * @param {number} [size=1] - The helper's size.
  36. * @param {number|Color|string} [color=0xff0000] - The helper's color.
  37. */
  38. constructor( object, size = 1, color = 0xff0000 ) {
  39. const geometry = new BufferGeometry();
  40. const nNormals = object.geometry.attributes.normal.count;
  41. const positions = new Float32BufferAttribute( nNormals * 2 * 3, 3 );
  42. geometry.setAttribute( 'position', positions );
  43. super( geometry, new LineBasicMaterial( { color, toneMapped: false } ) );
  44. /**
  45. * The object for which to visualize vertex normals.
  46. *
  47. * @type {Object3D}
  48. */
  49. this.object = object;
  50. /**
  51. * The helper's size.
  52. *
  53. * @type {number}
  54. * @default 1
  55. */
  56. this.size = size;
  57. this.type = 'VertexNormalsHelper';
  58. /**
  59. * Overwritten and set to `false` since the object's world transformation
  60. * is encoded in the helper's geometry data.
  61. *
  62. * @type {boolean}
  63. * @default false
  64. */
  65. this.matrixAutoUpdate = false;
  66. /**
  67. * This flag can be used for type testing.
  68. *
  69. * @type {boolean}
  70. * @readonly
  71. * @default true
  72. */
  73. this.isVertexNormalsHelper = true;
  74. this.update();
  75. }
  76. /**
  77. * Updates the vertex normals preview based on the object's world transform.
  78. */
  79. update() {
  80. this.object.updateMatrixWorld( true );
  81. _normalMatrix.getNormalMatrix( this.object.matrixWorld );
  82. const matrixWorld = this.object.matrixWorld;
  83. const position = this.geometry.attributes.position;
  84. //
  85. const objGeometry = this.object.geometry;
  86. if ( objGeometry ) {
  87. const objPos = objGeometry.attributes.position;
  88. const objNorm = objGeometry.attributes.normal;
  89. let idx = 0;
  90. // for simplicity, ignore index and drawcalls, and render every normal
  91. for ( let j = 0, jl = objPos.count; j < jl; j ++ ) {
  92. _v1.fromBufferAttribute( objPos, j ).applyMatrix4( matrixWorld );
  93. _v2.fromBufferAttribute( objNorm, j );
  94. _v2.applyMatrix3( _normalMatrix ).normalize().multiplyScalar( this.size ).add( _v1 );
  95. position.setXYZ( idx, _v1.x, _v1.y, _v1.z );
  96. idx = idx + 1;
  97. position.setXYZ( idx, _v2.x, _v2.y, _v2.z );
  98. idx = idx + 1;
  99. }
  100. }
  101. position.needsUpdate = true;
  102. }
  103. /**
  104. * Frees the GPU-related resources allocated by this instance. Call this
  105. * method whenever this instance is no longer used in your app.
  106. */
  107. dispose() {
  108. this.geometry.dispose();
  109. this.material.dispose();
  110. }
  111. }
  112. export { VertexNormalsHelper };