2
0
Эх сурвалжийг харах

Merge pull request #10156 from looeee/dovs/extras/helpers/improve

Improved docs for extras / helpers
Mr.doob 8 жил өмнө
parent
commit
2392828ff1

+ 32 - 30
docs/api/extras/helpers/ArrowHelper.html

@@ -12,12 +12,21 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">An 3D arrow Object.</div>
+		<div class="desc">An 3D arrow object for visualizing directions.</div>
 
 
 		<h2>Example</h2>
 
-		<code>var dir = new THREE.Vector3( 1, 0, 0 );
+		<div>[example:webgl_geometries WebGL / geometries]</div>
+		<div>[example:webgl_geometry_normals WebGL / geometry / normals]</div>
+		<div>[example:webgl_shadowmesh WebGL / shadowmesh]</div>
+
+		<code>
+		var dir = new THREE.Vector3( 1, 2, 0 );
+
+		//normalize the direction vector (convert to vector of length 1)
+		dir.normalize();
+
 		var origin = new THREE.Vector3( 0, 0, 0 );
 		var length = 1;
 		var hex = 0xffff00;
@@ -33,59 +42,52 @@
 
 		<h3>[name]([page:Vector3 dir], [page:Vector3 origin], [page:Number length], [page:Number hex], [page:Number headLength], [page:Number headWidth] )</h3>
 		<div>
-		dir -- Vector3 -- direction from origin. Must be a unit vector. <br />
-		origin -- Vector3 <br />
-		length -- scalar <br />
-		hex -- hexadecimal value to define color ex:0xffff00<br />
-		headLength -- The length of the head of the arrow<br />
-		headWidth -- The length of the width of the arrow
+		[page:Vector3 dir] -- direction from origin. Must be a unit vector. <br />
+		[page:Vector3 origin] -- Point at which the arrow starts.<br />
+		[page:Number length] -- length of the arrow. Default is *1*.<br />
+		[page:Number hex] -- hexadecimal value to define color. Default is 0xffff00.<br />
+		[page:Number headLength] -- The length of the head of the arrow. Default is 0.2 * length.<br />
+		[page:Number headWidth] -- The length of the width of the arrow. Default is 0.2 * headLength.
 		</div>
-		<div>
-		This creates an arrow starting in origin in the direction dir for a certain length. It is also possible to change color.
-		</div>
-
 
 		<h2>Properties</h2>
-
+		<div>See the base [page:Object3D] class for common properties.</div>
 
 
 		<h3>[property:Line line]</h3>
-		<div>
-		Contains the line part of the arrowHelper.
-		</div>
+		<div>Contains the line part of the arrowHelper.</div>
 
 		<h3>[property:Mesh cone]</h3>
-		<div>
-		Contains the cone part of the arrowHelper.
-		</div>
+		<div>Contains the cone part of the arrowHelper.</div>
+
+
+
 
 		<h2>Methods</h2>
+		<div>See the base [page:Object3D] class for common methods.</div>
 
 
 
 		<h3>[method:null setColor]([page:Number hex])</h3>
 		<div>
-		hex -- The hexadicmal value of the color
-		</div>
-		<div>
+		hex -- The hexadicmal value of the color.<br /><br />
+
 		Sets the color of the arrowHelper.
 		</div>
 
 		<h3>[method:null setLength]([page:Number length], [page:Number headLength], [page:Number headWidth])</h3>
 		<div>
-		length -- The desired length<br />
-		headLength -- The length of the head of the arrow<br />
-		headWidth -- The length of the width of the arrow
-		</div>
-		<div>
+		length -- The desired length.<br />
+		headLength -- The length of the head of the arrow.<br />
+		headWidth -- The length of the width of the arrow.<br /><br />
+
 		Sets the length of the arrowhelper.
 		</div>
 
 		<h3>[method:null setDirection]([page:Vector3 dir])</h3>
 		<div>
-		dir -- The desired direction. Must be a unit vector.
-		</div>
-		<div>
+		dir -- The desired direction. Must be a unit vector.<br /><br />
+
 		Sets the direction of the arrowhelper.
 		</div>
 

