Home Esplora Aiuto
Accedi
javascript
/
three.js
mirror da https://github.com/tazdij/three.js.git
2
0
Forka 0
File Problemi 0 Wiki
Sfoglia il codice sorgente

Merge pull request #11515 from looeee/lighthelper_colours

Added overrideColor parameter to LightHelpers
Mr.doob 8 anni fa
parent
dcfa48a235 985220c007
commit
943443de1b
12 ha cambiato i file con 168 aggiunte e 69 eliminazioni
Visualizzazione separata Mostra Diff Stats
  1. 12 4
      docs/api/helpers/DirectionalLightHelper.html
  2. 13 4
      docs/api/helpers/HemisphereLightHelper.html
  3. 13 6
      docs/api/helpers/PointLightHelper.html
  4. 12 2
      docs/api/helpers/RectAreaLightHelper.html
  5. 11 3
      docs/api/helpers/SpotLightHelper.html
  6. 1 1
      examples/webgl_helpers.html
  7. 11 3
      examples/webgl_lights_hemisphere.html
  8. 26 17
      src/helpers/DirectionalLightHelper.js
  9. 22 11
      src/helpers/HemisphereLightHelper.js
  10. 16 4
      src/helpers/PointLightHelper.js
  11. 18 11
      src/helpers/RectAreaLightHelper.js
  12. 13 3
      src/helpers/SpotLightHelper.js

+ 12 - 4
docs/api/helpers/DirectionalLightHelper.html
Vedi File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<meta charset="utf-8" />

+		<meta charset="utf-8" />
 
 		<base href="../../" />
 
 		<script src="list.js"></script>
 
 		<script src="page.js"></script>
 
@@ -32,10 +32,13 @@
 
 		<h2>Constructor</h2>
 
 
 
-		<h3>[name]( [page:DirectionalLight light], [page:Number size] )</h3>
 
+		<h3>[name]( [page:DirectionalLight light], [page:Number size], [page:Hex color] )</h3>
 
 		<div>
 
-		[page:DirectionalLight light]-- The light to be visualized. <br />
 
-		[page:Number size] -- (optional) dimensions of the plane. Default is *1*.<br /><br />
 
+			[page:DirectionalLight light]-- The light to be visualized. <br /><br />
 
+
 
+			[page:Number size] -- (optional) dimensions of the plane. Default is *1*.<br /><br />
 
+			
+			[page:Hex color] -- (optional) if this is not the set the helper will take the color of the light.
 
 		</div>
 
 
 
@@ -58,6 +61,11 @@
 
 			light's [page:Object3D.matrixWorld matrixWorld].
 
 		</div>
 
 
+		<h3>[property:hex color]</h3>
 
+		<div>
 
+			The color parameter passed in the constructor. Default is *undefined*. If this is changed, 
+			the helper's color will update the next time [page:.update update] is called.
 
+		</div>
 
 
 
 		<h2>Methods</h2>

+ 13 - 4
docs/api/helpers/HemisphereLightHelper.html
Vedi File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<meta charset="utf-8" />

+		<meta charset="utf-8" />
 
 		<base href="../../" />
 
 		<script src="list.js"></script>
 
 		<script src="page.js"></script>
 
@@ -29,10 +29,13 @@ scene.add( helper );
 
 
 		<h2>Constructor</h2>
 
 
-		<h3>[name]([page:HemisphereLight light], [page:Number sphereSize])</h3>
 
+		<h3>[name]( [page:HemisphereLight light], [page:Number sphereSize], [page:Hex color] )</h3>
 
 		<div>
 
-		[page:HemisphereLight light] -- The light being visualized. <br />
 
-		[page:Number size] -- The size of the mesh used to visualize the light.
 
+			[page:HemisphereLight light] -- The light being visualized. <br /><br />
 
+
 
+			[page:Number size] -- The size of the mesh used to visualize the light.<br /><br />
 
+			
+			[page:Hex color] -- (optional) if this is not the set the helper will take the color of the light.
 
 		</div>
 
 
 
@@ -51,6 +54,12 @@ scene.add( helper );
 
 			hemisphereLight's [page:Object3D.matrixWorld matrixWorld].
 
 		</div>
 
 
