Эхлэл Бүгдийг харах Тусламж
Нэвтрэх
javascript
/
three.js
-ын хуулбар https://github.com/tazdij/three.js.git
2
0
Салаа 0
Файлууд Асуудлууд 0 Мэдлэгийн сан
Эх сурвалжийг харах

Merge branch 'hilbert-curves' of https://github.com/thorsummoner/three.js into dev

Mr.doob 11 жил өмнө
parent
884c4334e9 92814d4359
commit
7f9c5af70a
4 өөрчлөгдсөн 356 нэмэгдсэн , 42 устгасан
Өөрчлөллтийг нэгтгэж харах Өөрчлөлтийн статистик харах
  1. 1 42
      examples/canvas_lines_colors.html
  2. 212 0
      examples/canvas_lines_colors_2d.html
  3. 59 0
      examples/js/geometries/hilbert2D.js
  4. 84 0
      examples/js/geometries/hilbert3D.js

+ 1 - 42
examples/canvas_lines_colors.html
Файл харах 

@@ -48,6 +48,7 @@
 
 
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/Detector.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
 		<script src="js/libs/stats.min.js"></script>
 
+		<script src="js/geometries/hilbert3D.js"></script>
 
 
 
 		<script>
 
 		<script>
 
 
 
@@ -143,48 +144,6 @@
 
 
 
 			}
 
 			}
 
 
 
-			// port of Processing Java code by Thomas Diewald
 
-			// http://www.openprocessing.org/visuals/?visualID=15599
 
-
 