+ 20 - 9
docs/api/extras/helpers/AxisHelper.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		[page:Line] &rarr;
+		[page:LineSegments] &rarr;
 
 		<h1>[name]</h1>
 
@@ -18,21 +18,32 @@
 
 		<h2>Example</h2>
 
-                <code>var axisHelper = new THREE.AxisHelper( 5 );
-		scene.add( axisHelper );
-                </code>
+		<div>[example:webgl_geometries WebGL / geometries]</div>
+		<div>[example:webgl_geometries2 WebGL / geometries2]</div>
+		<div>[example:webgl_geometry_convex WebGL / geometry / convex]</div>
+		<div>[example:webgl_geometry_spline_editor WebGL / geometry / spline / editor]</div>
+
+
+
+		<code>
+var axisHelper = new THREE.AxisHelper( 5 );
+scene.add( axisHelper );
+    </code>
 
 		<h2>Constructor</h2>
 
 
-		<h3>[name]([page:Number size])</h3>
+		<h3>[name]( [page:Number size] )</h3>
 		<div>
-		size -- Define the size of the line representing the axes.
-		</div>
-		<div>
-		Creates an axisHelper with lines of length size.
+		[page:Number size] -- (optional )size of the lines representing the axes. Default is *1*.
 		</div>
 
+		<h2>Properties</h2>
+		<div>See the base [page:LineSegments] class for common properties.</div>
+
+		<h2>Methods</h2>
+		<div>See the base [page:LineSegments] class for common methods.</div>
+
 		<h2>Source</h2>
 
 		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

+ 13 - 16
docs/api/extras/helpers/BoundingBoxHelper.html

@@ -27,42 +27,39 @@
 		bbox.update();
 		scene.add( bbox );
 		</code>
-		<div>Note that this helper will create a wireframe [page:Mesh] object with a [page:BoxGeometry]; the resulting bounding box object will therefore have face diagonals. You may want to use [page:BoxHelper], which generates a [page:Line] object without face diagonals.</div>
+		<div>
+			Note that this helper will create a wireframe [page:Mesh] object with a [page:BoxGeometry];
+			the resulting bounding box object will therefore have face diagonals. You may want to
+			use [page:BoxHelper], which generates a [page:LineSegments] object without face diagonals.
+		</div>
 
 
 		<h2>Constructor</h2>
 
 
-		<h3>[name]([page:Object3D object], [page:Number hex])</h3>
+		<h3>[name]( [page:Object3D object], [page:Number hex] )</h3>
 		<div>
-		object -- Object3D -- the object3D to show the world-axis-aligned boundingbox.<br />
-		hex -- hexadecimal value to define color ex:0x888888
-		</div>
-		<div>
-		This creates an line object to the boundingbox.
+		[page:Object3D object] -- Object3D -- the object3D to show the world-axis-aligned boundingbox.<br />
+		[page:Number hex] -- hexadecimal value that defines the box's color. Default is 0x888888.
 		</div>
 
 
 		<h2>Properties</h2>
+		<div>See the base [page:Mesh] class for common properties.</div>
 
 
 
 		<h3>[property:Object3D object]</h3>
-		<div>
-		Contains the object3D to show the world-axis-aligned boundingbox.
-		</div>
+		<div>Contains the object3D to show the world-axis-aligned boundingbox.</div>
 
 		<h3>[property:Box3 box]</h3>
-		<div>
-		Contains the bounding box of the object.
-		</div>
+		<div>Contains the bounding box of the object.</div>
 
 		<h2>Methods</h2>
+		<div>See the base [page:LineSegments] class for common methods.</div>
 
 		<h3>[method:null update]()</h3>
-		<div>
-		Updates the BoundingBoxHelper based on the object property.
-		</div>
+		<div>Updates the BoundingBoxHelper based on the object property.</div>
 
 
 		<h2>Source</h2>

+ 27 - 9
docs/api/extras/helpers/BoxHelper.html

