Преглед на файлове

Merge pull request #10179 from Hectate/polarGrid

Adding PolarGridHelper and associated files
Mr.doob преди 8 години
родител
ревизия
21c6db4204

+ 2 - 2
docs/api/extras/helpers/GridHelper.html

@@ -30,8 +30,8 @@
 
 		<h3>[name]( [page:number size], [page:Number divisions], [page:Color colorCenterLine], [page:Color colorGrid] )</h3>
 		<div>
-		size -- The size of the grid <br />
-		divisions -- The number of divisions across the grid <br />
+		size -- The size of the grid. Default is 10. <br />
+		divisions -- The number of divisions across the grid. Default is 10. <br />
 		colorCenterLine -- The color of the centerline. This can be a [page:Color], a hexadecimal value and an CSS-Color name. Default is 0x444444 <br />
 		colorGrid -- The color of the lines of the grid. This can be a [page:Color], a hexadecimal value and an CSS-Color name. Default is 0x888888
 		</div>

+ 50 - 0
docs/api/extras/helpers/PolarGridHelper.html

@@ -0,0 +1,50 @@
+<!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 = 64;
+
+		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. Default is 10.<br />
+		radials -- The number of radial lines. This can be any positive integer. Default is 16.<br />
+		circles -- The number of circles. This can be any positive integer. Default is 8.<br />
+		divisions -- The number of line segments used for each circle. This can be any positive integer that is 3 or greater. Default is 64.<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>

+ 1 - 0
docs/list.js

@@ -119,6 +119,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" ],

+ 9 - 3
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( 200, 16, 8, 64, 0x0000ff, 0x808080 );
+				polarGridHelper.position.y = - 150;
+				polarGridHelper.position.x = 200;
+				scene.add( polarGridHelper );
 
 				var loader = new THREE.JSONLoader();
 				loader.load( 'obj/leeperrysmith/LeePerrySmith.js', function ( geometry, materials ) {

+ 1 - 0
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';

+ 2 - 1
src/extras/helpers/GridHelper.js

@@ -11,7 +11,8 @@ import { Color } from '../../math/Color';
 
 function GridHelper( size, divisions, color1, color2 ) {
 
-	divisions = divisions || 1;
+	size = size || 10;
+	divisions = divisions || 10;
 	color1 = new Color( color1 !== undefined ? color1 : 0x444444 );
 	color2 = new Color( color2 !== undefined ? color2 : 0x888888 );
 

+ 95 - 0
src/extras/helpers/PolarGridHelper.js

@@ -0,0 +1,95 @@
+import { LineSegments } from '../../objects/LineSegments';
+import { VertexColors } from '../../constants';
+import { LineBasicMaterial } from '../../materials/LineBasicMaterial';
+import { Float32BufferAttribute } from '../../core/BufferAttribute';
+import { BufferGeometry } from '../../core/BufferGeometry';
+import { Color } from '../../math/Color';
+
+/**
+ * @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 || 64;
+    color1 = new Color( color1 !== undefined ? color1 : 0x444444 );
+    color2 = new 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 BufferGeometry();
+    geometry.addAttribute( 'position', new Float32BufferAttribute( vertices, 3 ) );
+    geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+
+    var material = new LineBasicMaterial( { vertexColors: VertexColors } );
+
+    LineSegments.call( this, geometry, material );
+
+}
+
+PolarGridHelper.prototype = Object.create( LineSegments.prototype );
+PolarGridHelper.prototype.constructor = PolarGridHelper;
+
+export { PolarGridHelper };