+		<h3>[property:hex color]</h3>
 
+		<div>
 
+			 The color parameter passed in the constructor. Default is *undefined*. If this is changed, the helper's color will update
 
+			the next time [page:.update update] is called.
 
+		</div>
 
+
 
 
 		<h2>Methods</h2>
 
 		<div>See the base [page:Object3D] class for common methods.</div>

+ 13 - 6
docs/api/helpers/PointLightHelper.html
Vedi File 

@@ -1,7 +1,7 @@
 
 <!DOCTYPE html>
 
 <html lang="en">
 
 	<head>
 
-		<meta charset="utf-8" />

+		<meta charset="utf-8" />
 
 		<base href="../../" />
 
 		<script src="list.js"></script>
 
 		<script src="page.js"></script>
 
@@ -37,12 +37,14 @@
 
 
 		<h2>Constructor</h2>
 
 
-		<h3>[name]( [page:PointLight light], [page:Float sphereSize] )</h3>
 
+		<h3>[name]( [page:PointLight light], [page:Float sphereSize], [page:Hex color] )</h3>
 
 		<div>
 
-		[page:PointLight light] -- The light to be visualized. <br />
 
-		 [page:Float sphereSize] -- (optional) The size of the sphere helper. Default is *1*.
 
-		</div>
 
+		[page:PointLight light] -- The light to be visualized. <br /><br />
 
+
 
+		[page:Float sphereSize] -- (optional) The size of the sphere helper. Default is *1*.<br /><br />
 
 
+		[page:Hex color] -- (optional) if this is not the set the helper will take the color of the light.
 
+		</div>
 
 
 		<h2>Properties</h2>
 
 		<div>See the base [page:Mesh] class for common properties.</div>
 
@@ -59,7 +61,12 @@
 
 			pointLight's [page:Object3D.matrixWorld matrixWorld].
 
 		</div>
 
 
-
 
+		<h3>[property:hex color]</h3>
 
+		<div>
 
+			 The color parameter passed in the constructor. Default is *undefined*. If this is changed, the helper's color will update
 
+			the next time [page:.update update] is called.
 
+		</div>
 
+		
 		<h2>Methods</h2>
 
 		<div>See the base [page:Mesh] class for common methods.</div>

+ 12 - 2
docs/api/helpers/RectAreaLightHelper.html
Vedi File 

@@ -29,8 +29,12 @@ scene.add( helper );
 
 
 		<h2>Constructor</h2>
 
 
-		<h3>[name]( [page:RectAreaLight light] )</h3>
 
-		<div>[page:RectAreaLight light] -- The light being visualized.</div>
 
+		<h3>[name]( [page:RectAreaLight light], [page:Hex color] )</h3>
 
+		<div>
 
+			[page:RectAreaLight light] -- The light being visualized.<br /><br />
 
+
 
+			[page:Hex color] -- (optional) if this is not the set the helper will take the color of the light.
 
+		</div>
 
 
 
 		<h2>Properties</h2>
 
@@ -39,6 +43,12 @@ scene.add( helper );
 
 		<h3>[property:RectAreaLight light]</h3>
 
 		<div>Reference to the RectAreaLight being visualized.</div>
 
 
+		<h3>[property:hex color]</h3>
 
+		<div>
 
+						 The color parameter passed in the constructor. Default is *undefined*. If this is changed, the helper's color will update
 
+						the next time [page:.update update] is called.
 
+		</div>
 
+
 
 
 		<h2>Methods</h2>
 
 		<div>See the base [page:Object3D] class for common methods.</div>

+ 11 - 3
docs/api/helpers/SpotLightHelper.html
Vedi File 

@@ -35,8 +35,12 @@
 
 		<h2>Constructor</h2>

 

 

-		<h3>[name]([page:SpotLight light])</h3>

-		<div>light -- The [page:SpotLight] to be visualized.</div>

+		<h3>[name]( [page:SpotLight light], [page:Hex color] )</h3>

+		<div>

+			[page:SpotLight light] -- The [page:SpotLight] to be visualized. <br /><br/>