@@ -8,39 +8,57 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		[page:Line] &rarr;
+		[page:LineSegments] &rarr;
 
 		<h1>[name]</h1>
 
-		<div class="desc">Helper object to show a wireframe box (with no face diagonals) around an object</div>
+		<div class="desc">
+			Helper object to show the world-axis-aligned bounding box around an object.
+
+			Note that the object must have a [page:Geometry] or [page:BufferGeometry] for this to work,
+			so it won't work with [page:Sprite Sprites].
+		</div>
 
 
 		<h2>Example</h2>
 
-		<code>var sphere = new THREE.SphereGeometry();
+		<div>[example:webgl_helpers WebGL / helpers]</div>
+		<div>[example:webgl_loader_nrrd WebGL / loader / nrrd]</div>
+		<div>[example:webgl_buffergeometry_drawcalls advanced / buffergeometry / drawcalls]</div>
+
+
+		<code>
+		var sphere = new THREE.SphereGeometry();
 		var object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ) );
-		var box = new THREE.BoxHelper( object );
+		var box = new THREE.BoxHelper( object, 0xffff00 );
 		scene.add( box );
 		</code>
 
 
 		<h2>Constructor</h2>
 
+
 		<h3>[name]( [page:Object3D object], [page:Color color] )</h3>
 		<div>
-		object -- Object3D -- the object3D to show the world-axis-aligned boundingbox.<br />
-		color -- The color of the helper. This can be a [page:Color], a hexadecimal value and an CSS-Color name. Default is 0xffff00
+		[page:Object3D object]  -- the object3D to show the world-axis-aligned boundingbox.<br />
+		[page:Color color] --  (optional) hexadecimal value that defines the box's color. Default is 0xffff00.<br /><br />
+
+		Creates a new wireframe box that bounds the passed object. Internally this uses [page:Box3.setFromObject]
+		to calculate the dimensions. Note that this includes any children.
 		</div>
-		<div>Creates a new wireframe box matching the size of the passed box.</div>
 
 		<h2>Properties</h2>
+		<div>See the base [page:LineSegments] class for common properties.</div>
 
-		<div>(none)</div>
 
 		<h2>Methods</h2>
+		<div>See the base [page:LineSegments] class for common methods.</div>
 
 		<h3>[method:null update]( [page:Object3D object] )</h3>
-		<div>Updates the helper's geometry to match the dimensions of the [page:Geometry.boundingBox bounding box] of the passed object's geometry.</div>
+		<div>
+			Updates the helper's geometry to match the dimensions of the
+		 	of the passed object, including any children. See [page:Box3.setFromObject].
+		</div>
 
 		<h2>Source</h2>
 

+ 37 - 15
docs/api/extras/helpers/CameraHelper.html

@@ -8,48 +8,70 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		[page:Line] &rarr;
+		[page:LineSegments] &rarr;
 
 		<h1>[name]</h1>
 
 		<div class="desc">
-		The camera Helper is an Object3D which helps visualizing what a camera contains in its frustum.<br />
-		It visualizes the frustum with an line Geometry.
+		This helps with visualizing what a camera contains in its frustum.<br />
+		It visualizes the frustum of a camera using a [page:LineSegments].
 		</div>
 
+		<h2>Example</h2>
+
+		<div>[example:webgl_camera WebGL / camera]</div>
+		<div>[example:webgl_geometry_extrude_splines WebGL / extrude / splines]</div>
+
+		<code>
+var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+
+var helper = new THREE.CameraHelper( cameraPerspective );
+scene.add( helper );
+		</code>
+
 
 		<h2>Constructor</h2>
 
 
-		<h3>[name]([page:Camera camera])</h3>
-		<div>
-		camera -- The camera to visualize.
-		</div>
+		<h3>[name]( [page:Camera camera] )</h3>
 		<div>
+		[page:Camera camera] -- The camera to visualize.<br /><br />
+
 		This create a new [Name] for the specified camera.
 		</div>
 
 
+
 		<h2>Properties</h2>
