diff --git a/docs/api/helpers/DirectionalLightHelper.html b/docs/api/helpers/DirectionalLightHelper.html index 6b193d201de0b976eafe2977bdb61f2ad781ebc3..b9ebc566924e074cef8f1d5655e284a51f9ace0f 100644 --- a/docs/api/helpers/DirectionalLightHelper.html +++ b/docs/api/helpers/DirectionalLightHelper.html @@ -1,7 +1,7 @@ - + @@ -32,10 +32,13 @@

Constructor

-

[name]( [page:DirectionalLight light], [page:Number size] )

+

[name]( [page:DirectionalLight light], [page:Number size], [page:Hex color] )

- [page:DirectionalLight light]-- The light to be visualized.
- [page:Number size] -- (optional) dimensions of the plane. Default is *1*.

+ [page:DirectionalLight light]-- The light to be visualized.

+ + [page:Number size] -- (optional) dimensions of the plane. Default is *1*.

+ + [page:Hex color] -- (optional) if this is not the set the helper will take the color of the light.
@@ -58,6 +61,11 @@ light's [page:Object3D.matrixWorld matrixWorld]. +

[property:hex color]

+
+ 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. +

Methods

diff --git a/docs/api/helpers/HemisphereLightHelper.html b/docs/api/helpers/HemisphereLightHelper.html index 1c0aefd2742dc8f898ef54beb2fd57a07eca877b..06b7421107948abc7f3f025aca995d3a46b9805e 100644 --- a/docs/api/helpers/HemisphereLightHelper.html +++ b/docs/api/helpers/HemisphereLightHelper.html @@ -1,7 +1,7 @@ - + @@ -29,10 +29,13 @@ scene.add( helper );

Constructor

-

[name]([page:HemisphereLight light], [page:Number sphereSize])

+

[name]( [page:HemisphereLight light], [page:Number sphereSize], [page:Hex color] )

- [page:HemisphereLight light] -- The light being visualized.
- [page:Number size] -- The size of the mesh used to visualize the light. + [page:HemisphereLight light] -- The light being visualized.

+ + [page:Number size] -- The size of the mesh used to visualize the light.

+ + [page:Hex color] -- (optional) if this is not the set the helper will take the color of the light.
@@ -51,6 +54,12 @@ scene.add( helper ); hemisphereLight's [page:Object3D.matrixWorld matrixWorld]. +

[property:hex color]

+
+ 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. +
+

Methods

See the base [page:Object3D] class for common methods.
diff --git a/docs/api/helpers/PointLightHelper.html b/docs/api/helpers/PointLightHelper.html index 721545c6900d6b655f729c2cdb93b90d370557bd..60f0a7a8c3d45e6e9f422934231c26b6e4b758c1 100644 --- a/docs/api/helpers/PointLightHelper.html +++ b/docs/api/helpers/PointLightHelper.html @@ -1,7 +1,7 @@ - + @@ -37,12 +37,14 @@

Constructor

-

[name]( [page:PointLight light], [page:Float sphereSize] )

+

[name]( [page:PointLight light], [page:Float sphereSize], [page:Hex color] )

- [page:PointLight light] -- The light to be visualized.
- [page:Float sphereSize] -- (optional) The size of the sphere helper. Default is *1*. -
+ [page:PointLight light] -- The light to be visualized.

+ + [page:Float sphereSize] -- (optional) The size of the sphere helper. Default is *1*.

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

Properties

See the base [page:Mesh] class for common properties.
@@ -59,7 +61,12 @@ pointLight's [page:Object3D.matrixWorld matrixWorld]. - +

[property:hex color]

+
+ 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. +
+

Methods

See the base [page:Mesh] class for common methods.
diff --git a/docs/api/helpers/RectAreaLightHelper.html b/docs/api/helpers/RectAreaLightHelper.html index 3ea1c2cbcc367c91ab573a93091793fe3e71125d..fcdd10ffef2a8c582a57e370a48539e4d3ecedf9 100644 --- a/docs/api/helpers/RectAreaLightHelper.html +++ b/docs/api/helpers/RectAreaLightHelper.html @@ -29,8 +29,12 @@ scene.add( helper );

Constructor

-

[name]( [page:RectAreaLight light] )

