|
|
@@ -0,0 +1,111 @@
|
|
|
+<!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.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>
|
zz85