+		<div>See the base [page:LineSegments] class for common properties.</div>
 
 
-		<h3>[property:object pointMap]</h3>
-		<div>
-		This contains the points to viualize the cameraHelper
-		</div>
 
 		<h3>[property:Camera camera]</h3>
+		<div>The camera being visualized.</div>
+
+		<h3>[property:object pointMap]</h3>
+		<div>This contains the points used to visualize the camera.</div>
+
+		<h3>[property:object matrix]</h3>
+		<div>Reference to the [page:Object3D.matrixWorld camera.matrixWorld].</div>
+
+		<h3>[property:object matrixAutoUpdate]</h3>
 		<div>
-		The camera to visualize.
+			See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
+			camera's [page:Object3D.matrixWorld matrixWorld].
 		</div>
 
+
+
+
+
 		<h2>Methods</h2>
+		<div>See the base [page:LineSegments] class for common methods.</div>
 
 
 		<h3>[method:null update]()</h3>
-		<div>
-		Updates the helper based on the projectionMatrix of the camera.
-		</div>
+		<div>Updates the helper based on the projectionMatrix of the camera.</div>
 
 		<h2>Source</h2>
 

+ 35 - 19
docs/api/extras/helpers/DirectionalLightHelper.html

@@ -12,47 +12,63 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">Visualize a [page:DirectionalLight]'s effect on the scene</div>
+		<div class="desc">
+			Helper object to assist with visualizing a [page:DirectionalLight]'s effect on the scene.
+
+			This consists of plane and a line representing the light's position and direction.
+		</div>
+
+		<h2>Example</h2>
+
+		<code>
+		var light = new THREE.DirectionalLight( 0xFFFFFF );
+
+		var helper = new THREE.DirectionalLightHelper( light, 5 );
+
+		scene.add( helper );
+		</code>
 
 
 		<h2>Constructor</h2>
 
 
-		<h3>[name]([page:DirectionalLight light], [page:Number size])</h3>
-		<div>
-		light -- [page:DirectionalLight] -- Light to visualize <br />
-		size -- dimensions of the plane
-		</div>
+		<h3>[name]( [page:DirectionalLight light], [page:Number size] )</h3>
 		<div>
-		Creates a line and plane to visualize the light's position and direction
+		[page:DirectionalLight light]-- The light to be visualized. <br />
+		[page:Number size] -- (optional) dimensions of the plane. Default is *1*.<br /><br />
 		</div>
 
 
 		<h2>Properties</h2>
+		<div>See the base [page:Object3D] class for common properties.</div>
 
 
 		<h3>[property:Line lightPlane]</h3>
-		<div>
-		Contains the line mesh showing the location of the directional light.
-		</div>
+		<div>Contains the line mesh showing the location of the directional light.</div>
 
 		<h3>[property:DirectionalLight light]</h3>
-		<div>
-		Contains the directionalLight.
-		</div>
+		<div>Reference to the [page:DirectionalLight directionalLight] being visualized.</div>
 
-		<h3>[property:Line targetLine]</h3>
+		<h3>[property:object matrix]</h3>
+		<div>Reference to the light's [page:Object3D.matrixWorld matrixWorld].</div>
+
+		<h3>[property:object matrixAutoUpdate]</h3>
 		<div>
-		Contains the line mesh that shows the direction of the light.
+			See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
+			light's [page:Object3D.matrixWorld matrixWorld].
 		</div>
 
+
+
 		<h2>Methods</h2>
+		<div>See the base [page:Object3D] class for common properties.</div>
 
+		<h3>[method:null dispose]()</h3>
+		<div>Dispose of the directionalLightHelper.</div>
 
-		<h3>.[method:null update]()</h3>
-		<div>
-		Updates the helper to match the position and direction of the [page:.light].
-		</div>
+
+		<h3>[method:null update]()</h3>
+		<div>Updates the helper to match the position and direction of the [page:.light directionalLight] being visualized.</div>
 
 		<h2>Source</h2>
 

+ 30 - 12
docs/api/extras/helpers/FaceNormalsHelper.html

@@ -8,47 +8,65 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		[page:Line] &rarr;
+		[page:LineSegments] &rarr;
 
 		<h1>[name]</h1>
 
