VRMLLoader: Fix background color computation.

examples/js/loaders/VRMLLoader.js

@@ -829,12 +829,12 @@ THREE.VRMLLoader = ( function () {
 
 				}
 
+				var radius = 10000;
+
 				// sky
 
 				if ( skyColor ) {
 
-					var radius = 10000;
-
 					var skyGeometry = new THREE.SphereBufferGeometry( radius, 32, 16 );
 					var skyMaterial = new THREE.MeshBasicMaterial( { fog: false, side: THREE.BackSide, depthWrite: false, depthTest: false } );
 
@@ -2432,83 +2432,69 @@ THREE.VRMLLoader = ( function () {
 			 */
 			function paintFaces( geometry, radius, angles, colors, topDown ) {
 
-				var direction = ( topDown === true ) ? 1 : - 1;
+				// compute threshold values
 
-				var coord = [], A = {}, B = {}, applyColor = false;
+				var thresholds = [];
+				var startAngle = ( topDown === true ) ? 0 : Math.PI;
 
-				for ( var k = 0; k < angles.length; k ++ ) {
+				for ( var i = 0, l = colors.length; i < l; i ++ ) {
 
-					// push the vector at which the color changes
+					var angle = ( i === 0 ) ? 0 : angles[ i - 1 ];
+					angle = ( topDown === true ) ? angle : ( startAngle - angle );
 
-					var vec = {
-						x: direction * ( Math.cos( angles[ k ] ) * radius ),
-						y: direction * ( Math.sin( angles[ k ] ) * radius )
-					};
+					var point = new THREE.Vector3();
+					point.setFromSphericalCoords( radius, angle, 0 );
 
-					coord.push( vec );
+					thresholds.push( point );
 
 				}
 
-				var index = geometry.index;
+				// generate vertex colors
+
+				var indices = geometry.index;
 				var positionAttribute = geometry.attributes.position;
 				var colorAttribute = new THREE.BufferAttribute( new Float32Array( geometry.attributes.position.count * 3 ), 3 );
 
 				var position = new THREE.Vector3();
 				var color = new THREE.Color();
 
-				for ( var i = 0; i < index.count; i ++ ) {
-
-					var vertexIndex = index.getX( i );
-
-					position.fromBufferAttribute( positionAttribute, vertexIndex );
+				for ( var i = 0; i < indices.count; i ++ ) {
 
-					for ( var j = 0; j < colors.length; j ++ ) {
+					var index = indices.getX( i );
+					position.fromBufferAttribute( positionAttribute, index );
 
-						// linear interpolation between aColor and bColor, calculate proportion
-						// A is previous point (angle)
+					var thresholdIndexA, thresholdIndexB;
+					var t = 1;
 
-						if ( j === 0 ) {
+					for ( var j = 1; j < thresholds.length; j ++ ) {
 
-							A.x = 0;
-							A.y = ( topDown === true ) ? radius : - 1 * radius;
-
-						} else {
-
-							A.x = coord[ j - 1 ].x;
-							A.y = coord[ j - 1 ].y;
-
-						}
+						thresholdIndexA = j - 1;
+						thresholdIndexB = j;
 
-						// B is current point (angle)
+						var thresholdA = thresholds[ thresholdIndexA ];
+						var thresholdB = thresholds[ thresholdIndexB ];
 
-						B = coord[ j ];
+						if ( topDown === true ) {
 
-						if ( B !== undefined ) {
+							// interpolation for sky color
 
-							// p has to be between the points A and B which we interpolate
+							if ( position.y <= thresholdA.y && position.y > thresholdB.y ) {
 
-							applyColor = ( topDown === true ) ? ( position.y <= A.y && position.y > B.y ) : ( position.y >= A.y && position.y < B.y );
+								t = Math.abs( thresholdA.y - position.y ) / Math.abs( thresholdA.y - thresholdB.y );
 
-							if ( applyColor === true ) {
-
-								var aColor = colors[ j ];
-								var bColor = colors[ j + 1 ];
-
-								// below is simple linear interpolation
+								break;
 
-								var t = Math.abs( position.y - A.y ) / ( A.y - B.y );
+							}
 
-								// to make it faster, you can only calculate this if the y coord changes, the color is the same for points with the same y
+						} else {
 
-								color.copy( aColor ).lerp( bColor, t );
+							// interpolation for ground color
 
-								colorAttribute.setXYZ( vertexIndex, color.r, color.g, color.b );
+							if ( position.y >= thresholdA.y && position.y < thresholdB.y ) {
 
-							} else {
+								t = Math.abs( thresholdA.y - position.y ) / Math.abs( thresholdA.y - thresholdB.y );
 
-								var colorIndex = ( topDown === true ) ? colors.length - 1 : 0;
-								var c = colors[ colorIndex ];
-								colorAttribute.setXYZ( vertexIndex, c.r, c.g, c.b );
+								break;
 
 							}
 
@@ -2516,6 +2502,13 @@ THREE.VRMLLoader = ( function () {
 
 					}
 
+					var colorA = colors[ thresholdIndexA ];
+					var colorB = colors[ thresholdIndexB ];
+
+					color.copy( colorA ).lerp( colorB, t );
+
+					colorAttribute.setXYZ( index, color.r, color.g, color.b );
+
 				}
 
 				geometry.setAttribute( 'color', colorAttribute );

examples/jsm/loaders/VRMLLoader.js

@@ -866,12 +866,12 @@ var VRMLLoader = ( function () {
 
 				}
 
+				var radius = 10000;
+
 				// sky
 
 				if ( skyColor ) {
 
-					var radius = 10000;
-
 					var skyGeometry = new SphereBufferGeometry( radius, 32, 16 );
 					var skyMaterial = new MeshBasicMaterial( { fog: false, side: BackSide, depthWrite: false, depthTest: false } );
 
@@ -2469,83 +2469,69 @@ var VRMLLoader = ( function () {
 			 */
 			function paintFaces( geometry, radius, angles, colors, topDown ) {
 
-				var direction = ( topDown === true ) ? 1 : - 1;
+				// compute threshold values
 
-				var coord = [], A = {}, B = {}, applyColor = false;
+				var thresholds = [];
+				var startAngle = ( topDown === true ) ? 0 : Math.PI;
 
-				for ( var k = 0; k < angles.length; k ++ ) {
+				for ( var i = 0, l = colors.length; i < l; i ++ ) {
 
-					// push the vector at which the color changes
+					var angle = ( i === 0 ) ? 0 : angles[ i - 1 ];
+					angle = ( topDown === true ) ? angle : ( startAngle - angle );
 
-					var vec = {
-						x: direction * ( Math.cos( angles[ k ] ) * radius ),
-						y: direction * ( Math.sin( angles[ k ] ) * radius )
-					};
+					var point = new Vector3();
+					point.setFromSphericalCoords( radius, angle, 0 );
 
-					coord.push( vec );
+					thresholds.push( point );
 
 				}
 
-				var index = geometry.index;
+				// generate vertex colors
+
+				var indices = geometry.index;
 				var positionAttribute = geometry.attributes.position;
 				var colorAttribute = new BufferAttribute( new Float32Array( geometry.attributes.position.count * 3 ), 3 );
 
 				var position = new Vector3();
 				var color = new Color();
 
-				for ( var i = 0; i < index.count; i ++ ) {
-
-					var vertexIndex = index.getX( i );
-
-					position.fromBufferAttribute( positionAttribute, vertexIndex );
+				for ( var i = 0; i < indices.count; i ++ ) {
 
-					for ( var j = 0; j < colors.length; j ++ ) {
+					var index = indices.getX( i );
+					position.fromBufferAttribute( positionAttribute, index );
 
-						// linear interpolation between aColor and bColor, calculate proportion
-						// A is previous point (angle)
+					var thresholdIndexA, thresholdIndexB;
+					var t = 1;
 
-						if ( j === 0 ) {
+					for ( var j = 1; j < thresholds.length; j ++ ) {
 
-							A.x = 0;
-							A.y = ( topDown === true ) ? radius : - 1 * radius;
-
-						} else {
-
-							A.x = coord[ j - 1 ].x;
-							A.y = coord[ j - 1 ].y;
-
-						}
+						thresholdIndexA = j - 1;
+						thresholdIndexB = j;
 
-						// B is current point (angle)
+						var thresholdA = thresholds[ thresholdIndexA ];
+						var thresholdB = thresholds[ thresholdIndexB ];
 
-						B = coord[ j ];
+						if ( topDown === true ) {
 
-						if ( B !== undefined ) {
+							// interpolation for sky color
 
-							// p has to be between the points A and B which we interpolate
+							if ( position.y <= thresholdA.y && position.y > thresholdB.y ) {
 
-							applyColor = ( topDown === true ) ? ( position.y <= A.y && position.y > B.y ) : ( position.y >= A.y && position.y < B.y );
+								t = Math.abs( thresholdA.y - position.y ) / Math.abs( thresholdA.y - thresholdB.y );
 
-							if ( applyColor === true ) {
-
-								var aColor = colors[ j ];
-								var bColor = colors[ j + 1 ];
-
-								// below is simple linear interpolation
+								break;
 
-								var t = Math.abs( position.y - A.y ) / ( A.y - B.y );
+							}
 
-								// to make it faster, you can only calculate this if the y coord changes, the color is the same for points with the same y
+						} else {
 
-								color.copy( aColor ).lerp( bColor, t );
+							// interpolation for ground color
 
-								colorAttribute.setXYZ( vertexIndex, color.r, color.g, color.b );
+							if ( position.y >= thresholdA.y && position.y < thresholdB.y ) {
 
-							} else {
+								t = Math.abs( thresholdA.y - position.y ) / Math.abs( thresholdA.y - thresholdB.y );
 
-								var colorIndex = ( topDown === true ) ? colors.length - 1 : 0;
-								var c = colors[ colorIndex ];
-								colorAttribute.setXYZ( vertexIndex, c.r, c.g, c.b );
+								break;
 
 							}
 
@@ -2553,6 +2539,13 @@ var VRMLLoader = ( function () {
 
 					}
 
+					var colorA = colors[ thresholdIndexA ];
+					var colorB = colors[ thresholdIndexB ];
+
+					color.copy( colorA ).lerp( colorB, t );
+
+					colorAttribute.setXYZ( index, color.r, color.g, color.b );
+
 				}
 
 				geometry.setAttribute( 'color', colorAttribute );