Adding PolarGridHelper and associated files

73e006e6 · Hectate · 7d22eac4 · 73e006e6 · 73e006e6 · 73e006e6
5 changed file
--- a/docs/api/extras/helpers/PolarGridHelper.html
+++ b/docs/api/extras/helpers/PolarGridHelper.html
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:Line] &rarr;
+
+		<h1>[name]</h1>
+
+		<div class="desc">The PolarGridHelper is an object to define polar grids. Grids are two-dimensional arrays of lines.</div>
+
+
+		<h2>Example</h2>
+
+		<code>var radius = 10;
+		var radials = 16;
+        var circles = 8;
+        var divisions = 50;
+
+		var helper = new THREE.PolarGridHelper( radius, radials, circles, divisions );
+        scene.add( helper );
+		</code>
+		[example:webgl_helpers Example using various helpers]
+
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [page:Number radius], [page:Number radials], [page:Number circles], [page:Number divisions], [page:Color color1], [page:Color color2] )</h3>
+		<div>
+		radius -- The radius of the polar grid. This can be any positive number. <br />
+        radials -- The number of radial lines. This can be any positive integer. <br />
+        circles -- The number of circles. This can be any positive integer. <br />
+		divisions -- The number of line segments used for each circle. This can be any positive integer that is 3 or greater. <br />
+		color1 -- The first color used for grid elements. This can be a [page:Color], a hexadecimal value and an CSS-Color name. Default is 0x444444 <br />
+		color2 -- The second color used for grid elements. This can be a [page:Color], a hexadecimal value and an CSS-Color name. Default is 0x888888
+		</div>
+		<div>
+		Creates a new [name] of radius 'radius' with 'radials' number of radials and 'circles' number of circles, where each circle is smoothed into 'divisions' number of line segments. Colors are optional.
+		</div>
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>
--- a/docs/list.js
+++ b/docs/list.js
@@ -120,6 +120,7 @@ var list = {
 			[ "DirectionalLightHelper", "api/extras/helpers/DirectionalLightHelper" ],
 			[ "FaceNormalsHelper", "api/extras/helpers/FaceNormalsHelper" ],
 			[ "GridHelper", "api/extras/helpers/GridHelper" ],
+			[ "PolarGridHelper", "api/extras/helpers/PolarGridHelper"],
 			[ "HemisphereLightHelper", "api/extras/helpers/HemisphereLightHelper" ],
 			[ "PointLightHelper", "api/extras/helpers/PointLightHelper" ],
 			[ "RectAreaLightHelper", "api/extras/helpers/RectAreaLightHelper" ],

--- a/examples/webgl_helpers.html
+++ b/examples/webgl_helpers.html
@@ -45,9 +45,15 @@

 				scene.add( new THREE.PointLightHelper( light, 5 ) );

-				var helper = new THREE.GridHelper( 200, 40, 0x0000ff, 0x808080 );
-				helper.position.y = - 150;
-				scene.add( helper );
+				var gridHelper = new THREE.GridHelper( 200, 40, 0x0000ff, 0x808080 );
+				gridHelper.position.y = - 150;
+				gridHelper.position.x = - 150;
+				scene.add( gridHelper );
+
+				var polarGridHelper = new THREE.PolarGridHelper( 100, 16, 8, 50, 0x0000ff, 0x808080 );
+				polarGridHelper.position.y = - 150;
+				polarGridHelper.position.x = 150;
+				scene.add( polarGridHelper );

 				var loader = new THREE.JSONLoader();
 				loader.load( 'obj/leeperrysmith/LeePerrySmith.js', function ( geometry, materials ) {

--- a/src/Three.js
+++ b/src/Three.js
@@ -126,6 +126,7 @@ export { PointLightHelper } from './extras/helpers/PointLightHelper.js';
 export { RectAreaLightHelper } from './extras/helpers/RectAreaLightHelper.js';
 export { HemisphereLightHelper } from './extras/helpers/HemisphereLightHelper.js';
 export { GridHelper } from './extras/helpers/GridHelper.js';
+export { PolarGridHelper } from './extras/helpers/PolarGridHelper.js';
 export { FaceNormalsHelper } from './extras/helpers/FaceNormalsHelper.js';
 export { DirectionalLightHelper } from './extras/helpers/DirectionalLightHelper.js';
 export { CameraHelper } from './extras/helpers/CameraHelper.js';

--- a/src/extras/helpers/PolarGridHelper.js
+++ b/src/extras/helpers/PolarGridHelper.js
+import { LineSegments } from '../../objects/LineSegments';
+import { VertexColors } from '../../constants';
+import { LineBasicMaterial } from '../../materials/LineBasicMaterial';
+import { Float32Attribute } from '../../core/BufferAttribute';
+import { BufferGeometry } from '../../core/BufferGeometry';
+import { Color } from '../../math/Color';
+import { _Math as Math } from '../../math/Math';
+
+/**
+ * @author mrdoob / http://mrdoob.com/
+ * @author Mugen87 / http://github.com/Mugen87
+ * @author Hectate / http://www.github.com/Hectate
+ */
+
+function PolarGridHelper( radius, radials, circles, divisions, color1, color2 ) {
+
+    radius = radius || 10;
+    radials = radials || 16;
+    circles = circles || 8;
+    divisions = divisions || 50;
+    color1 = new THREE.Color( color1 !== undefined ? color1 : 0x444444 );
+    color2 = new THREE.Color( color2 !== undefined ? color2 : 0x888888 );
+
+    var vertices = [];
+    var colors = [];
+
+    var x, z;
+    var v, i, j, r, color;
+
+    // create the radials
+
+    for ( i = 0; i <= radials; i++ ) {
+
+        v = ( i / radials ) * ( Math.PI * 2 );
+
+        x = Math.sin( v ) * radius;
+        z = Math.cos( v ) * radius;
+
+        vertices.push( 0, 0, 0 );
+        vertices.push( x, 0, z );
+
+        color = ( i & 1 ) ? color1 : color2;
+
+        colors.push( color.r, color.g, color.b );
+        colors.push( color.r, color.g, color.b );
+
+    }
+
+    // create the circles
+
+    for ( i = 0; i <= circles; i++ ) {
+
+        color = ( i & 1 ) ? color1 : color2;
+
+        r = radius - ( radius / circles * i )
+
+        for ( j = 0; j < divisions; j ++ ) {
+
+            // first vertex
+
+            v = ( j / divisions ) * ( Math.PI * 2 );
+
+            x = Math.sin( v ) * r;
+            z = Math.cos( v ) * r;
+
+            vertices.push( x, 0, z );
+            colors.push( color.r, color.g, color.b );
+
+            // second vertex
+
+            v = ( ( j + 1 ) / divisions ) * ( Math.PI * 2 );
+
+            x = Math.sin( v ) * r;
+            z = Math.cos( v ) * r;
+
+            vertices.push( x, 0, z );
+            colors.push( color.r, color.g, color.b );
+
+        }
+
+    }
+
+    var geometry = new THREE.BufferGeometry();
+    geometry.addAttribute( 'position', new THREE.Float32Attribute( vertices, 3 ) );
+    geometry.addAttribute( 'color', new THREE.Float32Attribute( colors, 3 ) );
+
+    var material = new THREE.LineBasicMaterial( { vertexColors: THREE.VertexColors } );
+
+    THREE.LineSegments.call( this, geometry, material );
+
+}
+
+PolarGridHelper.prototype = Object.create( THREE.LineSegments.prototype );
+PolarGridHelper.prototype.constructor = PolarGridHelper;
\ No newline at end of file