-		<div class="desc">Renders [page:ArrowHelper arrows] to visualize an object's [page:Face3 face] normals. Requires that the object's geometry be an instance of [page:Geometry] (does not work with [page:BufferGeometry]), and that face normals have been specified on all [page:Face3 faces] or calculated with [page:Geometry.computeFaceNormals computeFaceNormals].</div>
+		<div class="desc">
+			Renders [page:ArrowHelper arrows] to visualize an object's [page:Face3 face] normals.
+			Requires  that face normals have been specified on all 	[page:Face3 faces] or calculated with [page:Geometry.computeFaceNormals computeFaceNormals].</div>
+
+			Note that this only works with the objects whose geometry is an instance of [page:Geometry].
+			For [page:BufferGeometry] use a [page:VertexNormalsHelper] instead.
+		<div>
+
 
 		<h2>Example</h2>
 
+		<div>[example:webgl_helpers WebGL / helpers]</div>
+
 		<code>
 		geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
 		material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
-		object = new THREE.Mesh( geometry, material );
+		box = new THREE.Mesh( geometry, material );
 
-		edges = new THREE.FaceNormalsHelper( object, 2, 0x00ff00, 1 );
+		helper = new THREE.FaceNormalsHelper( box, 2, 0x00ff00, 1 );
 
 		scene.add( object );
-		scene.add( edges );
+		scene.add( helper );
 		</code>
-		[example:webgl_helpers Example using various helpers]
 
 		<h2>Constructor</h2>
 
 
 		<h3>[name]( [page:Object3D object], [page:Number size], [page:Color color], [page:Number linewidth] )</h3>
 		<div>
-		object -- object for which to render face normals<br />
-		size -- size (length) of the arrows<br />
-		color -- color of the arrows<br />
-		linewidth -- width of the arrow lines
+		[page:Object3D object] -- object for which to render face normals.<br />
+		[page:Number size] -- (optional) length of the arrows. Default is *1*.<br />
+		[page:Hex color] -- (optional) hex color of the arrows. Default is *0xffff00*.<br />
+		[page:Number linewidth] -- (optional) width of the arrow lines.  Default is *1*.
 		</div>
 
 
 		<h2>Properties</h2>
+		<div>See the base [page:LineSegments] class for common properties.</div>
 
-		<h3>[property:Object3D object]</h3>
+		<h3>[property:object matrixAutoUpdate]</h3>
 		<div>
-		The attached object
+			See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
+			objects's [page:Object3D.matrixWorld matrixWorld].
 		</div>
 
+		<h3>[property:Object3D object]</h3>
+		<div>The object for which the face normals are being visualized.</div>
+
+		<h3>[property:Number size]</h3>
+		<div>Length of the arrows. Default is *1*.</div>
+
+
 
 		<h2>Methods</h2>
+		<div>See the base [page:LineSegments] class for common methods.</div>
 
 
 		<h3>[method:null update]()</h3>

+ 31 - 14
docs/api/extras/helpers/HemisphereLightHelper.html

@@ -12,40 +12,57 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">Creates a visual aid for a [page:HemisphereLight HemisphereLight].</div>
+		<div class="desc">
+			Creates a visual aid consisting of a spherical [page:Mesh] for a [page:HemisphereLight HemisphereLight].
+		</div>
+
+		<h3>Example</h3>
+
+		<code>
+var light = new THREE.HemisphereLight( 0xffffbb, 0x080820, 1 );
+
+var helper = new THREE.HemisphereLightHelper( light, 5 );
+
+scene.add( helper );
+		</code>
 
 
 		<h2>Constructor</h2>
 
 		<h3>[name]([page:HemisphereLight light], [page:Number sphereSize])</h3>
 		<div>
-		light -- The HemisphereLight. <br />
-		sphereSize -- The size of the sphere that shows the location.
-		</div>
-		<div>
-		Creates an helper for the hemispherelight.
+		[page:HemisphereLight light] -- The light being visualized. <br />
+		[page:Number sphereSize] -- The size of the sphere used to visualize te light.
 		</div>
 
 
 		<h2>Properties</h2>