+			

+			[page:Hex color] -- (optional) if this is not the set the helper will take the color of the light. 

+		</div>

 

 

 		<h2>Properties</h2>

@@ -45,7 +49,6 @@
 
 		<h3>[property:LineSegments cone]</h3>

 		<div>[page:LineSegments] used to visualize the light.</div>

 

-

 		<h3>[property:SpotLight light]</h3>

 		<div>Reference to the [page:SpotLight] being visualized.</div>

 

@@ -58,6 +61,11 @@
 
 			spotLight's [page:Object3D.matrixWorld matrixWorld].

 		</div>

 

+		<h3>[property:hex color]</h3>

+		<div>

+					 The color parameter passed in the constructor. Default is *undefined*. If this is changed, the helper's color will update

+					the next time [page:.update update] is called.

+		</div>

 

 		<h2>Methods</h2>

 		<div>See the base [page:Object3D] class for common methods.</div>

+ 1 - 1
examples/webgl_helpers.html
Vedi File 

@@ -43,7 +43,7 @@
 
 				light.position.set( 200, 100, 150 );
 
 				scene.add( light );
 
 
-				scene.add( new THREE.PointLightHelper( light, 5 ) );
 
+				scene.add( new THREE.PointLightHelper( light, 15 ) );
 
 
 				var gridHelper = new THREE.GridHelper( 400, 40, 0x0000ff, 0x808080 );
 
 				gridHelper.position.y = - 150;

+ 11 - 3
examples/webgl_lights_hemisphere.html
Vedi File 

@@ -87,7 +87,7 @@
 
 
 			if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
 
 
-			var camera, scene, renderer, dirLight, hemiLight;
 
+			var camera, scene, renderer, dirLight, dirLightHeper, hemiLight, hemiLightHelper;
 
 			var mixers = [];
 
 			var stats;
 
 
@@ -113,15 +113,18 @@
 
 				hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff, 0.6 );
 
 				hemiLight.color.setHSL( 0.6, 1, 0.6 );
 
 				hemiLight.groundColor.setHSL( 0.095, 1, 0.75 );
 
-				hemiLight.position.set( 0, 500, 0 );
 
+				hemiLight.position.set( 0, 50, 0 );
 
 				scene.add( hemiLight );
 
 
+				hemiLightHelper = new THREE.HemisphereLightHelper( hemiLight, 10 );
 
+        scene.add( hemiLightHelper );
 
+
 
 				//
 
 
 				dirLight = new THREE.DirectionalLight( 0xffffff, 1 );
 
 				dirLight.color.setHSL( 0.1, 1, 0.95 );
 
 				dirLight.position.set( -1, 1.75, 1 );
 
-				dirLight.position.multiplyScalar( 50 );
 
+				dirLight.position.multiplyScalar( 30 );
 
 				scene.add( dirLight );
 
 
 				dirLight.castShadow = true;
 
@@ -139,6 +142,9 @@
 
 				dirLight.shadow.camera.far = 3500;
 
 				dirLight.shadow.bias = -0.0001;
 
 
+				dirLightHeper = new THREE.DirectionalLightHelper( dirLight, 10 ) 
+				scene.add( dirLightHeper );
 
+
 
 				// GROUND
 
 
 				var groundGeo = new THREE.PlaneBufferGeometry( 10000, 10000 );
 
@@ -239,11 +245,13 @@
 
 					case 72: // h
 
 
 					hemiLight.visible = !hemiLight.visible;
 
+					hemiLightHelper.visible = !hemiLightHelper.visible;
 
 					break;
 
 
 					case 68: // d
 
 
 					dirLight.visible = !dirLight.visible;
 
+					dirLightHeper.visible = !dirLightHeper.visible;
 
 					break;
 
 
 				}

+ 26 - 17
src/helpers/DirectionalLightHelper.js
Vedi File 

@@ -11,7 +11,7 @@ import { Float32BufferAttribute } from '../core/BufferAttribute';
 
 import { BufferGeometry } from '../core/BufferGeometry';
 
 import { LineBasicMaterial } from '../materials/LineBasicMaterial';
 
 
