UVsDebug.js 3.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. import {
  2. Vector2
  3. } from 'three';
  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. const index = geometry.index;
  35. const uvAttribute = geometry.attributes.uv;
  36. if ( index ) {
  37. // indexed geometry
  38. for ( let i = 0, il = index.count; i < il; i += 3 ) {
  39. face[ 0 ] = index.getX( i );
  40. face[ 1 ] = index.getX( i + 1 );
  41. face[ 2 ] = index.getX( i + 2 );
  42. uvs[ 0 ].fromBufferAttribute( uvAttribute, face[ 0 ] );
  43. uvs[ 1 ].fromBufferAttribute( uvAttribute, face[ 1 ] );
  44. uvs[ 2 ].fromBufferAttribute( uvAttribute, face[ 2 ] );
  45. processFace( face, uvs, i / 3 );
  46. }
  47. } else {
  48. // non-indexed geometry
  49. for ( let i = 0, il = uvAttribute.count; i < il; i += 3 ) {
  50. face[ 0 ] = i;
  51. face[ 1 ] = i + 1;
  52. face[ 2 ] = i + 2;
  53. uvs[ 0 ].fromBufferAttribute( uvAttribute, face[ 0 ] );
  54. uvs[ 1 ].fromBufferAttribute( uvAttribute, face[ 1 ] );
  55. uvs[ 2 ].fromBufferAttribute( uvAttribute, face[ 2 ] );
  56. processFace( face, uvs, i / 3 );
  57. }
  58. }
  59. return canvas;
  60. function processFace( face, uvs, index ) {
  61. // draw contour of face
  62. ctx.beginPath();
  63. a.set( 0, 0 );
  64. for ( let j = 0, jl = uvs.length; j < jl; j ++ ) {
  65. const uv = uvs[ j ];
  66. a.x += uv.x;
  67. a.y += uv.y;
  68. if ( j === 0 ) {
  69. ctx.moveTo( uv.x * ( width - 2 ) + 0.5, ( 1 - uv.y ) * ( height - 2 ) + 0.5 );
  70. } else {
  71. ctx.lineTo( uv.x * ( width - 2 ) + 0.5, ( 1 - uv.y ) * ( height - 2 ) + 0.5 );
  72. }
  73. }
  74. ctx.closePath();
  75. ctx.stroke();
  76. // calculate center of face
  77. a.divideScalar( uvs.length );
  78. // label the face number
  79. ctx.font = '18px Arial';
  80. ctx.fillStyle = 'rgb( 63, 63, 63 )';
  81. ctx.fillText( index, a.x * width, ( 1 - a.y ) * height );
  82. if ( a.x > 0.95 ) {
  83. // wrap x // 0.95 is arbitrary
  84. ctx.fillText( index, ( a.x % 1 ) * width, ( 1 - a.y ) * height );
  85. }
  86. //
  87. ctx.font = '12px Arial';
  88. ctx.fillStyle = 'rgb( 191, 191, 191 )';
  89. // label uv edge orders
  90. for ( let j = 0, jl = uvs.length; j < jl; j ++ ) {
  91. const uv = uvs[ j ];
  92. b.addVectors( a, uv ).divideScalar( 2 );
  93. const vnum = face[ j ];
  94. ctx.fillText( abc[ j ] + vnum, b.x * width, ( 1 - b.y ) * height );
  95. if ( b.x > 0.95 ) {
  96. // wrap x
  97. ctx.fillText( abc[ j ] + vnum, ( b.x % 1 ) * width, ( 1 - b.y ) * height );
  98. }
  99. }
  100. }
  101. }
  102. export { UVsDebug };