+		<div>See the base [page:Object3D] class for common properties.</div>
+
+		<h3>[property:HemisphereLight light]</h3>
+		<div>Reference to the HemisphereLight being visualized.</div>
 
 		<h3>[property:Mesh lightSphere]</h3>
-		<div>
-		The sphere mesh that shows the location of the hemispherelight.
-		</div>
+		<div>The sphere mesh that shows the location of the hemispherelight.</div>
 
-		<h3>[property:HemisphereLight light]</h3>
+		<h3>[property:object matrix]</h3>
+		<div>Reference to the hemisphereLight's [page:Object3D.matrixWorld matrixWorld].</div>
+
+		<h3>[property:object matrixAutoUpdate]</h3>
 		<div>
-		Contains the HemisphereLight.
+			See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
+			hemisphereLight's [page:Object3D.matrixWorld matrixWorld].
 		</div>
 
 
 		<h2>Methods</h2>
+		<div>See the base [page:Object3D] class for common methods.</div>
+
+		<h3>[method:null dispose]()</h3>
+		<div>Dispose of the hemisphereLightHelper.</div>
 
 		<h3>[method:null update]()</h3>
-		<div>
-		Updates the helper to match the position and direction of the [page:.light].
-		</div>
+		<div>Updates the helper to match the position and direction of the [page:.light].</div>
 
 
 		<h2>Source</h2>

+ 28 - 10
docs/api/extras/helpers/PointLightHelper.html

@@ -12,12 +12,18 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">This displays a helper object for a [page:PointLight] </div>
+		<div class="desc">
+			This displays a helper object consisting of a spherical [page:Mesh] for visualizing
+			 a [page:PointLight].
+		 </div>
 
 
 		<h2>Example</h2>
 
-		<code>var pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
+		[example:webgl_helpers WebGL /  helpers]
+
+		<code>
+		var pointLight = new THREE.PointLight( 0xff0000, 1, 100 );
 		pointLight.position.set( 10, 10, 10 );
 		scene.add( pointLight );
 
@@ -25,32 +31,44 @@
 		var pointLightHelper = new THREE.PointLightHelper( pointLight, sphereSize );
 		scene.add( pointLightHelper );
 		</code>
-		[example:webgl_helpers Example using various helpers]
+
+
 
 
 		<h2>Constructor</h2>
 
-		<h3>[name]([page:PointLight light], [page:Float sphereSize])</h3>
+		<h3>[name]( [page:PointLight light], [page:Float sphereSize] )</h3>
 		<div>
-		light -- The [page:PointLight] to display. <br />
-		sphereSize -- The size of the sphere helper
+		[page:PointLight light] -- The light to be visualized. <br />
+		 [page:Float sphereSize] -- (optional) The size of the sphere helper. Default is *1*.
 		</div>
 
 
 		<h2>Properties</h2>
+		<div>See the base [page:Mesh] class for common properties.</div>
 
 		<h3>[property:PointLight light]</h3>
+		<div>The [page:PointLight] that is being visualized.</div>
+
+		<h3>[property:object matrix]</h3>
+		<div>Reference to the pointLight's [page:Object3D.matrixWorld matrixWorld].</div>
+
+		<h3>[property:object matrixAutoUpdate]</h3>
 		<div>
-		The [page:PointLight] that is being represented.
+			See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
+			pointLight's [page:Object3D.matrixWorld matrixWorld].
 		</div>
 
 
 		<h2>Methods</h2>
+		<div>See the base [page:Mesh] class for common methods.</div>
+
+		<h3>[method:null dispose]()</h3>
+		<div>Dispose of the pointLightHelper.</div>
+
 
 		<h3>[method:null update]()</h3>
-		<div>
-		Updates the light helper.
-		</div>
+		<div>Updates the helper to match the position of the [page:.light].</div>
 
 		<h2>Source</h2>
 

+ 73 - 0
docs/api/extras/helpers/RectAreaLightHelper.html

