UVsDebug.js 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. import {
  2. Vector2
  3. } from '../../../build/three.module.js';
  4. /**
  5. * tool for "unwrapping" and debugging three.js geometries UV mapping
  6. *
  7. * Sample usage:
  8. * document.body.appendChild( UVsDebug( new THREE.SphereGeometry( 10, 10, 10, 10 ) );
  9. *
  10. */
  11. function UVsDebug( geometry, size = 1024 ) {
  12. // handles wrapping of uv.x > 1 only
  13. const abc = 'abc';
  14. const a = new Vector2();
  15. const b = new Vector2();
  16. const uvs = [
  17. new Vector2(),
  18. new Vector2(),
  19. new Vector2()
  20. ];
  21. const face = [];
  22. const canvas = document.createElement( 'canvas' );
  23. const width = size; // power of 2 required for wrapping
  24. const height = size;
  25. canvas.width = width;
  26. canvas.height = height;
  27. const ctx = canvas.getContext( '2d' );
  28. ctx.lineWidth = 1;
  29. ctx.strokeStyle = 'rgb( 63, 63, 63 )';
  30. ctx.textAlign = 'center';
  31. // paint background white
  32. ctx.fillStyle = 'rgb( 255, 255, 255 )';
  33. ctx.fillRect( 0, 0, width, height );
  34. if ( geometry.isGeometry ) {
  35. console.error( 'THREE.UVsDebug no longer supports Geometry. Use THREE.BufferGeometry instead.' );
  36. return;
  37. } else {
  38. const index = geometry.index;
  39. const uvAttribute = geometry.attributes.uv;
  40. if ( index ) {
  41. // indexed geometry
  42. for ( let i = 0, il = index.count; i < il; i += 3 ) {
  43. face[ 0 ] = index.getX( i );
  44. face[ 1 ] = index.getX( i + 1 );
  45. face[ 2 ] = index.getX( i + 2 );
  46. uvs[ 0 ].fromBufferAttribute( uvAttribute, face[ 0 ] );
  47. uvs[ 1 ].fromBufferAttribute( uvAttribute, face[ 1 ] );
  48. uvs[ 2 ].fromBufferAttribute( uvAttribute, face[ 2 ] );
  49. processFace( face, uvs, i / 3 );
  50. }
  51. } else {
  52. // non-indexed geometry
  53. for ( let i = 0, il = uvAttribute.count; i < il; i += 3 ) {
  54. face[ 0 ] = i;
  55. face[ 1 ] = i + 1;
  56. face[ 2 ] = i + 2;
  57. uvs[ 0 ].fromBufferAttribute( uvAttribute, face[ 0 ] );
  58. uvs[ 1 ].fromBufferAttribute( uvAttribute, face[ 1 ] );
  59. uvs[ 2 ].fromBufferAttribute( uvAttribute, face[ 2 ] );
  60. processFace( face, uvs, i / 3 );
  61. }
  62. }
  63. }
  64. return canvas;
  65. function processFace( face, uvs, index ) {
  66. // draw contour of face
  67. ctx.beginPath();
  68. a.set( 0, 0 );
  69. for ( let j = 0, jl = uvs.length; j < jl; j ++ ) {
  70. const uv = uvs[ j ];
  71. a.x += uv.x;
  72. a.y += uv.y;
  73. if ( j === 0 ) {
  74. ctx.moveTo( uv.x * ( width - 2 ) + 0.5, ( 1 - uv.y ) * ( height - 2 ) + 0.5 );
  75. } else {
  76. ctx.lineTo( uv.x * ( width - 2 ) + 0.5, ( 1 - uv.y ) * ( height - 2 ) + 0.5 );
  77. }
  78. }
  79. ctx.closePath();
  80. ctx.stroke();
  81. // calculate center of face
  82. a.divideScalar( uvs.length );
  83. // label the face number
  84. ctx.font = '18px Arial';
  85. ctx.fillStyle = 'rgb( 63, 63, 63 )';
  86. ctx.fillText( index, a.x * width, ( 1 - a.y ) * height );
  87. if ( a.x > 0.95 ) {
  88. // wrap x // 0.95 is arbitrary
  89. ctx.fillText( index, ( a.x % 1 ) * width, ( 1 - a.y ) * height );
  90. }
  91. //
  92. ctx.font = '12px Arial';
  93. ctx.fillStyle = 'rgb( 191, 191, 191 )';
  94. // label uv edge orders
  95. for ( let j = 0, jl = uvs.length; j < jl; j ++ ) {
  96. const uv = uvs[ j ];
  97. b.addVectors( a, uv ).divideScalar( 2 );
  98. const vnum = face[ j ];
  99. ctx.fillText( abc[ j ] + vnum, b.x * width, ( 1 - b.y ) * height );
  100. if ( b.x > 0.95 ) {
  101. // wrap x
  102. ctx.fillText( abc[ j ] + vnum, ( b.x % 1 ) * width, ( 1 - b.y ) * height );
  103. }
  104. }
  105. }
  106. }
  107. export { UVsDebug };