-function DirectionalLightHelper( light, size ) {
 
+function DirectionalLightHelper( light, size, color ) {
 
 
 	Object3D.call( this );
 
 
@@ -21,6 +21,8 @@ function DirectionalLightHelper( light, size ) {
 
 	this.matrix = light.matrixWorld;
 
 	this.matrixAutoUpdate = false;
 
 
+	this.color = color;
 
+
 
 	if ( size === undefined ) size = 1;
 
 
 	var geometry = new BufferGeometry();
 
@@ -32,14 +34,16 @@ function DirectionalLightHelper( light, size ) {
 
 		- size,   size, 0
 
 	], 3 ) );
 
 
-	var material = new LineBasicMaterial( { fog: false } );
 
+	var material = new LineBasicMaterial( { fog: false, color: this.color } );
 
 
-	this.add( new Line( geometry, material ) );
 
+	this.lightPlane = new Line( geometry, material );
 
+	this.add( this.lightPlane );
 
 
 	geometry = new BufferGeometry();
 
 	geometry.addAttribute( 'position', new Float32BufferAttribute( [ 0, 0, 0, 0, 0, 1 ], 3 ) );
 
 
-	this.add( new Line( geometry, material ));
 
+	this.targetLine = new Line( geometry, material );
 
+	this.add( this.targetLine );
 
 
 	this.update();
 
 
@@ -50,13 +54,10 @@ DirectionalLightHelper.prototype.constructor = DirectionalLightHelper;
 
 
 DirectionalLightHelper.prototype.dispose = function () {
 
 
-	var lightPlane = this.children[ 0 ];
 
-	var targetLine = this.children[ 1 ];
 
-
 
-	lightPlane.geometry.dispose();
 
-	lightPlane.material.dispose();
 
-	targetLine.geometry.dispose();
 
-	targetLine.material.dispose();
 
+	this.lightPlane.geometry.dispose();
 
+	this.lightPlane.material.dispose();
 
+	this.targetLine.geometry.dispose();
 
+	this.targetLine.material.dispose();
 
 
 };
 
 
@@ -72,14 +73,22 @@ DirectionalLightHelper.prototype.update = function () {
 
 		v2.setFromMatrixPosition( this.light.target.matrixWorld );
 
 		v3.subVectors( v2, v1 );
 
 
-		var lightPlane = this.children[ 0 ];
 
-		var targetLine = this.children[ 1 ];
 
+		this.lightPlane.lookAt( v3 );
 
+
 
+		if ( this.color !== undefined ) {
 
+
 
+			this.lightPlane.material.color.set( this.color );
 
+			this.targetLine.material.color.set( this.color );
 
+
 
+		} else {
 
+
 
+			this.lightPlane.material.color.copy( this.light.color );
 
+			this.targetLine.material.color.copy( this.light.color );
 
 
-		lightPlane.lookAt( v3 );
 
-		lightPlane.material.color.copy( this.light.color );
 
+		}
 
 
-		targetLine.lookAt( v3 );
 
-		targetLine.scale.z = v3.length();
 
+		this.targetLine.lookAt( v3 );
 
+		this.targetLine.scale.z = v3.length();
 
 
 	};

+ 22 - 11
src/helpers/HemisphereLightHelper.js
Vedi File 

@@ -13,7 +13,7 @@ import { MeshBasicMaterial } from '../materials/MeshBasicMaterial';
 
 import { OctahedronBufferGeometry } from '../geometries/OctahedronGeometry';
 
 import { BufferAttribute } from '../core/BufferAttribute';
 
 
-function HemisphereLightHelper( light, size ) {
 
+function HemisphereLightHelper( light, size, color ) {
 
 
 	Object3D.call( this );
 
 
@@ -23,17 +23,20 @@ function HemisphereLightHelper( light, size ) {
 
 	this.matrix = light.matrixWorld;
 
 	this.matrixAutoUpdate = false;
 
 
+	this.color = color;
 
+
 
 	var geometry = new OctahedronBufferGeometry( size );
 
 	geometry.rotateY( Math.PI * 0.5 );
 
 
-	var material = new MeshBasicMaterial( { vertexColors: VertexColors, wireframe: true } );
 
+	this.material = new MeshBasicMaterial( { wireframe: true, fog: false, color: this.color } );
 
+	if ( this.color === undefined ) this.material.vertexColors = VertexColors;
 
 
 	var position = geometry.getAttribute( 'position' );
 
 	var colors = new Float32Array( position.count * 3 );
 
 
 	geometry.addAttribute( 'color', new BufferAttribute( colors, 3 ) );
 
 
-	this.add( new Mesh( geometry, material ) );
 
+	this.add( new Mesh( geometry, this.material ) );
 
 
 	this.update();
 
 
@@ -60,23 +63,31 @@ HemisphereLightHelper.prototype.update = function () {
 
 
 		var mesh = this.children[ 0 ];
 
 
-		var colors = mesh.geometry.getAttribute( 'color' );
 
+		if ( this.color !== undefined ) {
 
+
 
+			this.material.color.set( this.color );
 
+
 
+		} else {
 
+
 
+			var colors = mesh.geometry.getAttribute( 'color' );
 
 
-		color1.copy( this.light.color );
 
-		color2.copy( this.light.groundColor );
 
+			color1.copy( this.light.color );
 
+			color2.copy( this.light.groundColor );
 
 
-		for ( var i = 0, l = colors.count; i < l; i ++ ) {
 
+			for ( var i = 0, l = colors.count; i < l; i ++ ) {
 
 
-			var color = ( i < ( l / 2 ) ) ? color1 : color2;
 
+				var color = ( i < ( l / 2 ) ) ? color1 : color2;
 
 
-			colors.setXYZ( i, color.r, color.g, color.b );
 
+				colors.setXYZ( i, color.r, color.g, color.b );
 
+
 
+			}
 
+
 
+			colors.needsUpdate = true;
 
 
 		}
 
 
 		mesh.lookAt( vector.setFromMatrixPosition( this.light.matrixWorld ).negate() );
 
 
-		colors.needsUpdate = true;
 
-
 
 	};
 
 
 }();

+ 16 - 4
src/helpers/PointLightHelper.js
Vedi File 

@@ -7,20 +7,24 @@ import { Mesh } from '../objects/Mesh';
 
 import { MeshBasicMaterial } from '../materials/MeshBasicMaterial';
 
 import { SphereBufferGeometry } from '../geometries/SphereGeometry';
 
 
-function PointLightHelper( light, sphereSize ) {
 
+function PointLightHelper( light, sphereSize, color ) {
 
 
 	this.light = light;
 
 	this.light.updateMatrixWorld();
 
 
+	this.color = color;
 
+
 
 	var geometry = new SphereBufferGeometry( sphereSize, 4, 2 );
 
-	var material = new MeshBasicMaterial( { wireframe: true, fog: false } );
 
-	material.color.copy( this.light.color );
 
+	var material = new MeshBasicMaterial( { wireframe: true, fog: false, color: this.color } );
 
 
 	Mesh.call( this, geometry, material );
 
 
 	this.matrix = this.light.matrixWorld;
 
 	this.matrixAutoUpdate = false;
 
 
+	this.update();
 
+
 
+
 
 	/*
 
 	var distanceGeometry = new THREE.IcosahedronGeometry( 1, 2 );
 
 	var distanceMaterial = new THREE.MeshBasicMaterial( { color: hexColor, fog: false, wireframe: true, opacity: 0.1, transparent: true } );
 
@@ -57,7 +61,15 @@ PointLightHelper.prototype.dispose = function () {
 
 
 PointLightHelper.prototype.update = function () {
 
 
-	this.material.color.copy( this.light.color );
 
+	if ( this.color !== undefined ) {
 
+
 
+		this.material.color.set( this.color );
 
+
 
+	} else {
 
+
 
+		this.material.color.copy( this.light.color );
 
+
 
+	}
 
 
 	/*
 
 	var d = this.light.distance;

+ 18 - 11
src/helpers/RectAreaLightHelper.js
Vedi File 

@@ -5,13 +5,12 @@
 
  */
 
 
 import { Object3D } from '../core/Object3D';
 
-import { Vector3 } from '../math/Vector3';
 
 import { Line } from '../objects/Line';
 
 import { LineBasicMaterial } from '../materials/LineBasicMaterial';
 
 import { BufferGeometry } from '../core/BufferGeometry';
 
 import { BufferAttribute } from '../core/BufferAttribute';
 
 
-function RectAreaLightHelper( light ) {
 
+function RectAreaLightHelper( light, color ) {
 
 
 	Object3D.call( this );
 
 
@@ -21,13 +20,17 @@ function RectAreaLightHelper( light ) {
 
 	this.matrix = light.matrixWorld;
 
 	this.matrixAutoUpdate = false;
 
 
-	var material = new LineBasicMaterial( { color: light.color } );
 
+	this.color = color;
 
+
 
+	var material = new LineBasicMaterial( { fog: false, color: this.color } );
 
 
 	var geometry = new BufferGeometry();
 
 
 	geometry.addAttribute( 'position', new BufferAttribute( new Float32Array( 5 * 3 ), 3 ) );
 
 
-	this.add( new Line( geometry, material ) );
 
+	this.line = new Line( geometry, material );
 
+	this.add( this.line );
 
+
 
 
 	this.update();
 
 
@@ -45,18 +48,12 @@ RectAreaLightHelper.prototype.dispose = function () {
 
 
 RectAreaLightHelper.prototype.update = function () {
 
 
-	var line = this.children[ 0 ];
 
-
 
-	// update material
 
-
 
-	line.material.color.copy( this.light.color );
 
-
 
 	// calculate new dimensions of the helper
 
 
 	var hx = this.light.width * 0.5;
 
 	var hy = this.light.height * 0.5;
 
 
-	var position = line.geometry.attributes.position;
 
+	var position = this.line.geometry.attributes.position;
 
 	var array = position.array;
 
 
 	// update vertices
 
@@ -69,6 +66,16 @@ RectAreaLightHelper.prototype.update = function () {
 
 
 	position.needsUpdate = true;
 
 
+	if ( this.color !== undefined ) {
 
+
 
+		this.line.material.color.set( this.color );
 
+
 
+	} else {
 
+
 
+		this.line.material.color.copy( this.light.color );
 
+
 
+	}
 
+
 
 };
 
 
 export { RectAreaLightHelper };

+ 13 - 3
src/helpers/SpotLightHelper.js
Vedi File 

@@ -11,7 +11,7 @@ import { LineBasicMaterial } from '../materials/LineBasicMaterial';
 
 import { Float32BufferAttribute } from '../core/BufferAttribute';
 
 import { BufferGeometry } from '../core/BufferGeometry';
 
 
-function SpotLightHelper( light ) {
 
+function SpotLightHelper( light, color ) {
 
 
 	Object3D.call( this );
 
 
@@ -21,6 +21,8 @@ function SpotLightHelper( light ) {
 
 	this.matrix = light.matrixWorld;
 
 	this.matrixAutoUpdate = false;
 
 
+	this.color = color;
 
+
 
 	var geometry = new BufferGeometry();
 
 
 	var positions = [
 
@@ -45,7 +47,7 @@ function SpotLightHelper( light ) {
 
 
 	geometry.addAttribute( 'position', new Float32BufferAttribute( positions, 3 ) );
 
 
-	var material = new LineBasicMaterial( { fog: false } );
 
+	var material = new LineBasicMaterial( { fog: false, color: this.color } );
 
 
 	this.cone = new LineSegments( geometry, material );
 
 	this.add( this.cone );
 
@@ -83,7 +85,15 @@ SpotLightHelper.prototype.update = function () {
 
 
 		this.cone.lookAt( vector2.sub( vector ) );
 
 
-		this.cone.material.color.copy( this.light.color );
 
+		if ( this.color !== undefined ) {
 
+
 
+			this.cone.material.color.set( this.color );
 
+
 
+		} else {
 
+
 
+			this.cone.material.color.copy( this.light.color );
 
+
 
+		}
 
 
 	};