Examples: More ES6 usage. (#21586)

* Examples: More ES6 usage.

* Examples: Clean up.

examples/jsm/math/Capsule.js

@@ -2,142 +2,136 @@ import {
 	Vector3
 } from '../../../build/three.module.js';
 
+const _v1 = new Vector3();
+const _v2 = new Vector3();
+const _v3 = new Vector3();
 
-var Capsule = ( function () {
+const EPS = 1e-10;
 
-	var _v1 = new Vector3();
-	var _v2 = new Vector3();
-	var _v3 = new Vector3();
+class Capsule {
 
-	var EPS = 1e-10;
+	constructor( start = new Vector3( 0, 0, 0 ), end = new Vector3( 0, 1, 0 ), radius = 1 ) {
 
-	function Capsule( start, end, radius ) {
-
-		this.start = start == undefined ? new Vector3( 0, 0, 0 ) : start;
-		this.end = end == undefined ? new Vector3( 0, 1, 0 ) : end;
-		this.radius = radius == undefined ? 1 : radius;
+		this.start = start;
+		this.end = end;
+		this.radius = radius;
 
 	}
 
-	Object.assign( Capsule.prototype, {
-
-		clone: function () {
-
-			return new Capsule( this.start.clone(), this.end.clone(), this.radius );
-
-		},
-
-		set: function ( start, end, radius ) {
+	clone() {
 
-			this.start.copy( start );
-			this.end.copy( end );
-			this.radius = radius;
+		return new Capsule( this.start.clone(), this.end.clone(), this.radius );
 
-		},
-
-		copy: function ( capsule ) {
+	}
 
-			this.start.copy( capsule.start );
-			this.end.copy( capsule.end );
-			this.radius = capsule.radius;
+	set( start, end, radius ) {
 
-		},
+		this.start.copy( start );
+		this.end.copy( end );
+		this.radius = radius;
 
-		getCenter: function ( target ) {
+	}
 
-			return target.copy( this.end ).add( this.start ).multiplyScalar( 0.5 );
+	copy( capsule ) {
 
-		},
+		this.start.copy( capsule.start );
+		this.end.copy( capsule.end );
+		this.radius = capsule.radius;
 
-		translate: function ( v ) {
+	}
 
-			this.start.add( v );
-			this.end.add( v );
+	getCenter( target ) {
 
-		},
+		return target.copy( this.end ).add( this.start ).multiplyScalar( 0.5 );
 
-		checkAABBAxis: function ( p1x, p1y, p2x, p2y, minx, maxx, miny, maxy, radius ) {
+	}
 
-			return (
-				( minx - p1x < radius || minx - p2x < radius ) &&
-				( p1x - maxx < radius || p2x - maxx < radius ) &&
-				( miny - p1y < radius || miny - p2y < radius ) &&
-				( p1y - maxy < radius || p2y - maxy < radius )
-			);
+	translate( v ) {
 
-		},
+		this.start.add( v );
+		this.end.add( v );
 
-		intersectsBox: function ( box ) {
+	}
 
-			return (
-				this.checkAABBAxis(
-					this.start.x, this.start.y, this.end.x, this.end.y,
-					box.min.x, box.max.x, box.min.y, box.max.y,
-					this.radius ) &&
-				this.checkAABBAxis(
-					this.start.x, this.start.z, this.end.x, this.end.z,
-					box.min.x, box.max.x, box.min.z, box.max.z,
-					this.radius ) &&
-				this.checkAABBAxis(
-					this.start.y, this.start.z, this.end.y, this.end.z,
-					box.min.y, box.max.y, box.min.z, box.max.z,
-					this.radius )
-			);
+	checkAABBAxis( p1x, p1y, p2x, p2y, minx, maxx, miny, maxy, radius ) {
 
-		},
+		return (
+			( minx - p1x < radius || minx - p2x < radius ) &&
+			( p1x - maxx < radius || p2x - maxx < radius ) &&
+			( miny - p1y < radius || miny - p2y < radius ) &&
+			( p1y - maxy < radius || p2y - maxy < radius )
+		);
 
-		lineLineMinimumPoints: function ( line1, line2 ) {
+	}
 
-			var r = _v1.copy( line1.end ).sub( line1.start );
-			var s = _v2.copy( line2.end ).sub( line2.start );
-			var w = _v3.copy( line2.start ).sub( line1.start );
+	intersectsBox( box ) {
+
+		return (
+			this.checkAABBAxis(
+				this.start.x, this.start.y, this.end.x, this.end.y,
+				box.min.x, box.max.x, box.min.y, box.max.y,
+				this.radius ) &&
+			this.checkAABBAxis(
+				this.start.x, this.start.z, this.end.x, this.end.z,
+				box.min.x, box.max.x, box.min.z, box.max.z,
+				this.radius ) &&
+			this.checkAABBAxis(
+				this.start.y, this.start.z, this.end.y, this.end.z,
+				box.min.y, box.max.y, box.min.z, box.max.z,
+				this.radius )
+		);
 
-			var a = r.dot( s ),
-				b = r.dot( r ),
-				c = s.dot( s ),
-				d = s.dot( w ),
-				e = r.dot( w );
+	}
 
-			var t1, t2, divisor = b * c - a * a;
+	lineLineMinimumPoints( line1, line2 ) {
 
-			if ( Math.abs( divisor ) < EPS ) {
+		const r = _v1.copy( line1.end ).sub( line1.start );
+		const s = _v2.copy( line2.end ).sub( line2.start );
+		const w = _v3.copy( line2.start ).sub( line1.start );
 
-				var d1 = - d / c;
-				var d2 = ( a - d ) / c;
+		const a = r.dot( s ),
+			b = r.dot( r ),
+			c = s.dot( s ),
+			d = s.dot( w ),
+			e = r.dot( w );
 
-				if ( Math.abs( d1 - 0.5 ) < Math.abs( d2 - 0.5 ) ) {
+		let t1, t2;
+		const divisor = b * c - a * a;
 
-					t1 = 0;
-					t2 = d1;
+		if ( Math.abs( divisor ) < EPS ) {
 
-				} else {
+			const d1 = - d / c;
+			const d2 = ( a - d ) / c;
 
-					t1 = 1;
-					t2 = d2;
+			if ( Math.abs( d1 - 0.5 ) < Math.abs( d2 - 0.5 ) ) {
 
-				}
+				t1 = 0;
+				t2 = d1;
 
 			} else {
 
-				t1 = ( d * a + e * c ) / divisor;
-				t2 = ( t1 * a - d ) / c;
+				t1 = 1;
+				t2 = d2;
 
 			}
 
-			t2 = Math.max( 0, Math.min( 1, t2 ) );
-			t1 = Math.max( 0, Math.min( 1, t1 ) );
+		} else {
 
-			var point1 = r.multiplyScalar( t1 ).add( line1.start );
-			var point2 = s.multiplyScalar( t2 ).add( line2.start );
-
-			return [ point1, point2 ];
+			t1 = ( d * a + e * c ) / divisor;
+			t2 = ( t1 * a - d ) / c;
 
 		}
 
-	} );
+		t2 = Math.max( 0, Math.min( 1, t2 ) );
+		t1 = Math.max( 0, Math.min( 1, t1 ) );
+
+		const point1 = r.multiplyScalar( t1 ).add( line1.start );
+		const point2 = s.multiplyScalar( t2 ).add( line2.start );
 
-	return Capsule;
+		return [ point1, point2 ];
+
+	}
 
-} )();
+}
 
 export { Capsule };

examples/jsm/math/MeshSurfaceSampler.js

@@ -13,14 +13,15 @@ import {
  * - http://www.joesfer.com/?p=84
  * - https://stackoverflow.com/a/4322940/1314762
  */
-var MeshSurfaceSampler = ( function () {
 
-	var _face = new Triangle();
-	var _color = new Vector3();
+const _face = new Triangle();
+const _color = new Vector3();
 
-	function MeshSurfaceSampler( mesh ) {
+class MeshSurfaceSampler {
 
-		var geometry = mesh.geometry;
+	constructor( mesh ) {
+
+		let geometry = mesh.geometry;
 
 		if ( ! geometry.isBufferGeometry || geometry.attributes.position.itemSize !== 3 ) {
 
@@ -47,172 +48,164 @@ var MeshSurfaceSampler = ( function () {
 
 	}
 
-	MeshSurfaceSampler.prototype = {
-
-		constructor: MeshSurfaceSampler,
+	setWeightAttribute( name ) {
 
-		setWeightAttribute: function ( name ) {
+		this.weightAttribute = name ? this.geometry.getAttribute( name ) : null;
 
-			this.weightAttribute = name ? this.geometry.getAttribute( name ) : null;
+		return this;
 
-			return this;
-
-		},
+	}
 
-		build: function () {
+	build() {
 
-			var positionAttribute = this.positionAttribute;
-			var weightAttribute = this.weightAttribute;
+		const positionAttribute = this.positionAttribute;
+		const weightAttribute = this.weightAttribute;
 
-			var faceWeights = new Float32Array( positionAttribute.count / 3 );
+		const faceWeights = new Float32Array( positionAttribute.count / 3 );
 
-			// Accumulate weights for each mesh face.
+		// Accumulate weights for each mesh face.
 
-			for ( var i = 0; i < positionAttribute.count; i += 3 ) {
+		for ( let i = 0; i < positionAttribute.count; i += 3 ) {
 
-				var faceWeight = 1;
+			let faceWeight = 1;
 
-				if ( weightAttribute ) {
+			if ( weightAttribute ) {
 
-					faceWeight = weightAttribute.getX( i )
-						+ weightAttribute.getX( i + 1 )
-						+ weightAttribute.getX( i + 2 );
+				faceWeight = weightAttribute.getX( i )
+					+ weightAttribute.getX( i + 1 )
+					+ weightAttribute.getX( i + 2 );
 
-				}
+			}
 
-				_face.a.fromBufferAttribute( positionAttribute, i );
-				_face.b.fromBufferAttribute( positionAttribute, i + 1 );
-				_face.c.fromBufferAttribute( positionAttribute, i + 2 );
-				faceWeight *= _face.getArea();
+			_face.a.fromBufferAttribute( positionAttribute, i );
+			_face.b.fromBufferAttribute( positionAttribute, i + 1 );
+			_face.c.fromBufferAttribute( positionAttribute, i + 2 );
+			faceWeight *= _face.getArea();
 
-				faceWeights[ i / 3 ] = faceWeight;
+			faceWeights[ i / 3 ] = faceWeight;
 
-			}
+		}
 
-			// Store cumulative total face weights in an array, where weight index
-			// corresponds to face index.
+		// Store cumulative total face weights in an array, where weight index
+		// corresponds to face index.
 
-			this.distribution = new Float32Array( positionAttribute.count / 3 );
+		this.distribution = new Float32Array( positionAttribute.count / 3 );
 
-			var cumulativeTotal = 0;
+		let cumulativeTotal = 0;
 
-			for ( var i = 0; i < faceWeights.length; i ++ ) {
+		for ( let i = 0; i < faceWeights.length; i ++ ) {
 
-				cumulativeTotal += faceWeights[ i ];
+			cumulativeTotal += faceWeights[ i ];
 
-				this.distribution[ i ] = cumulativeTotal;
+			this.distribution[ i ] = cumulativeTotal;
 
-			}
-
-			return this;
+		}
 
-		},
+		return this;
 
-		setRandomGenerator: function ( randomFunction ) {
+	}
 
-			this.randomFunction = randomFunction;
-			return this;
+	setRandomGenerator( randomFunction ) {
 
-		},
+		this.randomFunction = randomFunction;
+		return this;
 
-		sample: function ( targetPosition, targetNormal, targetColor ) {
+	}
 
-			var cumulativeTotal = this.distribution[ this.distribution.length - 1 ];
+	sample( targetPosition, targetNormal, targetColor ) {
 
-			var faceIndex = this.binarySearch( this.randomFunction() * cumulativeTotal );
+		const cumulativeTotal = this.distribution[ this.distribution.length - 1 ];
 
-			return this.sampleFace( faceIndex, targetPosition, targetNormal, targetColor );
+		const faceIndex = this.binarySearch( this.randomFunction() * cumulativeTotal );
 
-		},
+		return this.sampleFace( faceIndex, targetPosition, targetNormal, targetColor );
 
-		binarySearch: function ( x ) {
+	}
 
-			var dist = this.distribution;
-			var start = 0;
-			var end = dist.length - 1;
+	binarySearch( x ) {
 
-			var index = - 1;
+		const dist = this.distribution;
+		let start = 0;
+		let end = dist.length - 1;
 
-			while ( start <= end ) {
+		let index = - 1;
 
-				var mid = Math.ceil( ( start + end ) / 2 );
+		while ( start <= end ) {
 
-				if ( mid === 0 || dist[ mid - 1 ] <= x && dist[ mid ] > x ) {
+			const mid = Math.ceil( ( start + end ) / 2 );
 
-					index = mid;
+			if ( mid === 0 || dist[ mid - 1 ] <= x && dist[ mid ] > x ) {
 
-					break;
+				index = mid;
 
-				} else if ( x < dist[ mid ] ) {
+				break;
 
-					end = mid - 1;
+			} else if ( x < dist[ mid ] ) {
 
-				} else {
+				end = mid - 1;
 
-					start = mid + 1;
+			} else {
 
-				}
+				start = mid + 1;
 
 			}
 
-			return index;
-
-		},
+		}
 
-		sampleFace: function ( faceIndex, targetPosition, targetNormal, targetColor ) {
+		return index;
 
-			var u = this.randomFunction();
-			var v = this.randomFunction();
+	}
 
-			if ( u + v > 1 ) {
+	sampleFace( faceIndex, targetPosition, targetNormal, targetColor ) {
 
-				u = 1 - u;
-				v = 1 - v;
+		let u = this.randomFunction();
+		let v = this.randomFunction();
 
-			}
+		if ( u + v > 1 ) {
 
-			_face.a.fromBufferAttribute( this.positionAttribute, faceIndex * 3 );
-			_face.b.fromBufferAttribute( this.positionAttribute, faceIndex * 3 + 1 );
-			_face.c.fromBufferAttribute( this.positionAttribute, faceIndex * 3 + 2 );
+			u = 1 - u;
+			v = 1 - v;
 
-			targetPosition
-				.set( 0, 0, 0 )
-				.addScaledVector( _face.a, u )
-				.addScaledVector( _face.b, v )
-				.addScaledVector( _face.c, 1 - ( u + v ) );
+		}
 
-			if ( targetNormal !== undefined ) {
+		_face.a.fromBufferAttribute( this.positionAttribute, faceIndex * 3 );
+		_face.b.fromBufferAttribute( this.positionAttribute, faceIndex * 3 + 1 );
+		_face.c.fromBufferAttribute( this.positionAttribute, faceIndex * 3 + 2 );
 
-				_face.getNormal( targetNormal );
+		targetPosition
+			.set( 0, 0, 0 )
+			.addScaledVector( _face.a, u )
+			.addScaledVector( _face.b, v )
+			.addScaledVector( _face.c, 1 - ( u + v ) );
 
-			}
+		if ( targetNormal !== undefined ) {
 
-			if ( targetColor !== undefined && this.colorAttribute !== undefined ) {
+			_face.getNormal( targetNormal );
 
-				_face.a.fromBufferAttribute( this.colorAttribute, faceIndex * 3 );
-				_face.b.fromBufferAttribute( this.colorAttribute, faceIndex * 3 + 1 );
-				_face.c.fromBufferAttribute( this.colorAttribute, faceIndex * 3 + 2 );
+		}
 
-				_color
-					.set( 0, 0, 0 )
-					.addScaledVector( _face.a, u )
-					.addScaledVector( _face.b, v )
-					.addScaledVector( _face.c, 1 - ( u + v ) );
+		if ( targetColor !== undefined && this.colorAttribute !== undefined ) {
 
-				targetColor.r = _color.x;
-				targetColor.g = _color.y;
-				targetColor.b = _color.z;
+			_face.a.fromBufferAttribute( this.colorAttribute, faceIndex * 3 );
+			_face.b.fromBufferAttribute( this.colorAttribute, faceIndex * 3 + 1 );
+			_face.c.fromBufferAttribute( this.colorAttribute, faceIndex * 3 + 2 );
 
-			}
+			_color
+				.set( 0, 0, 0 )
+				.addScaledVector( _face.a, u )
+				.addScaledVector( _face.b, v )
+				.addScaledVector( _face.c, 1 - ( u + v ) );
 
-			return this;
+			targetColor.r = _color.x;
+			targetColor.g = _color.y;
+			targetColor.b = _color.z;
 
 		}
 
-	};
+		return this;
 
-	return MeshSurfaceSampler;
+	}
 
-} )();
+}
 
 export { MeshSurfaceSampler };

examples/jsm/math/Octree.js

@@ -9,17 +9,18 @@ import {
 import { Capsule } from '../math/Capsule.js';
 
 
-var Octree = ( function () {
+const _v1 = new Vector3();
+const _v2 = new Vector3();
+const _plane = new Plane();
+const _line1 = new Line3();
+const _line2 = new Line3();
+const _sphere = new Sphere();
+const _capsule = new Capsule();
 
-	var _v1 = new Vector3();
-	var _v2 = new Vector3();
-	var _plane = new Plane();
-	var _line1 = new Line3();
-	var _line2 = new Line3();
-	var _sphere = new Sphere();
-	var _capsule = new Capsule();
+class Octree {
 
-	function Octree( box ) {
+
+	constructor( box ) {
 
 		this.triangles = [];
 		this.box = box;
@@ -27,443 +28,437 @@ var Octree = ( function () {
 
 	}
 
-	Object.assign( Octree.prototype, {
-
-		addTriangle: function ( triangle ) {
-
-			if ( ! this.bounds ) this.bounds = new Box3();
+	addTriangle( triangle ) {
 
-			this.bounds.min.x = Math.min( this.bounds.min.x, triangle.a.x, triangle.b.x, triangle.c.x );
-			this.bounds.min.y = Math.min( this.bounds.min.y, triangle.a.y, triangle.b.y, triangle.c.y );
-			this.bounds.min.z = Math.min( this.bounds.min.z, triangle.a.z, triangle.b.z, triangle.c.z );
-			this.bounds.max.x = Math.max( this.bounds.max.x, triangle.a.x, triangle.b.x, triangle.c.x );
-			this.bounds.max.y = Math.max( this.bounds.max.y, triangle.a.y, triangle.b.y, triangle.c.y );
-			this.bounds.max.z = Math.max( this.bounds.max.z, triangle.a.z, triangle.b.z, triangle.c.z );
+		if ( ! this.bounds ) this.bounds = new Box3();
 
-			this.triangles.push( triangle );
+		this.bounds.min.x = Math.min( this.bounds.min.x, triangle.a.x, triangle.b.x, triangle.c.x );
+		this.bounds.min.y = Math.min( this.bounds.min.y, triangle.a.y, triangle.b.y, triangle.c.y );
+		this.bounds.min.z = Math.min( this.bounds.min.z, triangle.a.z, triangle.b.z, triangle.c.z );
+		this.bounds.max.x = Math.max( this.bounds.max.x, triangle.a.x, triangle.b.x, triangle.c.x );
+		this.bounds.max.y = Math.max( this.bounds.max.y, triangle.a.y, triangle.b.y, triangle.c.y );
+		this.bounds.max.z = Math.max( this.bounds.max.z, triangle.a.z, triangle.b.z, triangle.c.z );
 
-			return this;
+		this.triangles.push( triangle );
 
-		},
+		return this;
 
-		calcBox: function () {
+	}
 
-			this.box = this.bounds.clone();
+	calcBox() {
 
-			// offset small ammount to account for regular grid
-			this.box.min.x -= 0.01;
-			this.box.min.y -= 0.01;
-			this.box.min.z -= 0.01;
+		this.box = this.bounds.clone();
 
-			return this;
+		// offset small ammount to account for regular grid
+		this.box.min.x -= 0.01;
+		this.box.min.y -= 0.01;
+		this.box.min.z -= 0.01;
 
-		},
+		return this;
 
-		split: function ( level ) {
+	}
 
-			if ( ! this.box ) return;
+	split( level ) {
 
-			var subTrees = [],
-				halfsize = _v2.copy( this.box.max ).sub( this.box.min ).multiplyScalar( 0.5 ),
-				box, v, triangle;
+		if ( ! this.box ) return;
 
-			for ( var x = 0; x < 2; x ++ ) {
+		const subTrees = [];
+		const halfsize = _v2.copy( this.box.max ).sub( this.box.min ).multiplyScalar( 0.5 );
 
-				for ( var y = 0; y < 2; y ++ ) {
+		for ( let x = 0; x < 2; x ++ ) {
 
-					for ( var z = 0; z < 2; z ++ ) {
+			for ( let y = 0; y < 2; y ++ ) {
 
-						box = new Box3();
-						v = _v1.set( x, y, z );
+				for ( let z = 0; z < 2; z ++ ) {
 
-						box.min.copy( this.box.min ).add( v.multiply( halfsize ) );
-						box.max.copy( box.min ).add( halfsize );
+					const box = new Box3();
+					const v = _v1.set( x, y, z );
 
-						subTrees.push( new Octree( box ) );
+					box.min.copy( this.box.min ).add( v.multiply( halfsize ) );
+					box.max.copy( box.min ).add( halfsize );
 
-					}
+					subTrees.push( new Octree( box ) );
 
 				}
 
 			}
 
-			while ( triangle = this.triangles.pop() ) {
+		}
+
+		let triangle;
 
-				for ( var i = 0; i < subTrees.length; i ++ ) {
+		while ( triangle = this.triangles.pop() ) {
 
-					if ( subTrees[ i ].box.intersectsTriangle( triangle ) ) {
+			for ( let i = 0; i < subTrees.length; i ++ ) {
 
-						subTrees[ i ].triangles.push( triangle );
+				if ( subTrees[ i ].box.intersectsTriangle( triangle ) ) {
 
-					}
+					subTrees[ i ].triangles.push( triangle );
 
 				}
 
 			}
 
-			for ( var i = 0; i < subTrees.length; i ++ ) {
+		}
 
-				var len = subTrees[ i ].triangles.length;
+		for ( let i = 0; i < subTrees.length; i ++ ) {
 
-				if ( len > 8 && level < 16 ) {
+			const len = subTrees[ i ].triangles.length;
 
-					subTrees[ i ].split( level + 1 );
+			if ( len > 8 && level < 16 ) {
 
-				}
+				subTrees[ i ].split( level + 1 );
 
-				if ( len != 0 ) {
+			}
 
-					this.subTrees.push( subTrees[ i ] );
+			if ( len !== 0 ) {
 
-				}
+				this.subTrees.push( subTrees[ i ] );
 
 			}
 
-			return this;
+		}
 
-		},
+		return this;
 
-		build: function () {
+	}
 
-			this.calcBox();
-			this.split( 0 );
+	build() {
 
-			return this;
+		this.calcBox();
+		this.split( 0 );
 
-		},
+		return this;
 
-		getRayTriangles: function ( ray, triangles ) {
+	}
 
-			for ( var i = 0; i < this.subTrees.length; i ++ ) {
+	getRayTriangles( ray, triangles ) {
 
-				var subTree = this.subTrees[ i ];
-				if ( ! ray.intersectsBox( subTree.box ) ) continue;
+		for ( let i = 0; i < this.subTrees.length; i ++ ) {
 
-				if ( subTree.triangles.length > 0 ) {
+			const subTree = this.subTrees[ i ];
+			if ( ! ray.intersectsBox( subTree.box ) ) continue;
 
-					for ( var j = 0; j < subTree.triangles.length; j ++ ) {
+			if ( subTree.triangles.length > 0 ) {
 
-						if ( triangles.indexOf( subTree.triangles[ j ] ) === - 1 ) triangles.push( subTree.triangles[ j ] );
+				for ( let j = 0; j < subTree.triangles.length; j ++ ) {
 
-					}
+					if ( triangles.indexOf( subTree.triangles[ j ] ) === - 1 ) triangles.push( subTree.triangles[ j ] );
 
-				} else {
+				}
 
-					subTree.getRayTriangles( ray, triangles );
+			} else {
 
-				}
+				subTree.getRayTriangles( ray, triangles );
 
 			}
 
-			return triangles;
-
-		},
+		}
 
-		triangleCapsuleIntersect: function ( capsule, triangle ) {
+		return triangles;
 
-			var point1, point2, line1, line2;
+	}
 
-			triangle.getPlane( _plane );
+	triangleCapsuleIntersect( capsule, triangle ) {
 
-			var d1 = _plane.distanceToPoint( capsule.start ) - capsule.radius;
-			var d2 = _plane.distanceToPoint( capsule.end ) - capsule.radius;
+		triangle.getPlane( _plane );
 
-			if ( ( d1 > 0 && d2 > 0 ) || ( d1 < - capsule.radius && d2 < - capsule.radius ) ) {
+		const d1 = _plane.distanceToPoint( capsule.start ) - capsule.radius;
+		const d2 = _plane.distanceToPoint( capsule.end ) - capsule.radius;
 
-				return false;
+		if ( ( d1 > 0 && d2 > 0 ) || ( d1 < - capsule.radius && d2 < - capsule.radius ) ) {
 
-			}
+			return false;
 
-			var delta = Math.abs( d1 / ( Math.abs( d1 ) + Math.abs( d2 ) ) );
-			var intersectPoint = _v1.copy( capsule.start ).lerp( capsule.end, delta );
+		}
 
-			if ( triangle.containsPoint( intersectPoint ) ) {
+		const delta = Math.abs( d1 / ( Math.abs( d1 ) + Math.abs( d2 ) ) );
+		const intersectPoint = _v1.copy( capsule.start ).lerp( capsule.end, delta );
 
-				return { normal: _plane.normal.clone(), point: intersectPoint.clone(), depth: Math.abs( Math.min( d1, d2 ) ) };
+		if ( triangle.containsPoint( intersectPoint ) ) {
 
-			}
+			return { normal: _plane.normal.clone(), point: intersectPoint.clone(), depth: Math.abs( Math.min( d1, d2 ) ) };
 
-			var r2 = capsule.radius * capsule.radius;
+		}
 
-			line1 = _line1.set( capsule.start, capsule.end );
+		const r2 = capsule.radius * capsule.radius;
 
-			var lines = [
-				[ triangle.a, triangle.b ],
-				[ triangle.b, triangle.c ],
-				[ triangle.c, triangle.a ]
-			];
+		const line1 = _line1.set( capsule.start, capsule.end );
 
-			for ( var i = 0; i < lines.length; i ++ ) {
+		const lines = [
+			[ triangle.a, triangle.b ],
+			[ triangle.b, triangle.c ],
+			[ triangle.c, triangle.a ]
+		];
 
-				line2 = _line2.set( lines[ i ][ 0 ], lines[ i ][ 1 ] );
+		for ( let i = 0; i < lines.length; i ++ ) {
 
-				[ point1, point2 ] = capsule.lineLineMinimumPoints( line1, line2 );
+			const line2 = _line2.set( lines[ i ][ 0 ], lines[ i ][ 1 ] );
 
-				if ( point1.distanceToSquared( point2 ) < r2 ) {
+			const [ point1, point2 ] = capsule.lineLineMinimumPoints( line1, line2 );
 
-					return { normal: point1.clone().sub( point2 ).normalize(), point: point2.clone(), depth: capsule.radius - point1.distanceTo( point2 ) };
+			if ( point1.distanceToSquared( point2 ) < r2 ) {
 
-				}
+				return { normal: point1.clone().sub( point2 ).normalize(), point: point2.clone(), depth: capsule.radius - point1.distanceTo( point2 ) };
 
 			}
 
-			return false;
+		}
 
-		},
+		return false;
 
-		triangleSphereIntersect: function ( sphere, triangle ) {
+	}
 
-			triangle.getPlane( _plane );
+	triangleSphereIntersect( sphere, triangle ) {
 
-			if ( ! sphere.intersectsPlane( _plane ) ) return false;
+		triangle.getPlane( _plane );
 
-			var depth = Math.abs( _plane.distanceToSphere( sphere ) );
-			var r2 = sphere.radius * sphere.radius - depth * depth;
+		if ( ! sphere.intersectsPlane( _plane ) ) return false;
 
-			var plainPoint = _plane.projectPoint( sphere.center, _v1 );
+		const depth = Math.abs( _plane.distanceToSphere( sphere ) );
+		const r2 = sphere.radius * sphere.radius - depth * depth;
 
-			if ( triangle.containsPoint( sphere.center ) ) {
+		const plainPoint = _plane.projectPoint( sphere.center, _v1 );
 
-				return { normal: _plane.normal.clone(), point: plainPoint.clone(), depth: Math.abs( _plane.distanceToSphere( sphere ) ) };
+		if ( triangle.containsPoint( sphere.center ) ) {
 
-			}
+			return { normal: _plane.normal.clone(), point: plainPoint.clone(), depth: Math.abs( _plane.distanceToSphere( sphere ) ) };
 
-			var lines = [
-				[ triangle.a, triangle.b ],
-				[ triangle.b, triangle.c ],
-				[ triangle.c, triangle.a ]
-			];
+		}
 
-			for ( var i = 0; i < lines.length; i ++ ) {
+		const lines = [
+			[ triangle.a, triangle.b ],
+			[ triangle.b, triangle.c ],
+			[ triangle.c, triangle.a ]
+		];
 
-				_line1.set( lines[ i ][ 0 ], lines[ i ][ 1 ] );
-				_line1.closestPointToPoint( plainPoint, true, _v2 );
+		for ( let i = 0; i < lines.length; i ++ ) {
 
-				var d = _v2.distanceToSquared( sphere.center );
+			_line1.set( lines[ i ][ 0 ], lines[ i ][ 1 ] );
+			_line1.closestPointToPoint( plainPoint, true, _v2 );
 
-				if ( d < r2 ) {
+			const d = _v2.distanceToSquared( sphere.center );
 
-					return { normal: sphere.center.clone().sub( _v2 ).normalize(), point: _v2.clone(), depth: sphere.radius - Math.sqrt( d ) };
+			if ( d < r2 ) {
 
-				}
+				return { normal: sphere.center.clone().sub( _v2 ).normalize(), point: _v2.clone(), depth: sphere.radius - Math.sqrt( d ) };
 
 			}
 
-			return false;
+		}
 
-		},
+		return false;
 
-		getSphereTriangles: function ( sphere, triangles ) {
+	}
 
-			for ( var i = 0; i < this.subTrees.length; i ++ ) {
+	getSphereTriangles( sphere, triangles ) {
 
-				var subTree = this.subTrees[ i ];
+		for ( let i = 0; i < this.subTrees.length; i ++ ) {
 
-				if ( ! sphere.intersectsBox( subTree.box ) ) continue;
+			const subTree = this.subTrees[ i ];
 
-				if ( subTree.triangles.length > 0 ) {
+			if ( ! sphere.intersectsBox( subTree.box ) ) continue;
 
-					for ( var j = 0; j < subTree.triangles.length; j ++ ) {
+			if ( subTree.triangles.length > 0 ) {
 
-						if ( triangles.indexOf( subTree.triangles[ j ] ) === - 1 ) triangles.push( subTree.triangles[ j ] );
+				for ( let j = 0; j < subTree.triangles.length; j ++ ) {
 
-					}
+					if ( triangles.indexOf( subTree.triangles[ j ] ) === - 1 ) triangles.push( subTree.triangles[ j ] );
 
-				} else {
+				}
 
-					subTree.getSphereTriangles( sphere, triangles );
+			} else {
 
-				}
+				subTree.getSphereTriangles( sphere, triangles );
 
 			}
 
-		},
+		}
 
-		getCapsuleTriangles: function ( capsule, triangles ) {
+	}
 
-			for ( var i = 0; i < this.subTrees.length; i ++ ) {
+	getCapsuleTriangles( capsule, triangles ) {
 
-				var subTree = this.subTrees[ i ];
+		for ( let i = 0; i < this.subTrees.length; i ++ ) {
 
-				if ( ! capsule.intersectsBox( subTree.box ) ) continue;
+			const subTree = this.subTrees[ i ];
 
-				if ( subTree.triangles.length > 0 ) {
+			if ( ! capsule.intersectsBox( subTree.box ) ) continue;
 
-					for ( var j = 0; j < subTree.triangles.length; j ++ ) {
+			if ( subTree.triangles.length > 0 ) {
 
-						if ( triangles.indexOf( subTree.triangles[ j ] ) === - 1 ) triangles.push( subTree.triangles[ j ] );
+				for ( let j = 0; j < subTree.triangles.length; j ++ ) {
 
-					}
+					if ( triangles.indexOf( subTree.triangles[ j ] ) === - 1 ) triangles.push( subTree.triangles[ j ] );
 
-				} else {
+				}
 
-					subTree.getCapsuleTriangles( capsule, triangles );
+			} else {
 
-				}
+				subTree.getCapsuleTriangles( capsule, triangles );
 
 			}
 
-		},
+		}
 
-		sphereIntersect( sphere ) {
+	}
 
-			_sphere.copy( sphere );
+	sphereIntersect( sphere ) {
 
-			var triangles = [], result, hit = false;
+		_sphere.copy( sphere );
 
-			this.getSphereTriangles( sphere, triangles );
+		const triangles = [];
+		let result, hit = false;
 
-			for ( var i = 0; i < triangles.length; i ++ ) {
+		this.getSphereTriangles( sphere, triangles );
 
-				if ( result = this.triangleSphereIntersect( _sphere, triangles[ i ] ) ) {
+		for ( let i = 0; i < triangles.length; i ++ ) {
 
-					hit = true;
+			if ( result = this.triangleSphereIntersect( _sphere, triangles[ i ] ) ) {
 
-					_sphere.center.add( result.normal.multiplyScalar( result.depth ) );
+				hit = true;
 
-				}
+				_sphere.center.add( result.normal.multiplyScalar( result.depth ) );
 
 			}
 
-			if ( hit ) {
+		}
 
-				var collisionVector = _sphere.center.clone().sub( sphere.center );
-				var depth = collisionVector.length();
+		if ( hit ) {
 
-				return { normal: collisionVector.normalize(), depth: depth };
+			const collisionVector = _sphere.center.clone().sub( sphere.center );
+			const depth = collisionVector.length();
 
-			}
+			return { normal: collisionVector.normalize(), depth: depth };
 
-			return false;
+		}
 
-		},
+		return false;
 
-		capsuleIntersect: function ( capsule ) {
+	}
 
-			_capsule.copy( capsule );
+	capsuleIntersect( capsule ) {
 
-			var triangles = [], result, hit = false;
+		_capsule.copy( capsule );
 
-			this.getCapsuleTriangles( _capsule, triangles );
+		const triangles = [];
+		let result, hit = false;
 
-			for ( var i = 0; i < triangles.length; i ++ ) {
+		this.getCapsuleTriangles( _capsule, triangles );
 
-				if ( result = this.triangleCapsuleIntersect( _capsule, triangles[ i ] ) ) {
+		for ( let i = 0; i < triangles.length; i ++ ) {
 
-					hit = true;
+			if ( result = this.triangleCapsuleIntersect( _capsule, triangles[ i ] ) ) {
 
-					_capsule.translate( result.normal.multiplyScalar( result.depth ) );
+				hit = true;
 
-				}
+				_capsule.translate( result.normal.multiplyScalar( result.depth ) );
 
 			}
 
-			if ( hit ) {
+		}
 
-				var collisionVector = _capsule.getCenter( new Vector3() ).sub( capsule.getCenter( _v1 ) );
-				var depth = collisionVector.length();
+		if ( hit ) {
 
-				return { normal: collisionVector.normalize(), depth: depth };
+			const collisionVector = _capsule.getCenter( new Vector3() ).sub( capsule.getCenter( _v1 ) );
+			const depth = collisionVector.length();
 
-			}
+			return { normal: collisionVector.normalize(), depth: depth };
 
-			return false;
+		}
 
-		},
+		return false;
 
-		rayIntersect: function ( ray ) {
+	}
 
-			if ( ray.direction.length() === 0 ) return;
+	rayIntersect( ray ) {
 
-			var triangles = [], triangle, position,
-				distance = 1e100,
-				result;
+		if ( ray.direction.length() === 0 ) return;
 
-			this.getRayTriangles( ray, triangles );
+		const triangles = [];
+		let triangle, position, distance = 1e100;
 
-			for ( var i = 0; i < triangles.length; i ++ ) {
+		this.getRayTriangles( ray, triangles );
 
-				result = ray.intersectTriangle( triangles[ i ].a, triangles[ i ].b, triangles[ i ].c, true, _v1 );
+		for ( let i = 0; i < triangles.length; i ++ ) {
 
-				if ( result ) {
+			const result = ray.intersectTriangle( triangles[ i ].a, triangles[ i ].b, triangles[ i ].c, true, _v1 );
 
-					var newdistance = result.sub( ray.origin ).length();
+			if ( result ) {
 
-					if ( distance > newdistance ) {
+				const newdistance = result.sub( ray.origin ).length();
 
-						position = result.clone().add( ray.origin );
-						distance = newdistance;
-						triangle = triangles[ i ];
+				if ( distance > newdistance ) {
 
-					}
+					position = result.clone().add( ray.origin );
+					distance = newdistance;
+					triangle = triangles[ i ];
 
 				}
 
 			}
 
-			return distance < 1e100 ? { distance: distance, triangle: triangle, position: position } : false;
+		}
 
-		},
+		return distance < 1e100 ? { distance: distance, triangle: triangle, position: position } : false;
 
-		fromGraphNode: function ( group ) {
+	}
 
-			group.traverse( ( obj ) => {
+	fromGraphNode( group ) {
 
-				if ( obj.type === 'Mesh' ) {
+		group.traverse( ( obj ) => {
 
-					obj.updateMatrix();
-					obj.updateWorldMatrix();
+			if ( obj.type === 'Mesh' ) {
 
-					var geometry, isTemp = false;
+				obj.updateMatrix();
+				obj.updateWorldMatrix();
 
-					if ( obj.geometry.index ) {
+				let geometry, isTemp = false;
 
-						isTemp = true;
-						geometry = obj.geometry.clone().toNonIndexed();
+				if ( obj.geometry.index ) {
 
-					} else {
+					isTemp = true;
+					geometry = obj.geometry.clone().toNonIndexed();
 
-						geometry = obj.geometry;
+				} else {
 
-					}
+					geometry = obj.geometry;
 
-					var positions = geometry.attributes.position.array;
-					var transform = obj.matrixWorld;
+				}
 
-					for ( var i = 0; i < positions.length; i += 9 ) {
+				const positions = geometry.attributes.position.array;
+				const transform = obj.matrixWorld;
 
-						var v1 = new Vector3( positions[ i ], positions[ i + 1 ], positions[ i + 2 ] );
-						var v2 = new Vector3( positions[ i + 3 ], positions[ i + 4 ], positions[ i + 5 ] );
-						var v3 = new Vector3( positions[ i + 6 ], positions[ i + 7 ], positions[ i + 8 ] );
+				for ( let i = 0; i < positions.length; i += 9 ) {
 
-						v1.applyMatrix4( transform );
-						v2.applyMatrix4( transform );
-						v3.applyMatrix4( transform );
+					const v1 = new Vector3( positions[ i ], positions[ i + 1 ], positions[ i + 2 ] );
+					const v2 = new Vector3( positions[ i + 3 ], positions[ i + 4 ], positions[ i + 5 ] );
+					const v3 = new Vector3( positions[ i + 6 ], positions[ i + 7 ], positions[ i + 8 ] );
 
-						this.addTriangle( new Triangle( v1, v2, v3 ) );
+					v1.applyMatrix4( transform );
+					v2.applyMatrix4( transform );
+					v3.applyMatrix4( transform );
 
-					}
+					this.addTriangle( new Triangle( v1, v2, v3 ) );
 
-					if ( isTemp ) {
+				}
 
-						geometry.dispose();
+				if ( isTemp ) {
 
-					}
+					geometry.dispose();
 
 				}
 
-			} );
-
-			this.build();
+			}
 
-			return this;
+		} );
 
-		}
+		this.build();
 
-	} );
+		return this;
 
-	return Octree;
+	}
 
-} )();
+}
 
 export { Octree };

examples/jsm/utils/RoughnessMipmapper.js

@@ -17,47 +17,44 @@ import {
 	WebGLRenderTarget
 } from '../../../build/three.module.js';
 
-var _mipmapMaterial = _getMipmapMaterial();
+const _mipmapMaterial = _getMipmapMaterial();
 
-var _mesh = new Mesh( new PlaneGeometry( 2, 2 ), _mipmapMaterial );
+const _mesh = new Mesh( new PlaneGeometry( 2, 2 ), _mipmapMaterial );
 
-var _flatCamera = new OrthographicCamera( 0, 1, 0, 1, 0, 1 );
+const _flatCamera = new OrthographicCamera( 0, 1, 0, 1, 0, 1 );
 
-var _tempTarget = null;
+let _tempTarget = null;
 
-var _renderer = null;
+let _renderer = null;
 
-function RoughnessMipmapper( renderer ) {
+class RoughnessMipmapper {
 
-	_renderer = renderer;
+	constructor( renderer ) {
 
-	_renderer.compile( _mesh, _flatCamera );
+		_renderer = renderer;
 
-}
-
-RoughnessMipmapper.prototype = {
+		_renderer.compile( _mesh, _flatCamera );
 
-	constructor: RoughnessMipmapper,
+	}
 
-	generateMipmaps: function ( material ) {
+	generateMipmaps( material ) {
 
 		if ( 'roughnessMap' in material === false ) return;
 
-		var { roughnessMap, normalMap } = material;
+		const { roughnessMap, normalMap } = material;
 
 		if ( roughnessMap === null || normalMap === null || ! roughnessMap.generateMipmaps || material.userData.roughnessUpdated ) return;
 
 		material.userData.roughnessUpdated = true;
 
-		var width = Math.max( roughnessMap.image.width, normalMap.image.width );
-
-		var height = Math.max( roughnessMap.image.height, normalMap.image.height );
+		let width = Math.max( roughnessMap.image.width, normalMap.image.width );
+		let height = Math.max( roughnessMap.image.height, normalMap.image.height );
 
 		if ( ! MathUtils.isPowerOfTwo( width ) || ! MathUtils.isPowerOfTwo( height ) ) return;
 
-		var oldTarget = _renderer.getRenderTarget();
+		const oldTarget = _renderer.getRenderTarget();
 
-		var autoClear = _renderer.autoClear;
+		const autoClear = _renderer.autoClear;
 
 		_renderer.autoClear = false;
 
@@ -73,7 +70,7 @@ RoughnessMipmapper.prototype = {
 
 		if ( width !== roughnessMap.image.width || height !== roughnessMap.image.height ) {
 
-			var params = {
+			const params = {
 				wrapS: roughnessMap.wrapS,
 				wrapT: roughnessMap.wrapT,
 				magFilter: roughnessMap.magFilter,
@@ -81,7 +78,7 @@ RoughnessMipmapper.prototype = {
 				depthBuffer: false
 			};
 
-			var newRoughnessTarget = new WebGLRenderTarget( width, height, params );
+			const newRoughnessTarget = new WebGLRenderTarget( width, height, params );
 
 			newRoughnessTarget.texture.generateMipmaps = true;
 
@@ -111,11 +108,11 @@ RoughnessMipmapper.prototype = {
 
 		_mipmapMaterial.uniforms.normalMap.value = normalMap;
 
-		var position = new Vector2( 0, 0 );
+		const position = new Vector2( 0, 0 );
 
-		var texelSize = _mipmapMaterial.uniforms.texelSize.value;
+		const texelSize = _mipmapMaterial.uniforms.texelSize.value;
 
-		for ( var mip = 0; width >= 1 && height >= 1; ++ mip, width /= 2, height /= 2 ) {
+		for ( let mip = 0; width >= 1 && height >= 1; ++ mip, width /= 2, height /= 2 ) {
 
 			// Rendering to a mip level is not allowed in webGL1. Instead we must set
 			// up a secondary texture to write the result to, then copy it back to the
@@ -145,9 +142,9 @@ RoughnessMipmapper.prototype = {
 
 		_renderer.autoClear = autoClear;
 
-	},
+	}
 
-	dispose: function () {
+	dispose() {
 
 		_mipmapMaterial.dispose();
 
@@ -157,11 +154,11 @@ RoughnessMipmapper.prototype = {
 
 	}
 
-};
+}
 
 function _getMipmapMaterial() {
 
-	var shaderMaterial = new RawShaderMaterial( {
+	const shaderMaterial = new RawShaderMaterial( {
 
 		uniforms: {
 			roughnessMap: { value: null },

examples/jsm/webxr/XRControllerModelFactory.js

@@ -16,20 +16,18 @@ import {
 const DEFAULT_PROFILES_PATH = 'https://cdn.jsdelivr.net/npm/@webxr-input-profiles/[email protected]/dist/profiles';
 const DEFAULT_PROFILE = 'generic-trigger';
 
-function XRControllerModel( ) {
+class XRControllerModel extends Object3D {
 
-	Object3D.call( this );
+	constructor() {
 
-	this.motionController = null;
-	this.envMap = null;
+		super();
 
-}
-
-XRControllerModel.prototype = Object.assign( Object.create( Object3D.prototype ), {
+		this.motionController = null;
+		this.envMap = null;
 
-	constructor: XRControllerModel,
+	}
 
-	setEnvironmentMap: function ( envMap ) {
+	setEnvironmentMap( envMap ) {
 
 		if ( this.envMap == envMap ) {
 
@@ -51,15 +49,15 @@ XRControllerModel.prototype = Object.assign( Object.create( Object3D.prototype )
 
 		return this;
 
-	},
+	}
 
 	/**
 	 * Polls data from the XRInputSource and updates the model's components to match
 	 * the real world data
 	 */
-	updateMatrixWorld: function ( force ) {
+	updateMatrixWorld( force ) {
 
-		Object3D.prototype.updateMatrixWorld.call( this, force );
+		super.updateMatrixWorld( force );
 
 		if ( ! this.motionController ) return;
 
@@ -105,7 +103,7 @@ XRControllerModel.prototype = Object.assign( Object.create( Object3D.prototype )
 
 	}
 
-} );
+}
 
 /**
  * Walks the model's tree to find the nodes needed to animate the components and
@@ -206,9 +204,9 @@ function addAssetSceneToControllerModel( controllerModel, scene ) {
 
 }
 
-var XRControllerModelFactory = ( function () {
+class XRControllerModelFactory {
 
-	function XRControllerModelFactory( gltfLoader = null ) {
+	constructor( gltfLoader = null ) {
 
 		this.gltfLoader = gltfLoader;
 		this.path = DEFAULT_PROFILES_PATH;
@@ -223,87 +221,79 @@ var XRControllerModelFactory = ( function () {
 
 	}
 
-	XRControllerModelFactory.prototype = {
+	createControllerModel( controller ) {
 
-		constructor: XRControllerModelFactory,
+		const controllerModel = new XRControllerModel();
+		let scene = null;
 
-		createControllerModel: function ( controller ) {
+		controller.addEventListener( 'connected', ( event ) => {
 
-			const controllerModel = new XRControllerModel();
-			let scene = null;
+			const xrInputSource = event.data;
 
-			controller.addEventListener( 'connected', ( event ) => {
+			if ( xrInputSource.targetRayMode !== 'tracked-pointer' || ! xrInputSource.gamepad ) return;
 
-				const xrInputSource = event.data;
+			fetchProfile( xrInputSource, this.path, DEFAULT_PROFILE ).then( ( { profile, assetPath } ) => {
 
-				if ( xrInputSource.targetRayMode !== 'tracked-pointer' || ! xrInputSource.gamepad ) return;
+				controllerModel.motionController = new MotionController(
+					xrInputSource,
+					profile,
+					assetPath
+				);
 
-				fetchProfile( xrInputSource, this.path, DEFAULT_PROFILE ).then( ( { profile, assetPath } ) => {
+				const cachedAsset = this._assetCache[ controllerModel.motionController.assetUrl ];
+				if ( cachedAsset ) {
 
-					controllerModel.motionController = new MotionController(
-						xrInputSource,
-						profile,
-						assetPath
-					);
+					scene = cachedAsset.scene.clone();
 
-					const cachedAsset = this._assetCache[ controllerModel.motionController.assetUrl ];
-					if ( cachedAsset ) {
+					addAssetSceneToControllerModel( controllerModel, scene );
 
-						scene = cachedAsset.scene.clone();
+				} else {
 
-						addAssetSceneToControllerModel( controllerModel, scene );
-
-					} else {
-
-						if ( ! this.gltfLoader ) {
+					if ( ! this.gltfLoader ) {
 
-							throw new Error( 'GLTFLoader not set.' );
+						throw new Error( 'GLTFLoader not set.' );
 
-						}
-
-						this.gltfLoader.setPath( '' );
-						this.gltfLoader.load( controllerModel.motionController.assetUrl, ( asset ) => {
+					}
 
-							this._assetCache[ controllerModel.motionController.assetUrl ] = asset;
+					this.gltfLoader.setPath( '' );
+					this.gltfLoader.load( controllerModel.motionController.assetUrl, ( asset ) => {
 
-							scene = asset.scene.clone();
+						this._assetCache[ controllerModel.motionController.assetUrl ] = asset;
 
-							addAssetSceneToControllerModel( controllerModel, scene );
+						scene = asset.scene.clone();
 
-						},
-						null,
-						() => {
+						addAssetSceneToControllerModel( controllerModel, scene );
 
-							throw new Error( `Asset ${controllerModel.motionController.assetUrl} missing or malformed.` );
+					},
+					null,
+					() => {
 
-						} );
+						throw new Error( `Asset ${controllerModel.motionController.assetUrl} missing or malformed.` );
 
-					}
+					} );
 
-				} ).catch( ( err ) => {
+				}
 
-					console.warn( err );
+			} ).catch( ( err ) => {
 
-				} );
+				console.warn( err );
 
 			} );
 
-			controller.addEventListener( 'disconnected', () => {
-
-				controllerModel.motionController = null;
-				controllerModel.remove( scene );
-				scene = null;
+		} );
 
-			} );
+		controller.addEventListener( 'disconnected', () => {
 
-			return controllerModel;
+			controllerModel.motionController = null;
+			controllerModel.remove( scene );
+			scene = null;
 
-		}
+		} );
 
-	};
+		return controllerModel;
 
-	return XRControllerModelFactory;
+	}
 
-} )();
+}
 
 export { XRControllerModelFactory };

examples/jsm/webxr/XRHandModelFactory.js

@@ -10,25 +10,23 @@ import {
 	XRHandOculusMeshModel
 } from './XRHandOculusMeshModel.js';
 
-function XRHandModel( controller ) {
+class XRHandModel extends Object3D {
 
-	Object3D.call( this );
+	constructor( controller ) {
 
-	this.controller = controller;
-	this.motionController = null;
-	this.envMap = null;
+		super();
 
-	this.mesh = null;
+		this.controller = controller;
+		this.motionController = null;
+		this.envMap = null;
 
-}
-
-XRHandModel.prototype = Object.assign( Object.create( Object3D.prototype ), {
+		this.mesh = null;
 
-	constructor: XRHandModel,
+	}
 
-	updateMatrixWorld: function ( force ) {
+	updateMatrixWorld( force ) {
 
-		Object3D.prototype.updateMatrixWorld.call( this, force );
+		super.updateMatrixWorld( force );
 
 		if ( this.motionController ) {
 
@@ -36,78 +34,69 @@ XRHandModel.prototype = Object.assign( Object.create( Object3D.prototype ), {
 
 		}
 
-	},
-} );
+	}
 
+}
 
-const XRHandModelFactory = ( function () {
+class XRHandModelFactory {
 
-	function XRHandModelFactory() {
+	constructor() {
 
 		this.path = '';
 
 	}
 
-	XRHandModelFactory.prototype = {
-
-		constructor: XRHandModelFactory,
-
-		setPath: function ( path ) {
+	setPath( path ) {
 
-			this.path = path;
-			return this;
+		this.path = path;
+		return this;
 
-		},
-
-		createHandModel: function ( controller, profile, options ) {
+	}
 
-			const handModel = new XRHandModel( controller );
+	createHandModel( controller, profile, options ) {
 
-			controller.addEventListener( 'connected', ( event ) => {
+		const handModel = new XRHandModel( controller );
 
-				const xrInputSource = event.data;
+		controller.addEventListener( 'connected', ( event ) => {
 
-				if ( xrInputSource.hand && ! handModel.motionController ) {
+			const xrInputSource = event.data;
 
-					handModel.visible = true;
-					handModel.xrInputSource = xrInputSource;
+			if ( xrInputSource.hand && ! handModel.motionController ) {
 
-					// @todo Detect profile if not provided
-					if ( profile === undefined || profile === 'spheres' ) {
+				handModel.visible = true;
+				handModel.xrInputSource = xrInputSource;
 
-						handModel.motionController = new XRHandPrimitiveModel( handModel, controller, this.path, xrInputSource.handedness, { primitive: 'sphere' } );
+				// @todo Detect profile if not provided
+				if ( profile === undefined || profile === 'spheres' ) {
 
-					} else if ( profile === 'boxes' ) {
+					handModel.motionController = new XRHandPrimitiveModel( handModel, controller, this.path, xrInputSource.handedness, { primitive: 'sphere' } );
 
-						handModel.motionController = new XRHandPrimitiveModel( handModel, controller, this.path, xrInputSource.handedness, { primitive: 'box' } );
+				} else if ( profile === 'boxes' ) {
 
-					} else if ( profile === 'oculus' ) {
+					handModel.motionController = new XRHandPrimitiveModel( handModel, controller, this.path, xrInputSource.handedness, { primitive: 'box' } );
 
-						handModel.motionController = new XRHandOculusMeshModel( handModel, controller, this.path, xrInputSource.handedness, options );
+				} else if ( profile === 'oculus' ) {
 
-					}
+					handModel.motionController = new XRHandOculusMeshModel( handModel, controller, this.path, xrInputSource.handedness, options );
 
 				}
 
-			} );
+			}
 
-			controller.addEventListener( 'disconnected', () => {
+		} );
 
-				// handModel.motionController = null;
-				// handModel.remove( scene );
-				// scene = null;
+		controller.addEventListener( 'disconnected', () => {
 
-			} );
+			// handModel.motionController = null;
+			// handModel.remove( scene );
+			// scene = null;
 
-			return handModel;
-
-		}
+		} );
 
-	};
+		return handModel;
 
-	return XRHandModelFactory;
-
-} )();
+	}
 
+}
 
 export { XRHandModelFactory };