Docs: More JSDoc. (#30658)

examples/jsm/materials/LDrawConditionalLineMaterial.js

@@ -5,6 +5,14 @@ import {
 	UniformsUtils,
 } from 'three';
 
+/**
+ * A special line material for meshes loaded via {@link LDrawLoader}.
+ *
+ * This module can only be used with {@link WebGLRenderer}. When using {@link WebGPURenderer},
+ * import the class from `LDrawConditionalLineNodeMaterial.js`.
+ *
+ * @augments ShaderMaterial
+ */
 class LDrawConditionalLineMaterial extends ShaderMaterial {
 
 	static get type() {
@@ -13,6 +21,15 @@ class LDrawConditionalLineMaterial extends ShaderMaterial {
 
 	}
 
+	/**
+	 * Constructs a new conditional line material.
+	 *
+	 * @param {Object} [parameters] - An object with one or more properties
+	 * defining the material's appearance. Any property of the material
+	 * (including any property from inherited materials) can be passed
+	 * in here. Color values can be passed any type of value accepted
+	 * by {@link Color#set}.
+	 */
 	constructor( parameters ) {
 
 		super( {
@@ -109,6 +126,13 @@ class LDrawConditionalLineMaterial extends ShaderMaterial {
 
 		Object.defineProperties( this, {
 
+			/**
+			 * The material's opacity.
+			 *
+			 * @name LDrawConditionalLineMaterial#opacity
+			 * @type {number}
+			 * @default 1
+			 */
 			opacity: {
 				get: function () {
 
@@ -123,6 +147,13 @@ class LDrawConditionalLineMaterial extends ShaderMaterial {
 				}
 			},
 
+			/**
+			 * The material's color.
+			 *
+			 * @name LDrawConditionalLineMaterial#color
+			 * @type {Color}
+			 * @default (1,1,1)
+			 */
 			color: {
 				get: function () {
 
@@ -134,6 +165,14 @@ class LDrawConditionalLineMaterial extends ShaderMaterial {
 		} );
 
 		this.setValues( parameters );
+
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isLDrawConditionalLineMaterial = true;
 
 	}

examples/jsm/materials/LDrawConditionalLineNodeMaterial.js

@@ -1,6 +1,14 @@
 import { Color } from 'three';
 import { attribute, cameraProjectionMatrix, dot, float, Fn, modelViewMatrix, modelViewProjection, NodeMaterial, normalize, positionGeometry, sign, uniform, varyingProperty, vec2, vec4 } from 'three/tsl';
 
+/**
+ * A special line material for meshes loaded via {@link LDrawLoader}.
+ *
+ * This module can only be used with {@link WebGPURenderer}. When using {@link WebGLRenderer},
+ * import the class from `LDrawConditionalLineMaterial.js`.
+ *
+ * @augments NodeMaterial
+ */
 class LDrawConditionalLineMaterial extends NodeMaterial {
 
 	static get type() {
@@ -9,6 +17,15 @@ class LDrawConditionalLineMaterial extends NodeMaterial {
 
 	}
 
+	/**
+	 * Constructs a new conditional line material.
+	 *
+	 * @param {Object} [parameters] - An object with one or more properties
+	 * defining the material's appearance. Any property of the material
+	 * (including any property from inherited materials) can be passed
+	 * in here. Color values can be passed any type of value accepted
+	 * by {@link Color#set}.
+	 */
 	constructor( parameters ) {
 
 		super();
@@ -74,6 +91,13 @@ class LDrawConditionalLineMaterial extends NodeMaterial {
 
 		Object.defineProperties( this, {
 
+			/**
+			 * The material's opacity.
+			 *
+			 * @name LDrawConditionalLineMaterial#opacity
+			 * @type {number}
+			 * @default 1
+			 */
 			opacity: {
 				get: function () {
 
@@ -88,6 +112,13 @@ class LDrawConditionalLineMaterial extends NodeMaterial {
 				}
 			},
 
+			/**
+			 * The material's color.
+			 *
+			 * @name LDrawConditionalLineMaterial#color
+			 * @type {Color}
+			 * @default (1,1,1)
+			 */
 			color: {
 				get: function () {
 
@@ -105,6 +136,14 @@ class LDrawConditionalLineMaterial extends NodeMaterial {
 		} );
 
 		this.setValues( parameters );
+
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isLDrawConditionalLineMaterial = true;
 
 	}

examples/jsm/materials/MeshPostProcessingMaterial.js

@@ -21,10 +21,20 @@ import { MeshPhysicalMaterial } from 'three';
  *
  * Further extension work might be to use the output of an SSR pass or an HBIL pass from a previous frame.
  * This would then create the possibility of SSR and IR depending on material properties such as `roughness`, `metalness` and `reflectivity`.
-**/
-
+ *
+ * @augments MeshPhysicalMaterial
+ */
 class MeshPostProcessingMaterial extends MeshPhysicalMaterial {
 
+	/**
+	 * Constructs a new conditional line material.
+	 *
+	 * @param {Object} [parameters] - An object with one or more properties
+	 * defining the material's appearance. Any property of the material
+	 * (including any property from inherited materials) can be passed
+	 * in here. Color values can be passed any type of value accepted
+	 * by {@link Color#set}.
+	 */
 	constructor( parameters ) {
 
 		const aoPassMap = parameters.aoPassMap;
@@ -37,11 +47,23 @@ class MeshPostProcessingMaterial extends MeshPhysicalMaterial {
 		this.onBeforeCompile = this._onBeforeCompile;
 		this.customProgramCacheKey = this._customProgramCacheKey;
 		this._aoPassMap = aoPassMap;
+
+		/**
+		 * The scale of the AO pass.
+		 *
+		 * @type {number}
+		 * @default 1
+		 */
 		this.aoPassMapScale = aoPassMapScale;
 		this._shader = null;
 
 	}
 
+	/**
+	 * A texture representing the AO pass.
+	 *
+	 * @type {Texture}
+	 */
 	get aoPassMap() {
 
 		return this._aoPassMap;

examples/jsm/modifiers/CurveModifier.js

@@ -19,10 +19,11 @@ import {
 /**
  * Make a new DataTexture to store the descriptions of the curves.
  *
- * @param { number } numberOfCurves the number of curves needed to be described by this texture.
- * @returns { DataTexture }
+ * @private
+ * @param {number} numberOfCurves - The number of curves needed to be described by this texture.
+ * @returns {DataTexture}
  */
-export function initSplineTexture( numberOfCurves = 1 ) {
+function initSplineTexture( numberOfCurves = 1 ) {
 
 	const dataArray = new Uint16Array( TEXTURE_WIDTH * TEXTURE_HEIGHT * numberOfCurves * CHANNELS );
 	const dataTexture = new DataTexture(
@@ -44,13 +45,14 @@ export function initSplineTexture( numberOfCurves = 1 ) {
 }
 
 /**
- * Write the curve description to the data texture
+ * Write the curve description to the data texture.
  *
- * @param { DataTexture } texture The DataTexture to write to
- * @param { Curve } splineCurve The curve to describe
- * @param { number } offset Which curve slot to write to
+ * @private
+ * @param {DataTexture} texture - The data texture to write to.
+ * @param {Curve} splineCurve - The curve to describe.
+ * @param {number} offset - Which curve slot to write to.
  */
-export function updateSplineTexture( texture, splineCurve, offset = 0 ) {
+function updateSplineTexture( texture, splineCurve, offset = 0 ) {
 
 	const numberOfPoints = Math.floor( TEXTURE_WIDTH * ( TEXTURE_HEIGHT / 4 ) );
 	splineCurve.arcLengthDivisions = numberOfPoints / 2;
@@ -78,7 +80,6 @@ export function updateSplineTexture( texture, splineCurve, offset = 0 ) {
 
 }
 
-
 function setTextureValue( texture, index, x, y, z, o ) {
 
 	const image = texture.image;
@@ -92,12 +93,12 @@ function setTextureValue( texture, index, x, y, z, o ) {
 }
 
 /**
- * Create a new set of uniforms for describing the curve modifier
+ * Create a new set of uniforms for describing the curve modifier.
  *
- * @param { DataTexture } splineTexture which holds the curve description
- * @returns { Object } The uniforms object to be used in the shader
+ * @param {DataTexture} splineTexture - Which holds the curve description.
+ * @returns {Object} The uniforms object to be used in the shader.
  */
-export function getUniforms( splineTexture ) {
+function getUniforms( splineTexture ) {
 
 	const uniforms = {
 		spineTexture: { value: splineTexture },
@@ -111,7 +112,7 @@ export function getUniforms( splineTexture ) {
 
 }
 
-export function modifyShader( material, uniforms, numberOfCurves = 1 ) {
+function modifyShader( material, uniforms, numberOfCurves = 1 ) {
 
 	if ( material.__ok ) return;
 	material.__ok = true;
@@ -198,13 +199,18 @@ vec3 transformedNormal = normalMatrix * (basis * objectNormal);
 }
 
 /**
- * A helper class for making meshes bend around curves
+ * A modifier for making meshes bend around curves.
+ *
+ * This module can only be used with {@link WebGLRenderer}. When using {@link WebGPURenderer},
+ * import the class from `CurveModifierGPU.js`.
  */
 export class Flow {
 
 	/**
-	 * @param {Mesh} mesh The mesh to clone and modify to bend around the curve
-	 * @param {number} numberOfCurves The amount of space that should preallocated for additional curves
+	 * Constructs a new Flow instance.
+	 *
+	 * @param {Mesh} mesh - The mesh to clone and modify to bend around the curve.
+	 * @param {number} numberOfCurves - The amount of space that should preallocated for additional curves.
 	 */
 	constructor( mesh, numberOfCurves = 1 ) {
 
@@ -252,9 +258,15 @@ export class Flow {
 
 	}
 
+	/**
+	 * Updates the curve for the given curve index.
+	 *
+	 * @param {number} index - The curve index.
+	 * @param {Curve} curve - The curve that should be used to bend the mesh.
+	 */
 	updateCurve( index, curve ) {
 
-		if ( index >= this.curveArray.length ) throw Error( 'Index out of range for Flow' );
+		if ( index >= this.curveArray.length ) throw Error( 'Flow: Index out of range.' );
 		const curveLength = curve.getLength();
 		this.uniforms.spineLength.value = curveLength;
 		this.curveLengthArray[ index ] = curveLength;
@@ -263,6 +275,11 @@ export class Flow {
 
 	}
 
+	/**
+	 * Moves the mesh along the curve.
+	 *
+	 * @param {number} amount - The offset.
+	 */
 	moveAlongCurve( amount ) {
 
 		this.uniforms.pathOffset.value += amount;
@@ -270,19 +287,25 @@ export class Flow {
 	}
 
 }
-const matrix = new Matrix4();
+
+const _matrix = new Matrix4();
 
 /**
- * A helper class for creating instanced versions of flow, where the instances are placed on the curve.
+ * An instanced version of {@link Flow} for making meshes bend around curves, where the instances are placed on the curve.
+ *
+ * This module can only be used with {@link WebGLRenderer}.
+ *
+ * @augments Flow
  */
 export class InstancedFlow extends Flow {
 
 	/**
+	 * Constructs a new InstancedFlow instance.
 	 *
-	 * @param {number} count The number of instanced elements
-	 * @param {number} curveCount The number of curves to preallocate for
-	 * @param {Geometry} geometry The geometry to use for the instanced mesh
-	 * @param {Material} material The material to use for the instanced mesh
+	 * @param {number} count - The number of instanced elements.
+	 * @param {number} curveCount - The number of curves to preallocate for.
+	 * @param {Geometry} geometry - The geometry to use for the instanced mesh.
+	 * @param {Material} material - The material to use for the instanced mesh.
 	 */
 	constructor( count, curveCount, geometry, material ) {
 
@@ -304,25 +327,25 @@ export class InstancedFlow extends Flow {
 	 * The extra information about which curve and curve position is stored in the translation components of the matrix for the instanced objects
 	 * This writes that information to the matrix and marks it as needing update.
 	 *
-	 * @param {number} index of the instanced element to update
+	 * @param {number} index - The index of tge instanced element to update.
 	 */
 	writeChanges( index ) {
 
-		matrix.makeTranslation(
+		_matrix.makeTranslation(
 			this.curveLengthArray[ this.whichCurve[ index ] ],
 			this.whichCurve[ index ],
 			this.offsets[ index ]
 		);
-		this.object3D.setMatrixAt( index, matrix );
+		this.object3D.setMatrixAt( index, _matrix );
 		this.object3D.instanceMatrix.needsUpdate = true;
 
 	}
 
 	/**
-	 * Move an individual element along the curve by a specific amount
+	 * Move an individual element along the curve by a specific amount.
 	 *
-	 * @param {number} index Which element to update
-	 * @param {number} offset Move by how much
+	 * @param {number} index - Which element to update.
+	 * @param {number} offset - The offset.
 	 */
 	moveIndividualAlongCurve( index, offset ) {
 
@@ -332,14 +355,14 @@ export class InstancedFlow extends Flow {
 	}
 
 	/**
-	 * Select which curve to use for an element
+	 * Select which curve to use for an element.
 	 *
-	 * @param {number} index the index of the instanced element to update
-	 * @param {number} curveNo the index of the curve it should use
+	 * @param {number} index - The index of the instanced element to update.
+	 * @param {number} curveNo - The index of the curve it should use.
 	 */
 	setCurve( index, curveNo ) {
 
-		if ( isNaN( curveNo ) ) throw Error( 'curve index being set is Not a Number (NaN)' );
+		if ( isNaN( curveNo ) ) throw Error( 'InstancedFlow: Curve index being set is Not a Number (NaN).' );
 		this.whichCurve[ index ] = curveNo;
 		this.writeChanges( index );
 

examples/jsm/modifiers/CurveModifierGPU.js

@@ -19,10 +19,11 @@ import { modelWorldMatrix, normalLocal, vec2, vec3, vec4, mat3, varyingProperty,
 /**
  * Make a new DataTexture to store the descriptions of the curves.
  *
- * @param { number } [numberOfCurves=1] the number of curves needed to be described by this texture.
- * @returns { DataTexture } The new DataTexture
+ * @private
+ * @param {number} [numberOfCurves=1] - The number of curves needed to be described by this texture.
+ * @returns  {DataTexture} The new data texture.
  */
-export function initSplineTexture( numberOfCurves = 1 ) {
+function initSplineTexture( numberOfCurves = 1 ) {
 
 	const dataArray = new Uint16Array( TEXTURE_WIDTH * TEXTURE_HEIGHT * numberOfCurves * CHANNELS );
 	const dataTexture = new DataTexture(
@@ -44,13 +45,14 @@ export function initSplineTexture( numberOfCurves = 1 ) {
 }
 
 /**
- * Write the curve description to the data texture
+ * Write the curve description to the data texture.
  *
- * @param { DataTexture } texture The DataTexture to write to
- * @param { Curve } splineCurve The curve to describe
- * @param { number } offset Which curve slot to write to
+ * @privaate
+ * @param {DataTexture} texture - The data texture to write to.
+ * @param {Curve} splineCurve - The curve to describe.
+ * @param {number} [offset=0] - Which curve slot to write to.
  */
-export function updateSplineTexture( texture, splineCurve, offset = 0 ) {
+function updateSplineTexture( texture, splineCurve, offset = 0 ) {
 
 	const numberOfPoints = Math.floor( TEXTURE_WIDTH * ( TEXTURE_HEIGHT / 4 ) );
 	splineCurve.arcLengthDivisions = numberOfPoints / 2;
@@ -93,12 +95,13 @@ function setTextureValue( texture, index, x, y, z, o ) {
 }
 
 /**
- * Create a new set of uniforms for describing the curve modifier
+ * Create a new set of uniforms for describing the curve modifier.
  *
- * @param { DataTexture } splineTexture which holds the curve description
- * @returns { Object } The uniforms object
+ * @private
+ * @param {DataTexture} splineTexture - Which holds the curve description.
+ * @returns {Object} The uniforms object.
  */
-export function getUniforms( splineTexture ) {
+function getUniforms( splineTexture ) {
 
 	return {
 		spineTexture: splineTexture,
@@ -111,7 +114,7 @@ export function getUniforms( splineTexture ) {
 
 }
 
-export function modifyShader( material, uniforms, numberOfCurves ) {
+function modifyShader( material, uniforms, numberOfCurves ) {
 
 	const spineTexture = uniforms.spineTexture;
 
@@ -157,13 +160,18 @@ export function modifyShader( material, uniforms, numberOfCurves ) {
 }
 
 /**
- * A helper class for making meshes bend around curves
+ * A modifier for making meshes bend around curves.
+ *
+ * This module can only be used with {@link WebGPURenderer}. When using {@link WebGLRenderer},
+ * import the class from `CurveModifier.js`.
  */
 export class Flow {
 
 	/**
-	 * @param {Mesh} mesh The mesh to clone and modify to bend around the curve
-	 * @param {number} numberOfCurves The amount of space that should preallocated for additional curves
+	 * Constructs a new Flow instance.
+	 *
+	 * @param {Mesh} mesh - The mesh to clone and modify to bend around the curve.
+	 * @param {number} numberOfCurves - The amount of space that should preallocated for additional curves.
 	 */
 	constructor( mesh, numberOfCurves = 1 ) {
 
@@ -212,9 +220,15 @@ export class Flow {
 
 	}
 
+	/**
+	 * Updates the curve for the given curve index.
+	 *
+	 * @param {number} index - The curve index.
+	 * @param {Curve} curve - The curve that should be used to bend the mesh.
+	 */
 	updateCurve( index, curve ) {
 
-		if ( index >= this.curveArray.length ) throw Error( 'Index out of range for Flow' );
+		if ( index >= this.curveArray.length ) throw Error( 'Flow: Index out of range.' );
 
 		const curveLength = curve.getLength();
 
@@ -226,6 +240,11 @@ export class Flow {
 
 	}
 
+	/**
+	 * Moves the mesh along the curve.
+	 *
+	 * @param {number} amount - The offset.
+	 */
 	moveAlongCurve( amount ) {
 
 		this.uniforms.pathOffset += amount;

examples/jsm/modifiers/EdgeSplitModifier.js

@@ -9,8 +9,26 @@ const _A = new Vector3();
 const _B = new Vector3();
 const _C = new Vector3();
 
+/**
+ * The modifier can be used to split faces at sharp edges. This allows to compute
+ * normals without smoothing the edges which can lead to an improved visual result.
+ *
+ * ```js
+ * const modifier = new EdgeSplitModifier();
+ * geometry = modifier.modify( geometry, Math.PI * 0.4 );
+ * ```
+ */
 class EdgeSplitModifier {
 
+	/**
+	 * Returns a new, modified version of the given geometry by applying an edge-split operation.
+	 * Please note that the resutling geometry is always indexed.
+	 *
+	 * @param {BufferGeometry} geometry - The geometry to modify.
+	 * @param {number} cutOffAngle - The cut off angle in radians.
+	 * @param {boolean} [tryKeepNormals=true] - Whether to try to keep normals or not.
+	 * @return {BufferGeometry} A new, modified goemetry.
+	 */
 	modify( geometry, cutOffAngle, tryKeepNormals = true ) {
 
 		function computeNormals() {

examples/jsm/modifiers/SimplifyModifier.js

@@ -8,18 +8,30 @@ import {
 } from 'three';
 import * as BufferGeometryUtils from '../utils/BufferGeometryUtils.js';
 
-/**
- *	Simplification Geometry Modifier
- *    - based on code and technique
- *	  - by Stan Melax in 1998
- *	  - Progressive Mesh type Polygon Reduction Algorithm
- *    - http://www.melax.com/polychop/
- */
-
 const _cb = new Vector3(), _ab = new Vector3();
 
+/**
+ * This class can be used to modify a geometry by simplifying it. A typical use
+ * case for such a modifier is automatic LOD generation.
+ *
+ * The implementation is based on [Progressive Mesh type Polygon Reduction Algorithm]{@link https://web.archive.org/web/20230610044040/http://www.melax.com/polychop/}
+ * by Stan Melax in 1998.
+ *
+ * ```js
+ * const modifier = new SimplifyModifier();
+ * geometry = modifier.modify( geometry );
+ * ```
+ */
 class SimplifyModifier {
 
+	/**
+	 * Returns a new, modified version of the given geometry by applying a simplification.
+	 * Please note that the resutling geometry is always non-indexed.
+	 *
+	 * @param {BufferGeometry} geometry - The geometry to modify.
+	 * @param {number} count - The number of vertices to remove.
+	 * @return {BufferGeometry} A new, modified goemetry.
+	 */
 	modify( geometry, count ) {
 
 		geometry = geometry.clone();

examples/jsm/modifiers/TessellateModifier.js

@@ -7,18 +7,49 @@ import {
 } from 'three';
 
 /**
- * Break faces with edges longer than maxEdgeLength
+ * This class can be used to modify a geometry by breaking its edges if they
+ * are longer than maximum length.
+ *
+ * ```js
+ * const modifier = new TessellateModifier( 8, 6 );
+ * geometry = modifier.modify( geometry );
+ * ```
  */
-
 class TessellateModifier {
 
+	/**
+	 * Constructs a new Tessellate modifier.
+	 *
+	 * @param {number} [maxEdgeLength=0.1] - The maximum edge length.
+	 * @param {number} [maxIterations=6] - The number of iterations.
+	 */
 	constructor( maxEdgeLength = 0.1, maxIterations = 6 ) {
 
+		/**
+		 * The maximum edge length.
+		 *
+		 * @type {number}
+		 * @default 0.1
+		 */
 		this.maxEdgeLength = maxEdgeLength;
+
+		/**
+		 * The maximum edge length.
+		 *
+		 * @type {number}
+		 * @default 0.1
+		 */
 		this.maxIterations = maxIterations;
 
 	}
 
+	/**
+	 * Returns a new, modified version of the given geometry by applying a tesselation.
+	 * Please note that the resutling geometry is always non-indexed.
+	 *
+	 * @param {BufferGeometry} geometry - The geometry to modify.
+	 * @return {BufferGeometry} A new, modified goemetry.
+	 */
 	modify( geometry ) {
 
 		if ( geometry.index !== null ) {

examples/jsm/renderers/CSS2DRenderer.js

@@ -5,14 +5,38 @@ import {
 	Vector3
 } from 'three';
 
+/**
+ * The only type of 3D object that is supported by {@link CSS2DRenderer}.
+ *
+ * @augments Object3D
+ */
 class CSS2DObject extends Object3D {
 
+	/**
+	 * Constructs a new CSS2D object.
+	 *
+	 * @param {DOMElement} [element] - The DOM element.
+	 */
 	constructor( element = document.createElement( 'div' ) ) {
 
 		super();
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isCSS2DObject = true;
 
+		/**
+		 * The DOM element which defines the appearance of this 3D object.
+		 *
+		 * @type {DOMElement}
+		 * @readonly
+		 * @default true
+		 */
 		this.element = element;
 
 		this.element.style.position = 'absolute';
@@ -20,7 +44,14 @@ class CSS2DObject extends Object3D {
 
 		this.element.setAttribute( 'draggable', false );
 
-		this.center = new Vector2( 0.5, 0.5 ); // ( 0, 0 ) is the lower left; ( 1, 1 ) is the top right
+		/**
+		 * The 3D objects center point.
+		 * `( 0, 0 )` is the lower left, `( 1, 1 )` is the top right.
+		 *
+		 * @type {Vector2}
+		 * @default (0.5,0.5)
+		 */
+		this.center = new Vector2( 0.5, 0.5 );
 
 		this.addEventListener( 'removed', function () {
 
@@ -63,8 +94,23 @@ const _viewProjectionMatrix = new Matrix4();
 const _a = new Vector3();
 const _b = new Vector3();
 
+/**
+ * This renderer is a simplified version of {@link CSS3DRenderer}. The only transformation that is
+ * supported is translation.
+ *
+ * The renderer is very useful if you want to combine HTML based labels with 3D objects. Here too,
+ * the respective DOM elements are wrapped into an instance of {@link CSS2DObject} and added to the
+ * scene graph. All other types of renderable 3D objects (like meshes or point clouds) are ignored.
+ *
+ * `CSS2DRenderer` only supports 100% browser and display zoom.
+ */
 class CSS2DRenderer {
 
+	/**
+	 * Constructs a new CSS2D renderer.
+	 *
+	 * @param {CSS2DRenderer~Parameters} [parameters] - The parameters.
+	 */
 	constructor( parameters = {} ) {
 
 		const _this = this;
@@ -80,8 +126,18 @@ class CSS2DRenderer {
 
 		domElement.style.overflow = 'hidden';
 
+		/**
+		 * The DOM where the renderer appends its child-elements.
+		 *
+		 * @type {DOMElement}
+		 */
 		this.domElement = domElement;
 
+		/**
+		 * Returns an object containing the width and height of the renderer.
+		 *
+		 * @return {{width:number,height:number}} The size of the renderer.
+		 */
 		this.getSize = function () {
 
 			return {
@@ -91,6 +147,12 @@ class CSS2DRenderer {
 
 		};
 
+		/**
+		 * Renders the given scene using the given camera.
+		 *
+		 * @param {Object3D} scene - A scene or any other type of 3D object.
+		 * @param {Camera} camera - The camera.
+		 */
 		this.render = function ( scene, camera ) {
 
 			if ( scene.matrixWorldAutoUpdate === true ) scene.updateMatrixWorld();
@@ -104,6 +166,12 @@ class CSS2DRenderer {
 
 		};
 
+		/**
+		 * Resizes the renderer to the given width and height.
+		 *
+		 * @param {number} width - The width of the renderer.
+		 * @param {number} height - The height of the renderer.
+		 */
 		this.setSize = function ( width, height ) {
 
 			_width = width;
@@ -235,4 +303,12 @@ class CSS2DRenderer {
 
 }
 
+/**
+ * Constructor parameters of `CSS2DRenderer`.
+ *
+ * @typedef {Object} CSS2DRenderer~Parameters
+ * @property {DOMElement} [element] - A DOM element where the renderer appends its child-elements.
+ * If not passed in here, a new div element will be created.
+ **/
+
 export { CSS2DObject, CSS2DRenderer };

examples/jsm/renderers/CSS3DRenderer.js

@@ -5,22 +5,44 @@ import {
 	Vector3
 } from 'three';
 
-/**
- * Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs
- */
+// Based on http://www.emagix.net/academic/mscs-project/item/camera-sync-with-css3-and-webgl-threejs
 
 const _position = new Vector3();
 const _quaternion = new Quaternion();
 const _scale = new Vector3();
 
+/**
+ * The base 3D object that is supported by {@link CSS3DRenderer}.
+ *
+ * @augments Object3D
+ */
 class CSS3DObject extends Object3D {
 
+	/**
+	 * Constructs a new CSS3D object.
+	 *
+	 * @param {DOMElement} [element] - The DOM element.
+	 */
 	constructor( element = document.createElement( 'div' ) ) {
 
 		super();
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isCSS3DObject = true;
 
+		/**
+		 * The DOM element which defines the appearance of this 3D object.
+		 *
+		 * @type {DOMElement}
+		 * @readonly
+		 * @default true
+		 */
 		this.element = element;
 		this.element.style.position = 'absolute';
 		this.element.style.pointerEvents = 'auto';
@@ -59,14 +81,38 @@ class CSS3DObject extends Object3D {
 
 }
 
+/**
+ * A specialized version of {@link CSS3DObject} that represents
+ * DOM elements as sprites.
+ *
+ * @augments CSS3DObject
+ */
 class CSS3DSprite extends CSS3DObject {
 
+	/**
+	 * Constructs a new CSS3D sprite object.
+	 *
+	 * @param {DOMElement} [element] - The DOM element.
+	 */
 	constructor( element ) {
 
 		super( element );
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isCSS3DSprite = true;
 
+		/**
+		 * The sprite's rotation in radians.
+		 *
+		 * @type {number}
+		 * @default 0
+		 */
 		this.rotation2D = 0;
 
 	}
@@ -88,8 +134,28 @@ class CSS3DSprite extends CSS3DObject {
 const _matrix = new Matrix4();
 const _matrix2 = new Matrix4();
 
+/**
+ * This renderer can be used to apply hierarchical 3D transformations to DOM elements
+ * via the CSS3 [transform]{@link https://www.w3schools.com/cssref/css3_pr_transform.asp} property.
+ * `CSS3DRenderer` is particularly interesting if you want to apply 3D effects to a website without
+ * canvas based rendering. It can also be used in order to combine DOM elements with WebGLcontent.
+ *
+ * There are, however, some important limitations:
+ *
+ * - It's not possible to use the material system of *three.js*.
+ * - It's also not possible to use geometries.
+ * - The renderer only supports 100% browser and display zoom.
+ *
+ * So `CSS3DRenderer` is just focused on ordinary DOM elements. These elements are wrapped into special
+ * 3D objects ({@link CSS3DObject} or {@link CSS3DSprite}) and then added to the scene graph.
+ */
 class CSS3DRenderer {
 
+	/**
+	 * Constructs a new CSS3D renderer.
+	 *
+	 * @param {CSS3DRenderer~Parameters} [parameters] - The parameters.
+	 */
 	constructor( parameters = {} ) {
 
 		const _this = this;
@@ -106,6 +172,11 @@ class CSS3DRenderer {
 
 		domElement.style.overflow = 'hidden';
 
+		/**
+		 * The DOM where the renderer appends its child-elements.
+		 *
+		 * @type {DOMElement}
+		 */
 		this.domElement = domElement;
 
 		const viewElement = document.createElement( 'div' );
@@ -119,6 +190,11 @@ class CSS3DRenderer {
 
 		viewElement.appendChild( cameraElement );
 
+		/**
+		 * Returns an object containing the width and height of the renderer.
+		 *
+		 * @return {{width:number,height:number}} The size of the renderer.
+		 */
 		this.getSize = function () {
 
 			return {
@@ -128,6 +204,12 @@ class CSS3DRenderer {
 
 		};
 
+		/**
+		 * Renders the given scene using the given camera.
+		 *
+		 * @param {Object3D} scene - A scene or any other type of 3D object.
+		 * @param {Camera} camera - The camera.
+		 */
 		this.render = function ( scene, camera ) {
 
 			const fov = camera.projectionMatrix.elements[ 5 ] * _heightHalf;
@@ -179,6 +261,12 @@ class CSS3DRenderer {
 
 		};
 
+		/**
+		 * Resizes the renderer to the given width and height.
+		 *
+		 * @param {number} width - The width of the renderer.
+		 * @param {number} height - The height of the renderer.
+		 */
 		this.setSize = function ( width, height ) {
 
 			_width = width;
@@ -350,4 +438,12 @@ class CSS3DRenderer {
 
 }
 
+/**
+ * Constructor parameters of `CSS3DRenderer`.
+ *
+ * @typedef {Object} CSS3DRenderer~Parameters
+ * @property {DOMElement} [element] - A DOM element where the renderer appends its child-elements.
+ * If not passed in here, a new div element will be created.
+ **/
+
 export { CSS3DObject, CSS3DSprite, CSS3DRenderer };

examples/jsm/renderers/Projector.js

@@ -120,10 +120,16 @@ class RenderableSprite {
 
 }
 
-//
-
+/**
+ * This class can project a given scene in 3D space into a 2D representation
+ * used for rendering with a 2D API. `Projector` is currently used by {@link SVGRenderer}
+ * and was previosuly used by the legacy `CanvasRenderer`.
+ */
 class Projector {
 
+	/**
+	 * Constructs a new projector.
+	 */
 	constructor() {
 
 		let _object, _objectCount, _objectPoolLength = 0,
@@ -403,6 +409,16 @@ class Projector {
 
 		}
 
+		/**
+		 * Projects the given scene in 3D space into a 2D representation. The result
+		 * is an object with renderable items.
+		 *
+		 * @param {Object3D} scene - A scene or any other type of 3D object.
+		 * @param {Camera} camera - The camera.
+		 * @param {boolean} sortObjects - Whether to sort objects or not.
+		 * @param {boolean} sortElements - Whether to sort elements (faces, lines and sprites) or not.
+		 * @return {{objects:Array<Objects>,lights:Array<Objects>,elements:Array<Objects>}} The projected scene as renderable objects.
+		 */
 		this.projectScene = function ( scene, camera, sortObjects, sortElements ) {
 
 			_faceCount = 0;

examples/jsm/renderers/SVGRenderer.js

@@ -15,22 +15,66 @@ import {
 	RenderableSprite
 } from '../renderers/Projector.js';
 
+/**
+ * Can be used to wrap SVG elements into a 3D object.
+ *
+ * @augments Object3D
+ */
 class SVGObject extends Object3D {
 
+	/**
+	 * Constructs a new SVG object.
+	 *
+	 * @param {SVGElement} node - The SVG element.
+	 */
 	constructor( node ) {
 
 		super();
 
+		/**
+		 * This flag can be used for type testing.
+		 *
+		 * @type {boolean}
+		 * @readonly
+		 * @default true
+		 */
 		this.isSVGObject = true;
 
+		/**
+		 * This SVG element.
+		 *
+		 * @type {SVGElement}
+		 */
 		this.node = node;
 
 	}
 
 }
 
+/**
+ * This renderer an be used to render geometric data using SVG. The produced vector
+ * graphics are particular useful in the following use cases:
+ *
+ * - Animated logos or icons.
+ * - Interactive 2D/3D diagrams or graphs.
+ * - Interactive maps.
+ * - Complex or animated user interfaces.
+ *
+ * `SVGRenderer` has various advantages. It produces crystal-clear and sharp output which
+ * is independent of the actual viewport resolution.SVG elements can be styled via CSS.
+ * And they have good accessibility since it's possible to add metadata like title or description
+ * (useful for search engines or screen readers).
+ *
+ * There are, however, some important limitations:
+ * - No advanced shading.
+ * - No texture support.
+ * - No shadow support.
+ */
 class SVGRenderer {
 
+	/**
+	 * Constructs a new SVG renderer.
+	 */
 	constructor() {
 
 		let _renderData, _elements, _lights,
@@ -70,16 +114,60 @@ class SVGRenderer {
 			_projector = new Projector(),
 			_svg = document.createElementNS( 'http://www.w3.org/2000/svg', 'svg' );
 
+		/**
+		 * The DOM where the renderer appends its child-elements.
+		 *
+		 * @type {DOMElement}
+		 */
 		this.domElement = _svg;
 
+		/**
+		 * Whether to automatically perform a clear before a render call or not.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
 		this.autoClear = true;
+
+		/**
+		 * Whether to sort 3D objects or not.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
 		this.sortObjects = true;
+
+		/**
+		 * Whether to sort elements or not.
+		 *
+		 * @type {boolean}
+		 * @default true
+		 */
 		this.sortElements = true;
 
+		/**
+		 * Number of fractional pixels to enlarge polygons in order to
+		 * prevent anti-aliasing gaps. Range is `[0,1]`.
+		 *
+		 * @type {number}
+		 * @default 0.5
+		 */
 		this.overdraw = 0.5;
 
+		/**
+		 * The output color space.
+		 *
+		 * @type {(SRGBColorSpace|LinearSRGBColorSpace)}
+		 * @default SRGBColorSpace
+		 */
 		this.outputColorSpace = SRGBColorSpace;
 
+		/**
+		 * Provides information about the number of
+		 * rendered vertices and faces.
+		 *
+		 * @type {Object}
+		 */
 		this.info = {
 
 			render: {
@@ -91,6 +179,12 @@ class SVGRenderer {
 
 		};
 
+		/**
+		 * Sets the render quality. Setting to `high` means This value indicates that the browser
+		 * tries to improve the SVG quality over rendering speed and geometric precision.
+		 *
+		 * @param {('low'|'high')} quality - The quality.
+		 */
 		this.setQuality = function ( quality ) {
 
 			switch ( quality ) {
@@ -102,6 +196,11 @@ class SVGRenderer {
 
 		};
 
+		/**
+		 * Sets the clear color.
+		 *
+		 * @param {(number|Color|string)} color - The clear color to set.
+		 */
 		this.setClearColor = function ( color ) {
 
 			_clearColor.set( color );
@@ -110,6 +209,12 @@ class SVGRenderer {
 
 		this.setPixelRatio = function () {};
 
+		/**
+		 * Resizes the renderer to the given width and height.
+		 *
+		 * @param {number} width - The width of the renderer.
+		 * @param {number} height - The height of the renderer.
+		 */
 		this.setSize = function ( width, height ) {
 
 			_svgWidth = width; _svgHeight = height;
@@ -124,6 +229,11 @@ class SVGRenderer {
 
 		};
 
+		/**
+		 * Returns an object containing the width and height of the renderer.
+		 *
+		 * @return {{width:number,height:number}} The size of the renderer.
+		 */
 		this.getSize = function () {
 
 			return {
@@ -133,6 +243,11 @@ class SVGRenderer {
 
 		};
 
+		/**
+		 * Sets the precision of the data used to create a paths.
+		 *
+		 * @param {number} precision - The precision to set.
+		 */
 		this.setPrecision = function ( precision ) {
 
 			_precision = precision;
@@ -157,6 +272,9 @@ class SVGRenderer {
 
 		}
 
+		/**
+		 * Performs a manual clear with the defined clera color.
+		 */
 		this.clear = function () {
 
 			removeChildNodes();
@@ -164,6 +282,12 @@ class SVGRenderer {
 
 		};
 
+		/**
+		 * Renders the given scene using the given camera.
+		 *
+		 * @param {Object3D} scene - A scene or any other type of 3D object.
+		 * @param {Camera} camera - The camera.
+		 */
 		this.render = function ( scene, camera ) {
 
 			if ( camera instanceof Camera === false ) {

utils/docs/jsdoc.config.json

@@ -26,6 +26,9 @@
             "examples/jsm/lighting",
             "examples/jsm/lights",
             "examples/jsm/lines",
+            "examples/jsm/materials",
+            "examples/jsm/modifiers",
+            "examples/jsm/renderers",
             "examples/jsm/textures",
             "examples/jsm/tsl",
             "src"
@@ -34,7 +37,9 @@
             "src/renderers/common/extras/PMREMGenerator.js",
             "examples/jsm/helpers/LightProbeHelperGPU.js",
             "examples/jsm/helpers/TextureHelperGPU.js",
-            "examples/jsm/lines/webgpu"
+            "examples/jsm/lines/webgpu",
+            "examples/jsm/materials/LDrawConditionalLineNodeMaterial.js",
+            "examples/jsm/modifiers/CurveModifierGPU.js"
         ]
     }
 }

utils/docs/template/publish.js

@@ -134,7 +134,7 @@ function buildSearchListForData() {
 
 	data().each( ( item ) => {
 
-		if ( item.kind !== 'package' && ! item.inherited ) {
+		if ( item.kind !== 'package' && item.kind !== 'typedef' && ! item.inherited ) {
 
 			searchList.push( {
 				title: item.longname,