Browse Source

PolarGridHelper: Allow zero radials or zero circles (#24509)

* Allow zero radials or zero circles

Prevents from getting NaN values when 0 radials or 0 circles are used.

* Changed radials and circles to sectors and rings

* Fixed lint errors

Co-authored-by: Jeremie Bourque <[email protected]>
Jérémie Bourque 2 years ago
parent
commit
ddd4ba2b6d
2 changed files with 25 additions and 21 deletions
  1. 7 7
      docs/api/en/helpers/PolarGridHelper.html
  2. 18 14
      src/helpers/PolarGridHelper.js

+ 7 - 7
docs/api/en/helpers/PolarGridHelper.html

@@ -17,11 +17,11 @@
 
 		<code>
 		const radius = 10;
-		const radials = 16;
-		const circles = 8;
+		const sectors = 16;
+		const rings = 8;
 		const divisions = 64;
 
-		const helper = new THREE.PolarGridHelper( radius, radials, circles, divisions );
+		const helper = new THREE.PolarGridHelper( radius, sectors, rings, divisions );
 		scene.add( helper );
 		</code>
 
@@ -33,17 +33,17 @@
 
 		<h2>Constructor</h2>
 
-		<h3>[name]( [param:Number radius], [param:Number radials], [param:Number circles], [param:Number divisions], [param:Color color1], [param:Color color2] )</h3>
+		<h3>[name]( [param:Number radius], [param:Number sectors], [param:Number rings], [param:Number divisions], [param:Color color1], [param:Color color2] )</h3>
 		<p>
 		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 />
+		sectors -- The number of sectors the grid will be divided into. This can be any positive integer. Default is 16.<br />
+		rings -- The number of rings. 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
 		</p>
 		<p>
-		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.
+		Creates a new [name] of radius 'radius' with 'sectors' number of sectors and 'rings' number of rings, where each circle is smoothed into 'divisions' number of line segments. Colors are optional.
 		</p>
 
 		<h2>Source</h2>

+ 18 - 14
src/helpers/PolarGridHelper.js

@@ -6,7 +6,7 @@ import { Color } from '../math/Color.js';
 
 class PolarGridHelper extends LineSegments {
 
-	constructor( radius = 10, radials = 16, circles = 8, divisions = 64, color1 = 0x444444, color2 = 0x888888 ) {
+	constructor( radius = 10, sectors = 16, rings = 8, divisions = 64, color1 = 0x444444, color2 = 0x888888 ) {
 
 		color1 = new Color( color1 );
 		color2 = new Color( color2 );
@@ -14,32 +14,36 @@ class PolarGridHelper extends LineSegments {
 		const vertices = [];
 		const colors = [];
 
-		// create the radials
+		// create the sectors
 
-		for ( let i = 0; i <= radials; i ++ ) {
+		if ( sectors > 1 ) {
 
-			const v = ( i / radials ) * ( Math.PI * 2 );
+			for ( let i = 0; i < sectors; i ++ ) {
 
-			const x = Math.sin( v ) * radius;
-			const z = Math.cos( v ) * radius;
+				const v = ( i / sectors ) * ( Math.PI * 2 );
 
-			vertices.push( 0, 0, 0 );
-			vertices.push( x, 0, z );
+				const x = Math.sin( v ) * radius;
+				const z = Math.cos( v ) * radius;
 
-			const color = ( i & 1 ) ? color1 : color2;
+				vertices.push( 0, 0, 0 );
+				vertices.push( x, 0, z );
 
-			colors.push( color.r, color.g, color.b );
-			colors.push( color.r, color.g, color.b );
+				const color = ( i & 1 ) ? color1 : color2;
+
+				colors.push( color.r, color.g, color.b );
+				colors.push( color.r, color.g, color.b );
+
+			}
 
 		}
 
-		// create the circles
+		// create the rings
 
-		for ( let i = 0; i <= circles; i ++ ) {
+		for ( let i = 0; i < rings; i ++ ) {
 
 			const color = ( i & 1 ) ? color1 : color2;
 
-			const r = radius - ( radius / circles * i );
+			const r = radius - ( radius / rings * i );
 
 			for ( let j = 0; j < divisions; j ++ ) {