@@ -0,0 +1,73 @@
+<!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:Object3D] &rarr;
+
+		<h1>[name]</h1>
+
+		<div class="desc">
+			Creates a visual aid for a [page:RectAreaLight].
+		</div>
+
+		<h3>Example</h3>
+
+		<code>
+var light = new THREE.RectAreaLight( 0xffffbb, 1.0, 5, 5 );
+
+var helper = new THREE.RectAreaLightHelper( light );
+
+scene.add( helper );
+		</code>
+
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [page:HemisphereLight light] )</h3>
+		<div>[page:HemisphereLight light] -- The light being visualized.</div>
+
+
+		<h2>Properties</h2>
+		<div>See the base [page:Object3D] class for common properties.</div>
+
+		<h3>[property:HemisphereLight light]</h3>
+		<div>Reference to the RectAreaLight being visualized.</div>
+
+		<h3>[property:Mesh lightMat]</h3>
+		<div>[page:MeshBasicMaterial] used to visualize the light. This be be rendered the same color as the [page:.light]</div>
+
+		<h3>[property:Mesh lightMesh]</h3>
+		<div>[page:Mesh] used to visualize the light. Used to show the front (light-emitting side) of the light.</div>
+
+		<h3>[property:Mesh lightShape]</h3>
+		<div>[page:ShapeGeometry] used to create the mesh's that visualize the light.</div>
+
+		<h3>[property:Mesh lightWireMat]</h3>
+		<div>[page:MeshBasicMaterial] used to visualize the light's outline. This be be rendered the same color as the [page:.light]</div>
+
+		<h3>[property:Mesh lightWireMesh]</h3>
+		<div>[page:Mesh] used to visualize the light's outline. Used to show the back (non light-emitting side) of the light.</div>
+
+
+
+		<h2>Methods</h2>
+		<div>See the base [page:Object3D] class for common methods.</div>
+
+		<h3>[method:null dispose]()</h3>
+		<div>Dispose of the rectAreaLightHelper.</div>
+
+		<h3>[method:null update]()</h3>
+		<div>Updates the helper to match the position and direction of the [page:.light].</div>
+
+
+		<h2>Source</h2>
+
+		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+	</body>
+</html>

+ 1 - 1
docs/api/extras/helpers/SkeletonHelper.html

@@ -46,7 +46,7 @@ scene.add( helper );
 
 		<h3>[property:Array bones]</h3>
 		<div>
-		The list of bones that the helper renders as [page:Line Line]s.
+		The list of bones that the helper renders as [page:Line Lines].
 		</div>
 
 		<h3>[property:Object root]</h3>

+ 18 - 8
docs/api/extras/helpers/SpotLightHelper.html

@@ -12,7 +12,7 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">This displays a cylinder helper object for a [page:SpotLight] </div>
+		<div class="desc">This displays a cone shaped helper object for a [page:SpotLight].</div>
 
 		<h2>Example</h2>
 		<iframe src='../examples/webgl_lights_spotlight.html'></iframe>
@@ -36,27 +36,37 @@
 
 
 		<h3>[name]([page:SpotLight light])</h3>
-		<div>
-		light -- The [page:SpotLight] to display
-		</div>
+		<div>light -- The [page:SpotLight] to be visualized.</div>
 
 
 		<h2>Properties</h2>
+		<div>See the base [page:Object3D] class for common properties.</div>
+
+		<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>
+
+		<h3>[property:object matrix]</h3>
+		<div>Reference to the spotLight's [page:Object3D.matrixWorld matrixWorld].</div>
+
+		<h3>[property:object matrixAutoUpdate]</h3>
 		<div>
-		The [page:SpotLight]
+			See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
+			spotLight's [page:Object3D.matrixWorld matrixWorld].
 		</div>
 
 
 		<h2>Methods</h2>
+		<div>See the base [page:Object3D] class for common methods.</div>
 
+		<h3>[method:null update]()</h3>
+		<div>Disposes of the light helper.</div>
 
 		<h3>[method:null update]()</h3>
