|
|
@@ -1,111 +1,98 @@
|
|
|
<!DOCTYPE html>
|
|
|
-<html>
|
|
|
-<head>
|
|
|
-<meta charset=utf-8 />
|
|
|
-<title>three.js - uv mapping tests</title>
|
|
|
-<style>
|
|
|
- article, aside, figure, footer, header, hgroup,
|
|
|
- menu, nav, section { display: block; }
|
|
|
-</style>
|
|
|
- <script src="../build/three.min.js"></script>
|
|
|
- <script src="js/UVsUtils.js"></script>
|
|
|
-
|
|
|
-</head>
|
|
|
-<body>
|
|
|
- <b id="hello">Doing UV wrap tests here!</b>
|
|
|
- <i>Please wait while it loads</i>
|
|
|
- <script>
|
|
|
-/*
|
|
|
- * This is to help debug UVs problems in geometry,
|
|
|
- * as well as allow a new user to visualize what UVs are about.
|
|
|
- */
|
|
|
-
|
|
|
-
|
|
|
-function test(name, geometry) {
|
|
|
-
|
|
|
- var d = document.createElement('div');
|
|
|
- d.innerHTML = '<br><br>' + name + '<br>';
|
|
|
- d.appendChild(THREE.UVsDebug(geometry));
|
|
|
- document.body.appendChild(d);
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-test('new THREE.PlaneGeometry( 100, 100, 4, 4 )', new THREE.PlaneGeometry( 100, 100, 4, 4 ));
|
|
|
-test('new THREE.SphereGeometry( 75, 12, 6 )', new THREE.SphereGeometry( 75, 12, 6 ));
|
|
|
-
|
|
|
-test('new THREE.IcosahedronGeometry( 30, 1 )', new THREE.IcosahedronGeometry( 30, 1 ));
|
|
|
-test('new THREE.OctahedronGeometry( 30, 2 )', new THREE.OctahedronGeometry( 30, 2 ));
|
|
|
-
|
|
|
-test('new THREE.CylinderGeometry( 25, 75, 100, 10, 5 )', new THREE.CylinderGeometry( 25, 75, 100, 10, 5 ));
|
|
|
-
|
|
|
-test('new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 )', new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ));
|
|
|
-
|
|
|
-var points = [];
|
|
|
-
|
|
|
-for ( var i = 0; i < 10; i ++ ) {
|
|
|
-
|
|
|
- points.push( new THREE.Vector3( Math.sin( i * 0.2 ) * 15 + 50, 0, ( i - 5 ) * 2 ) );
|
|
|
-
|
|
|
-}
|
|
|
-
|
|
|
-
|
|
|
-test('new THREE.LatheGeometry( points, 8 )', new THREE.LatheGeometry( points, 8 ));
|
|
|
-test('new THREE.TorusGeometry( 50, 20, 8, 8 )', new THREE.TorusGeometry( 50, 20, 8, 8 ));
|
|
|
-test('new THREE.TorusKnotGeometry( 50, 10, 12, 6 )', new THREE.TorusKnotGeometry( 50, 10, 12, 6 ));
|
|
|
-
|
|
|
-/*
|
|
|
-Not sure how UVs for ExtrudeGeometry are done currently...
|
|
|
-*/
|
|
|
-
|
|
|
-var pts = [], starPoints = 5, l;
|
|
|
-for (i=0; i<starPoints*2;i++) {
|
|
|
- if (i%2==1) {
|
|
|
- l = 5;
|
|
|
- } else {
|
|
|
- l = 10;
|
|
|
- }
|
|
|
-
|
|
|
- var a = i / starPoints * Math.PI;
|
|
|
- pts.push(new THREE.Vector2(Math.cos(a) * l,Math.sin(a) * l ));
|
|
|
-}
|
|
|
-var starShape = new THREE.Shape(pts);
|
|
|
-var extrudeSettings = { amount: 200, bevelEnabled: true, bevelSegments: 2, steps: 10 };
|
|
|
-
|
|
|
-test('new THREE.ExtrudeGeometry(starShape, extrudeSettings);', new THREE.ExtrudeGeometry(starShape, extrudeSettings));
|
|
|
-
|
|
|
-var uvGenerator = new THREE.UVsUtils.CylinderUVGenerator();
|
|
|
- testShape = setupShape(8, 3);
|
|
|
- holeShape = setupShape(8, 2);
|
|
|
- testShape.holes.push(holeShape);
|
|
|
-
|
|
|
-function setupShape(n, r) {
|
|
|
- // Make shape
|
|
|
- var sh = new THREE.Shape();
|
|
|
- for (var i = 0; i < n;i++) {
|
|
|
- var method = i ? 'lineTo' : 'moveTo';
|
|
|
- var a = (i/n) * Math.PI * 2;
|
|
|
- var x = Math.cos(a) * r;
|
|
|
- var y = Math.sin(a) * r;
|
|
|
- sh[method](x, y);
|
|
|
- }
|
|
|
-
|
|
|
- return sh;
|
|
|
- }
|
|
|
-
|
|
|
-var exoption = {
|
|
|
- bevelEnabled: true,
|
|
|
- bevelSize: 1,
|
|
|
- amount: 3,
|
|
|
- extrudeMaterial: 0,
|
|
|
- material: 1,
|
|
|
- uvGenerator: uvGenerator
|
|
|
-};
|
|
|
-
|
|
|
-var geom = testShape.extrude(exoption);
|
|
|
-test('new THREE.ExtrudeGeometry with CylinderUVGenerator;', geom);
|
|
|
-
|
|
|
-
|
|
|
- </script>
|
|
|
-</body>
|
|
|
-</html>
|
|
|
+<html lang="en">
|
|
|
+ <head>
|
|
|
+ <meta charset=utf-8 />
|
|
|
+ <title>three.js - uv mapping tests</title>
|
|
|
+ </head>
|
|
|
+ <body>
|
|
|
+ <script src="../build/three.min.js"></script>
|
|
|
+ <script src="js/UVsUtils.js"></script>
|
|
|
+ <script>
|
|
|
+ /*
|
|
|
+ * This is to help debug UVs problems in geometry,
|
|
|
+ * as well as allow a new user to visualize what UVs are about.
|
|
|
+ */
|
|
|
+
|
|
|
+ function test(name, geometry) {
|
|
|
+ var d = document.createElement('div');
|
|
|
+ d.innerHTML = '<br><br>' + name + '<br>';
|
|
|
+ d.appendChild(THREE.UVsDebug(geometry));
|
|
|
+ document.body.appendChild(d);
|
|
|
+ }
|
|
|
+
|
|
|
+ test('new THREE.PlaneGeometry( 100, 100, 4, 4 )', new THREE.PlaneGeometry( 100, 100, 4, 4 ));
|
|
|
+ test('new THREE.SphereGeometry( 75, 12, 6 )', new THREE.SphereGeometry( 75, 12, 6 ));
|
|
|
+
|
|
|
+ test('new THREE.IcosahedronGeometry( 30, 1 )', new THREE.IcosahedronGeometry( 30, 1 ));
|
|
|
+ test('new THREE.OctahedronGeometry( 30, 2 )', new THREE.OctahedronGeometry( 30, 2 ));
|
|
|
+
|
|
|
+ test('new THREE.CylinderGeometry( 25, 75, 100, 10, 5 )', new THREE.CylinderGeometry( 25, 75, 100, 10, 5 ));
|
|
|
+
|
|
|
+ test('new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 )', new THREE.CubeGeometry( 100, 100, 100, 4, 4, 4 ));
|
|
|
+
|
|
|
+ var points = [];
|
|
|
+
|
|
|
+ for ( var i = 0; i < 10; i ++ ) {
|
|
|
+
|
|
|
+ points.push( new THREE.Vector3( Math.sin( i * 0.2 ) * 15 + 50, 0, ( i - 5 ) * 2 ) );
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+ test('new THREE.LatheGeometry( points, 8 )', new THREE.LatheGeometry( points, 8 ));
|
|
|
+ test('new THREE.TorusGeometry( 50, 20, 8, 8 )', new THREE.TorusGeometry( 50, 20, 8, 8 ));
|
|
|
+ test('new THREE.TorusKnotGeometry( 50, 10, 12, 6 )', new THREE.TorusKnotGeometry( 50, 10, 12, 6 ));
|
|
|
+
|
|
|
+ /*
|
|
|
+ Not sure how UVs for ExtrudeGeometry are done currently...
|
|
|
+ */
|
|
|
+
|
|
|
+ var pts = [], starPoints = 5, l;
|
|
|
+ for (i=0; i<starPoints*2;i++) {
|
|
|
+ if (i%2==1) {
|
|
|
+ l = 5;
|
|
|
+ } else {
|
|
|
+ l = 10;
|
|
|
+ }
|
|
|
+
|
|
|
+ var a = i / starPoints * Math.PI;
|
|
|
+ pts.push(new THREE.Vector2(Math.cos(a) * l,Math.sin(a) * l ));
|
|
|
+ }
|
|
|
+ var starShape = new THREE.Shape(pts);
|
|
|
+ var extrudeSettings = { amount: 200, bevelEnabled: true, bevelSegments: 2, steps: 10 };
|
|
|
+
|
|
|
+ test('new THREE.ExtrudeGeometry(starShape, extrudeSettings);', new THREE.ExtrudeGeometry(starShape, extrudeSettings));
|
|
|
+
|
|
|
+ var uvGenerator = new THREE.UVsUtils.CylinderUVGenerator();
|
|
|
+ testShape = setupShape(8, 3);
|
|
|
+ holeShape = setupShape(8, 2);
|
|
|
+ testShape.holes.push(holeShape);
|
|
|
+
|
|
|
+ function setupShape(n, r) {
|
|
|
+ // Make shape
|
|
|
+ var sh = new THREE.Shape();
|
|
|
+ for (var i = 0; i < n;i++) {
|
|
|
+ var method = i ? 'lineTo' : 'moveTo';
|
|
|
+ var a = (i/n) * Math.PI * 2;
|
|
|
+ var x = Math.cos(a) * r;
|
|
|
+ var y = Math.sin(a) * r;
|
|
|
+ sh[method](x, y);
|
|
|
+ }
|
|
|
+
|
|
|
+ return sh;
|
|
|
+ }
|
|
|
+
|
|
|
+ var exoption = {
|
|
|
+ bevelEnabled: true,
|
|
|
+ bevelSize: 1,
|
|
|
+ amount: 3,
|
|
|
+ extrudeMaterial: 0,
|
|
|
+ material: 1,
|
|
|
+ uvGenerator: uvGenerator
|
|
|
+ };
|
|
|
+
|
|
|
+ var geom = testShape.extrude(exoption);
|
|
|
+ test('new THREE.ExtrudeGeometry with CylinderUVGenerator;', geom);
|
|
|
+ </script>
|
|
|
+ </body>
|
|
|
+</html>
|
Mr.doob