misc_uv_tests.html 2.9 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset=utf-8 />
  5. <title>three.js - uv mapping tests</title>
  6. </head>
  7. <body>
  8. <script src="../build/three.min.js"></script>
  9. <script src="js/utils/UVsUtils.js"></script>
  10. <script>
  11. /*
  12. * This is to help debug UVs problems in geometry,
  13. * as well as allow a new user to visualize what UVs are about.
  14. */
  15. function test(name, geometry) {
  16. var d = document.createElement('div');
  17. d.innerHTML = '<br><br>' + name + '<br>';
  18. d.appendChild(THREE.UVsDebug(geometry));
  19. document.body.appendChild(d);
  20. }
  21. test('new THREE.PlaneGeometry( 100, 100, 4, 4 )', new THREE.PlaneGeometry( 100, 100, 4, 4 ));
  22. test('new THREE.SphereGeometry( 75, 12, 6 )', new THREE.SphereGeometry( 75, 12, 6 ));
  23. test('new THREE.IcosahedronGeometry( 30, 1 )', new THREE.IcosahedronGeometry( 30, 1 ));
  24. test('new THREE.OctahedronGeometry( 30, 2 )', new THREE.OctahedronGeometry( 30, 2 ));
  25. test('new THREE.CylinderGeometry( 25, 75, 100, 10, 5 )', new THREE.CylinderGeometry( 25, 75, 100, 10, 5 ));
  26. test('new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 )', new THREE.BoxGeometry( 100, 100, 100, 4, 4, 4 ));
  27. var points = [];
  28. for ( var i = 0; i < 10; i ++ ) {
  29. points.push( new THREE.Vector3( Math.sin( i * 0.2 ) * 15 + 50, 0, ( i - 5 ) * 2 ) );
  30. }
  31. test('new THREE.LatheGeometry( points, 8 )', new THREE.LatheGeometry( points, 8 ));
  32. test('new THREE.TorusGeometry( 50, 20, 8, 8 )', new THREE.TorusGeometry( 50, 20, 8, 8 ));
  33. test('new THREE.TorusKnotGeometry( 50, 10, 12, 6 )', new THREE.TorusKnotGeometry( 50, 10, 12, 6 ));
  34. /*
  35. Not sure how UVs for ExtrudeGeometry are done currently...
  36. */
  37. var pts = [], starPoints = 5, l;
  38. for (i=0; i<starPoints*2;i++) {
  39. if (i%2==1) {
  40. l = 5;
  41. } else {
  42. l = 10;
  43. }
  44. var a = i / starPoints * Math.PI;
  45. pts.push(new THREE.Vector2(Math.cos(a) * l,Math.sin(a) * l ));
  46. }
  47. var starShape = new THREE.Shape(pts);
  48. var extrudeSettings = { amount: 200, bevelEnabled: true, bevelSegments: 2, steps: 10 };
  49. test('new THREE.ExtrudeGeometry(starShape, extrudeSettings);', new THREE.ExtrudeGeometry(starShape, extrudeSettings));
  50. var uvGenerator = new THREE.UVsUtils.CylinderUVGenerator();
  51. testShape = setupShape(8, 3);
  52. holeShape = setupShape(8, 2);
  53. testShape.holes.push(holeShape);
  54. function setupShape(n, r) {
  55. // Make shape
  56. var sh = new THREE.Shape();
  57. for (var i = 0; i < n;i++) {
  58. var method = i ? 'lineTo' : 'moveTo';
  59. var a = (i/n) * Math.PI * 2;
  60. var x = Math.cos(a) * r;
  61. var y = Math.sin(a) * r;
  62. sh[method](x, y);
  63. }
  64. return sh;
  65. }
  66. var exoption = {
  67. bevelEnabled: true,
  68. bevelSize: 1,
  69. amount: 3,
  70. extrudeMaterial: 0,
  71. material: 1,
  72. uvGenerator: uvGenerator
  73. };
  74. var geom = testShape.extrude(exoption);
  75. test('new THREE.ExtrudeGeometry with CylinderUVGenerator;', geom);
  76. </script>
  77. </body>
  78. </html>