-			function hilbert3D( center, side, iterations, v0, v1, v2, v3, v4, v5, v6, v7 ) {
 
-
 
-				var half = side / 2,
 
-
 
-					vec_s = [
 
-
 
-					new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
 
-					new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
 
-					new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
 
-					new THREE.Vector3( center.x - half, center.y - half, center.z - half ),
 
-					new THREE.Vector3( center.x + half, center.y - half, center.z - half ),
 
-					new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
 
-					new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
 
-					new THREE.Vector3( center.x + half, center.y + half, center.z - half )
 
-
 
-					],
 
-
 
-					vec = [ vec_s[ v0 ], vec_s[ v1 ], vec_s[ v2 ], vec_s[ v3 ], vec_s[ v4 ], vec_s[ v5 ], vec_s[ v6 ], vec_s[ v7 ] ];
 
-
 
-				if( --iterations >= 0 ) {
 
-
 
-					var tmp = [];
 
-
 
-					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
 
-					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 
-					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 
-					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
 
-					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
 
-					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 
-					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 
-					Array.prototype.push.apply( tmp, hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
 
-
 
-					return tmp;
 
-
 
-				}
 
-
 
-				return vec;
 
-			}
 
-
 
 			//
 
 			//
 
 
 
 			function onDocumentMouseMove( event ) {
 
 			function onDocumentMouseMove( event ) {

+ 212 - 0
examples/canvas_lines_colors_2d.html
Файл харах 

@@ -0,0 +1,212 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - lines - cubes - colors</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
+			body {
 
+				background-color: #000000;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+			}
 
+
 
+			a {
 
+				color:#0078ff;
 
+			}
 
+
 
+			#info {
 
+				position: absolute;
 
+				top: 10px; width: 100%;
 
+				color: #ffffff;
 
+				padding: 5px;
 
+				font-family: Monospace;
 
+				font-size: 13px;
 
+				text-align: center;
 
+				z-index:100;
 
+			}
 
+
 
+			a {
 
+				color: orange;
 
+				text-decoration: none;
 
+			}
 
+
 
+			a:hover {
 
+				color: #0080ff;
 
+			}
 
+
 
+		</style>
 
+	</head>
 
+	<body>
 
+
 
+		<div id="info">
 
+			<a href="http://threejs.org" target="_blank">three.js</a> - color lines WebGL demo
 
+			[<a href="http://en.wikipedia.org/wiki/Hilbert_curve">Hilbert curve</a> thanks to <a href="http://www.openprocessing.org/visuals/?visualID=15599">Thomas Diewald</a>]
 
+		</div>
 
+
 
+		<script src="../build/three.min.js"></script>
 
+
 
+		<script src="js/Detector.js"></script>
 
+		<script src="js/libs/stats.min.js"></script>
 
+		<script src="js/geometries/hilbert2D.js"></script>
 
+
 
+		<script>
 
+
 
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+
 
+
 
+			var mouseX = 0, mouseY = 0,
 
+
 
+			windowHalfX = window.innerWidth / 2,
 
+			windowHalfY = window.innerHeight / 2,
 
+
 
+			camera, scene, renderer, material;
 
+
 
+			init();
 
+			animate();
 
+
 
+			function init() {
 
+
 
+				var i, container;
 
+
 
+				container = document.createElement( 'div' );
 
+				document.body.appendChild( container );
 
+
 
+				camera = new THREE.PerspectiveCamera( 33, window.innerWidth / window.innerHeight, 1, 10000 );
 
+				camera.position.z = 700;
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				renderer = new THREE.CanvasRenderer( { antialias: false } );
 
+				renderer.setClearColor( 0x000000, 1 );
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+				container.appendChild( renderer.domElement );
 
+
 
+				var geometry3 = new THREE.Geometry(),
 
+					points = hilbert2D( new THREE.Vector3( 0,0,0 ), 400.0, 4, 0, 1, 2, 3, 4, 5, 6, 7 ),
 
+					colors3 = [];
 
+
 
+				for ( i = 0; i < points.length; i ++ ) {
 
+
 
+					geometry3.vertices.push( points[ i ] );
 
+
 
+					colors3[ i ] = new THREE.Color( 0xffffff );
 
+					colors3[ i ].setHSL( i / points.length, 1.0, 0.5 );
 
+
 
+				}
 
+
 
+				geometry3.colors = colors3;
 
+
 
+				// lines
 
+
 
+				material = new THREE.LineBasicMaterial( { color: 0xffffff, opacity: 1, linewidth: 3, vertexColors: THREE.VertexColors } );
 
+
 
+				var line, p, scale = 0.3, d = 225;
 
+
 
+				line = new THREE.Line(geometry3, material );
 
+				line.scale.x = line.scale.y = line.scale.z =  scale*1.5;
 
+				line.position.x = 0;
 
+				line.position.y = 0;
 
+				line.position.z = 0;
 
+				scene.add( line );
 
+
 
+				//
 
+
 
+				stats = new Stats();
 
+				stats.domElement.style.position = 'absolute';
 
+				stats.domElement.style.top = '0px';
 
+				//container.appendChild( stats.domElement );
 
+
 
+				//
 
+
 
+				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
 
+				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
 
+				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
 
+
 
+				//
 
+
 
+				window.addEventListener( 'resize', onWindowResize, false );
 
+
 
+			}
 
+
 
+			function onWindowResize() {
 
+
 
+				windowHalfX = window.innerWidth / 2;
 
+				windowHalfY = window.innerHeight / 2;
 
+
 
+				camera.aspect = window.innerWidth / window.innerHeight;
 
+				camera.updateProjectionMatrix();
 
+
 
+				renderer.setSize( window.innerWidth, window.innerHeight );
 
+
 
+				composer.reset();
 
+
 
+			}
 
+
 
+			function onDocumentMouseMove( event ) {
 
+
 
+				mouseX = event.clientX - windowHalfX;
 
+				mouseY = event.clientY - windowHalfY;
 
+
 
+			}
 
+
 
+			function onDocumentTouchStart( event ) {
 
+
 
+				if ( event.touches.length > 1 ) {
 
+
 
+					event.preventDefault();
 
+
 
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
+					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
+
 
+				}
 
+
 
+			}
 
+
 
+			function onDocumentTouchMove( event ) {
 
+
 
+				if ( event.touches.length == 1 ) {
 
+
 
+					event.preventDefault();
 
+
 
+					mouseX = event.touches[ 0 ].pageX - windowHalfX;
 
+					mouseY = event.touches[ 0 ].pageY - windowHalfY;
 
+				}
 
+
 
+			}
 
+
 
+			//
 
+
 
+			function animate() {
 
+
 
+				requestAnimationFrame( animate );
 
+				render();
 
+
 
+				stats.update();
 
+
 
+			}
 
+
 
+			function render() {
 
+
 
+				camera.position.x += ( mouseX - camera.position.x ) * .05;
 
+				camera.position.y += ( - mouseY + 200 - camera.position.y ) * .05;
 
+
 
+				camera.lookAt( scene.position );
 
+
 
+				var time = Date.now() * 0.0005;
 
+
 
+				for ( var i = 0; i < scene.children.length; i ++ ) {
 
+
 
+					var object = scene.children[ i ];
 
+					if ( object instanceof THREE.Line ) object.rotation.y = time * ( i % 2 ? 1 : -1 );
 
+
 
+				}
 
+
 
+				renderer.render(scene, camera );
 
+
 
+			}
 
+
 
+		</script>
 
+	</body>
 
+</html>

+ 59 - 0
examples/js/geometries/hilbert2D.js
Файл харах 

@@ -0,0 +1,59 @@
 
+/**
 
+ * Hilbert Curve: Generates 2D-Coordinates in a very fast way.
 
+ *
 
+ * @author Dylan Grafmyre
 
+ *
 
+ * Based on work by:
 
+ * @author Thomas Diewald
 
+ * @link http://www.openprocessing.org/sketch/15493
 
+ *
 
+ * @param center     Center of Hilbert curve.
 
+ * @param size       Total width of Hilbert curve.
 
+ * @param iterations Number of subdivisions.
 
+ * @param v0         Corner index -X, -Z.
 
+ * @param v1         Corner index -X, +Z.
 
+ * @param v2         Corner index +X, +Z.
 
+ * @param v3         Corner index +X, -Z.
 
+ */
 
+function hilbert2D (center, size, iterations, v0, v1, v2, v3) {
 
+	// Default Vars
 
+	var center     = undefined !== center ? center : new THREE.Vector3(0, 0, 0),
 
+		size       = undefined !== size ? size : 10,
 
+		half       = size / 2,
 
+		iterations = undefined !== iterations ? iterations : 1,
 
+		v0 = undefined !== v0 ? v0 : 0,
 
+		v1 = undefined !== v1 ? v1 : 1,
 
+		v2 = undefined !== v2 ? v2 : 2,
 
+		v3 = undefined !== v3 ? v3 : 3
 
+	;
 
+
 
+	var vec_s = [
 
+		new THREE.Vector3( center.x - half, center.y, center.z - half ),
 
+		new THREE.Vector3( center.x - half, center.y, center.z + half ),
 
+		new THREE.Vector3( center.x + half, center.y, center.z + half ),
 
+		new THREE.Vector3( center.x + half, center.y, center.z - half )
 
+	];
 
+
 
+	var vec = [
 
+		vec_s[ v0 ],
 
+		vec_s[ v1 ],
 
+		vec_s[ v2 ],
 
+		vec_s[ v3 ]
 
+	];
 
+
 
+	// Recurse iterations
 
+	if (0 <= --iterations) {
 
+		var tmp = [];
 
+
 
+		Array.prototype.push.apply( tmp, hilbert2D ( vec[ 0 ], half, iterations, v0, v3, v2, v1 ) );
 
+		Array.prototype.push.apply( tmp, hilbert2D ( vec[ 1 ], half, iterations, v0, v1, v2, v3 ) );
 
+		Array.prototype.push.apply( tmp, hilbert2D ( vec[ 2 ], half, iterations, v0, v1, v2, v3 ) );
 
+		Array.prototype.push.apply( tmp, hilbert2D ( vec[ 3 ], half, iterations, v2, v1, v0, v3 ) );
 
+
 
+		// Return recursive call
 
+		return tmp;
 
+	}
 
+
 
+	// Return complete Hilbert Curve.
 
+	return vec;
 
+}

+ 84 - 0
examples/js/geometries/hilbert3D.js
Файл харах 

@@ -0,0 +1,84 @@
 
+/**
 
+ * Hilbert Curve: Generates 2D-Coordinates in a very fast way.
 
+ *
 
+ * @author Dylan Grafmyre
 
+ *
 
+ * Based on work by:
 
+ * @author Thomas Diewald
 
+ * @link http://www.openprocessing.org/visuals/?visualID=15599
 
+ *
 
+ * Based on `examples/canvas_lines_colors.html`:
 
+ * @author OpenShift guest
 
+ * @link https://github.com/mrdoob/three.js/blob/8413a860aa95ed29c79cbb7f857c97d7880d260f/examples/canvas_lines_colors.html
 
+ * @see  Line 149 - 186
 
+ *
 
+ * @param center     Center of Hilbert curve.
 
+ * @param size       Total width of Hilbert curve.
 
+ * @param iterations Number of subdivisions.
 
+ * @param v0         Corner index -X, +Y, -Z.
 
+ * @param v1         Corner index -X, +Y, +Z.
 
+ * @param v2         Corner index -X, -Y, +Z.
 
+ * @param v3         Corner index -X, -Y, -Z.
 
+ * @param v4         Corner index +X, -Y, -Z.
 
+ * @param v5         Corner index +X, -Y, +Z.
 
+ * @param v6         Corner index +X, +Y, +Z.
 
+ * @param v7         Corner index +X, +Y, -Z.
 
+ */
 
+function hilbert3D(center, size, iterations, v0, v1, v2, v3, v4, v5, v6, v7) {
 
+	// Default Vars
 
+	var center     = undefined !== center ? center : new THREE.Vector3(0, 0, 0),
 
+		size       = undefined !== size ? size : 10,
 
+		half       = size / 2,
 
+		iterations = undefined !== iterations ? iterations : 1,
 
+		v0 = undefined !== v0 ? v0 : 0,
 
+		v1 = undefined !== v1 ? v1 : 1,
 
+		v2 = undefined !== v2 ? v2 : 2,
 
+		v3 = undefined !== v3 ? v3 : 3,
 
+		v4 = undefined !== v4 ? v4 : 4,
 
+		v5 = undefined !== v5 ? v5 : 5,
 
+		v6 = undefined !== v6 ? v6 : 6,
 
+		v7 = undefined !== v7 ? v7 : 7
 
+	;
 
+
 
+	var vec_s = [
 
+		new THREE.Vector3( center.x - half, center.y + half, center.z - half ),
 
+		new THREE.Vector3( center.x - half, center.y + half, center.z + half ),
 
+		new THREE.Vector3( center.x - half, center.y - half, center.z + half ),
 
+		new THREE.Vector3( center.x - half, center.y - half, center.z - half ),
 
+		new THREE.Vector3( center.x + half, center.y - half, center.z - half ),
 
+		new THREE.Vector3( center.x + half, center.y - half, center.z + half ),
 
+		new THREE.Vector3( center.x + half, center.y + half, center.z + half ),
 
+		new THREE.Vector3( center.x + half, center.y + half, center.z - half )
 
+	];
 
+
 
+	var vec = [
 
+		vec_s[ v0 ],
 
+		vec_s[ v1 ],
 
+		vec_s[ v2 ],
 
+		vec_s[ v3 ],
 
+		vec_s[ v4 ],
 
+		vec_s[ v5 ],
 
+		vec_s[ v6 ],
 
+		vec_s[ v7 ]
 
+	];
 
+
 
+	// Recurse iterations
 
+	if( --iterations >= 0 ) {
 
+		var tmp = [];
 
+
 
+		Array.prototype.push.apply( tmp, hilbert3D ( vec[ 0 ], half, iterations, v0, v3, v4, v7, v6, v5, v2, v1 ) );
 
+		Array.prototype.push.apply( tmp, hilbert3D ( vec[ 1 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 
+		Array.prototype.push.apply( tmp, hilbert3D ( vec[ 2 ], half, iterations, v0, v7, v6, v1, v2, v5, v4, v3 ) );
 
+		Array.prototype.push.apply( tmp, hilbert3D ( vec[ 3 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
 
+		Array.prototype.push.apply( tmp, hilbert3D ( vec[ 4 ], half, iterations, v2, v3, v0, v1, v6, v7, v4, v5 ) );
 
+		Array.prototype.push.apply( tmp, hilbert3D ( vec[ 5 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 
+		Array.prototype.push.apply( tmp, hilbert3D ( vec[ 6 ], half, iterations, v4, v3, v2, v5, v6, v1, v0, v7 ) );
 
+		Array.prototype.push.apply( tmp, hilbert3D ( vec[ 7 ], half, iterations, v6, v5, v2, v1, v0, v3, v4, v7 ) );
 
+
 
+		// Return recursive call
 
+		return tmp;
 
+	}
 
+
 
+	// Return complete Hilbert Curve.
 
+	return vec;
 
+}