-
[page:RectAreaLight light] -- The light being visualized.
+

[name]( [page:RectAreaLight light], [page:Hex color] )

+
+ [page:RectAreaLight light] -- The light being visualized.

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

Properties

@@ -39,6 +43,12 @@ scene.add( helper );

[property:RectAreaLight light]

Reference to the RectAreaLight being visualized.
+

[property:hex color]

+
+ 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. +
+

Methods

See the base [page:Object3D] class for common methods.
diff --git a/docs/api/helpers/SpotLightHelper.html b/docs/api/helpers/SpotLightHelper.html index a51d93a0d1688694e717ce5cc98ddec1e52374e9..c0e8e5234857f65b5db77b68cf535814bea36e23 100644 --- a/docs/api/helpers/SpotLightHelper.html +++ b/docs/api/helpers/SpotLightHelper.html @@ -35,8 +35,12 @@

Constructor

-

[name]([page:SpotLight light])

-
light -- The [page:SpotLight] to be visualized.
+

[name]( [page:SpotLight light], [page:Hex color] )

+
+ [page:SpotLight light] -- The [page:SpotLight] to be visualized.

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

Properties

@@ -45,7 +49,6 @@

[property:LineSegments cone]

[page:LineSegments] used to visualize the light.
-

[property:SpotLight light]

Reference to the [page:SpotLight] being visualized.
@@ -58,6 +61,11 @@ spotLight's [page:Object3D.matrixWorld matrixWorld]. +

[property:hex color]

+
+ 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. +

Methods

See the base [page:Object3D] class for common methods.
diff --git a/examples/webgl_helpers.html b/examples/webgl_helpers.html index 3d7870af4683a27f369b5ac58c4e1d49e13ffcef..01d3bdf709ca560775df3d0ed51088cbee1524ec 100644 --- a/examples/webgl_helpers.html +++ b/examples/webgl_helpers.html @@ -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; diff --git a/examples/webgl_lights_hemisphere.html b/examples/webgl_lights_hemisphere.html index 4f5f821de355732d8359674e3b14a650856bafc1..ea235b0049a1a25e6860648a40217d605aa21fbe 100644 --- a/examples/webgl_lights_hemisphere.html +++ b/examples/webgl_lights_hemisphere.html @@ -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; } diff --git a/src/helpers/DirectionalLightHelper.js b/src/helpers/DirectionalLightHelper.js index 08714d5b9469619f3003860c7315acaece8d69b0..cd85df136dfe9bcc24cb527f225c292e10e01b4c 100644 --- a/src/helpers/DirectionalLightHelper.js +++ b/src/helpers/DirectionalLightHelper.js @@ -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(); }; diff --git a/src/helpers/HemisphereLightHelper.js b/src/helpers/HemisphereLightHelper.js index 345cbe0229eb50c04cce6333e3019dfeb92f94cb..bbf6bc4f023196511445f81aebd6a4d9045fdbd8 100644 --- a/src/helpers/HemisphereLightHelper.js +++ b/src/helpers/HemisphereLightHelper.js @@ -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; - }; }(); diff --git a/src/helpers/PointLightHelper.js b/src/helpers/PointLightHelper.js index e62ff776a1b1d8d12733554fadb96785d6cfd076..8e5b17103d76fc00ed42ef126bc37370dfa77fa0 100644 --- a/src/helpers/PointLightHelper.js +++ b/src/helpers/PointLightHelper.js @@ -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; diff --git a/src/helpers/RectAreaLightHelper.js b/src/helpers/RectAreaLightHelper.js index 23b4d06fc48f8b5306f66b811f0066211aa085d1..55d20e49e288812f750337f4bc5b6ba593ab4628 100644 --- a/src/helpers/RectAreaLightHelper.js +++ b/src/helpers/RectAreaLightHelper.js @@ -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 }; diff --git a/src/helpers/SpotLightHelper.js b/src/helpers/SpotLightHelper.js index 9fd8b70680ec2e7f29c5f3798008d8e9fb1de396..b1d74267bdf737664aae7c0fa61378d9879bdb59 100644 --- a/src/helpers/SpotLightHelper.js +++ b/src/helpers/SpotLightHelper.js @@ -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 ); + + } };