-		<div>
-		Updates the light helper.
-		</div>
+		<div>Updates the light helper.</div>
 
 		<h2>Source</h2>
 

+ 33 - 15
docs/api/extras/helpers/VertexNormalsHelper.html

@@ -12,42 +12,60 @@
 
 		<h1>[name]</h1>
 
-		<div class="desc">Renders [page:ArrowHelper arrows] to visualize an object's vertex normal vectors. Requires that normals have been specified in a [page:BufferAttribute custom attribute] or have been calculated using [page:Geometry.computeVertexNormals computeVertexNormals]. </div>
+		<div class="desc">
+			Renders [page:ArrowHelper arrows] to visualize an object's vertex normal vectors.
+			Requires that normals have been specified in a [page:BufferAttribute custom attribute] or
+			have been calculated using [page:Geometry.computeVertexNormals computeVertexNormals].<br /><br />
+
+			Unline [page:FaceNormalsHelper], this works with [page:BufferGeometry].
+		</div>
 
 		<h2>Example</h2>
 
+		[example:webgl_helpers WebGL / helpers]
+
 		<code>
-		geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
-		material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
-		object = new THREE.Mesh( geometry, material );
+		var geometry = new THREE.BoxGeometry( 10, 10, 10, 2, 2, 2 );
+		var material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
+		var box = new THREE.Mesh( geometry, material );
 
-		edges = new THREE.VertexNormalsHelper( object, 2, 0x00ff00, 1 );
+		var helper = new THREE.VertexNormalsHelper( box, 2, 0x00ff00, 1 );
 
-		scene.add( object );
-		scene.add( edges );
+		scene.add( box );
+		scene.add( helper );
 		</code>
-		[example:webgl_helpers Example using various helpers]
+
 
 		<h2>Constructor</h2>
 
 
-		<h3>[name]( [page:Object3D object], [page:Number size], [page:Color color], [page:Number linewidth] )</h3>
-		<div>object -- object for which to render vertex normals
-		size -- size (length) of the arrows
-		color -- color of the arrows
-		linewidth -- width of the arrow lines
+		<h3>[name]( [page:Object3D object], [page:Number size], [page:Hex color], [page:Number linewidth] )</h3>
+		<div>
+			[page:Object3D object] -- object for which to render vertex normals.<br />
+			[page:Number size] -- (optional) length of the arrows. Default is 1.<br />
+			[page:Hex color] -- hex color of the arrows. Default is 0xff0000.<br />
+			[page:Number linewidth] -- (optional) width of the arrow lines. Default is 1.
 		</div>
 
 
 		<h2>Properties</h2>
+		<div>See the base [page:LineSegments] class for common properties.</div>
 
-		<h3>[property:Object3D object]</h3>
+		<h3>[property:object matrixAutoUpdate]</h3>
 		<div>
-		The attached object
+			See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
+			objects's [page:Object3D.matrixWorld matrixWorld].
 		</div>
 
+		<h3>[property:Object3D object]</h3>
+		<div>The object for which the vertex normals are being visualized.</div>
+
+		<h3>[property:Number size]</h3>
+		<div>Length of the arrows. Default is *1*.</div>
+
 
 		<h2>Methods</h2>
+		<div>See the base [page:LineSegments] class for common methods.</div>
 
 
 		<h3>[method:null update]()</h3>

+ 1 - 0
docs/list.js

@@ -122,6 +122,7 @@ var list = {
 			[ "GridHelper", "api/extras/helpers/GridHelper" ],
 			[ "HemisphereLightHelper", "api/extras/helpers/HemisphereLightHelper" ],
 			[ "PointLightHelper", "api/extras/helpers/PointLightHelper" ],
+			[ "RectAreaLightHelper", "api/extras/helpers/RectAreaLightHelper" ],
 			[ "SkeletonHelper", "api/extras/helpers/SkeletonHelper" ],
 			[ "SpotLightHelper", "api/extras/helpers/SpotLightHelper" ],
 			[ "VertexNormalsHelper", "api/extras/helpers/VertexNormalsHelper" ]