Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Add setColors method to GridHelper, Add example for setting up and changing colors of a grid

Uday Verma 12 years ago
parent
cf2731c572
commit
3030f0068a
2 changed files with 114 additions and 5 deletions
Unified View Show Diff Stats
  1. 100 0
      examples/webgl_grid_helper.html
  2. 14 5
      src/extras/helpers/GridHelper.js

+ 100 - 0
examples/webgl_grid_helper.html
View File 

@@ -0,0 +1,100 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+	<head>
 
+		<title>three.js webgl - grid helper</title>
 
+		<meta charset="utf-8">
 
+		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 
+		<style>
 
+			html, body {
 
+				color: #808080;
 
+				font-family:Monospace;
 
+				font-size:13px;
 
+				text-align:center;
 
+
 
+				background-color: #fff;
 
+				margin: 0px;
 
+				overflow: hidden;
 
+				width: 100%;
 
+				height: 100%;
 
+			}
 
+
 
+			#container {
 
+				text-align: center;
 
+			}
 
+
 
+		</style>
 
+	</head>
 
+	<body>
 
+		<div id="container">
 
+		</div>
 
+		<div id="info"><a href="http://threejs.org" target="_blank">three.js</a> webgl - grid helper</div>
 
+
 
+		<script src="../build/three.min.js"></script>
 
+
 
+		<script src="js/Detector.js"></script>
 
+		<script src="js/controls/TrackballControls.js"></script>
 
+		<script src="js/libs/stats.min.js"></script>
 
+
 
+		<script>
 
+
 
+			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
+
 
+			init();
 
+			animate();
 
+
 
+			var controls, camera, scene, renderer;
 
+			var gh;
 
+
 
+			function init() {
 
+
 
+				container = document.getElementById( "container" );
 
+
 
+				camera = new THREE.PerspectiveCamera( 60, 640 / 480.0, 1, 10000 );
 
+				camera.position.set( 150, 150, 150 );
 
+
 
+				scene = new THREE.Scene();
 
+
 
+				gh = new THREE.GridHelper( 100, 10 );
 
+				scene.add( gh );
 
+
 
+				controls = new THREE.TrackballControls( camera );
 
+
 
+				renderer = new THREE.WebGLRenderer();
 
+				renderer.setSize( 640, 480 );
 
+
 
+				container.appendChild( renderer.domElement );
 
+
 
+			}
 
+
 
+			function time() {
 
+
 
+				return Date.now() * 0.001;
 
+			}
 
+
 
+			function randomColor() {
 
+
 
+				return Math.floor(Math.random() * 0xFFFFFF) + 1;
 
+			}
 
+
 
+			var lastChangeTime = time()
 
+			function animate() {
 
+
 
+				var t = time();
 
+				if (t - lastChangeTime > 5.0) {
 
+					gh.setColors( randomColor(), randomColor() );
 
+					lastChangeTime = t;
 
+				}
 
+
 
+				render();
 
+				requestAnimationFrame( animate );
 
+			}
 
+
 
+			function render() {
 
+
 
+				controls.update();
 
+				renderer.render( scene, camera );
 
+			}
 
+		</script>
 
+
 
+	</body>
 
+</html>

+ 14 - 5
src/extras/helpers/GridHelper.js
View File 

@@ -2,14 +2,14 @@
 
  * @author mrdoob / http://mrdoob.com/
 
  * @author mrdoob / http://mrdoob.com/
 
  */
 
  */
 
 
 
-THREE.GridHelper = function ( size, step, color1, color2) {
 
-
 
-	color1 = new THREE.Color( color1 === undefined ? 0x444444: color1 );
 
-	color2 = new THREE.Color( color2 === undefined ? 0x888888: color2 );
 
+THREE.GridHelper = function ( size, step ) {
 
 
 
 	var geometry = new THREE.Geometry();
 
 	var geometry = new THREE.Geometry();
 
 	var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
 
 	var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
 
 
 
+	this.color1 = new THREE.Color( 0x444444 );
 
+	this.color2 = new THREE.Color( 0x888888 );
 
+
 
 	for ( var i = - size; i <= size; i += step ) {
 
 	for ( var i = - size; i <= size; i += step ) {
 
 
 
 		geometry.vertices.push(
 
 		geometry.vertices.push(
 
@@ -17,7 +17,7 @@ THREE.GridHelper = function ( size, step, color1, color2) {
 
 			new THREE.Vector3( i, 0, - size ), new THREE.Vector3( i, 0, size )
 
 			new THREE.Vector3( i, 0, - size ), new THREE.Vector3( i, 0, size )
 
 		);
 
 		);
 
 
 
-		var color = i === 0 ? color1 : color2;
 
+		var color = i === 0 ? this.color1 : this.color2;
 
 
 
 		geometry.colors.push( color, color, color, color );
 
 		geometry.colors.push( color, color, color, color );
 
 
 
@@ -28,3 +28,12 @@ THREE.GridHelper = function ( size, step, color1, color2) {
 
 };
 
 };
 
 
 
 THREE.GridHelper.prototype = Object.create( THREE.Line.prototype );
 
 THREE.GridHelper.prototype = Object.create( THREE.Line.prototype );
 
+
 
+THREE.GridHelper.prototype.setColors = function( colorCenterLine, colorGrid ) {
 
+
 
+	this.color1.set( colorCenterLine );
 
+	this.color2.set( colorGrid );
 
+
 
+	this.geometry.colorsNeedUpdate = true;
 
+
 
+}