Examples: Convert lines to ES6. (#21599)

mrdoob · Apr 7, 2021 · 7a8a35e · 7a8a35e
1 parent 807dced
commit 7a8a35e
Show file tree

Hide file tree

Showing 14 changed files with 882 additions and 862 deletions.
diff --git a/examples/js/lines/Line2.js b/examples/js/lines/Line2.js
@@ -1,20 +1,19 @@
 ( function () {
 
-	var Line2 = function ( geometry, material ) {
+	class Line2 extends THREE.LineSegments2 {
 
-		if ( geometry === undefined ) geometry = new THREE.LineGeometry();
-		if ( material === undefined ) material = new THREE.LineMaterial( {
+		constructor( geometry = new THREE.LineGeometry(), material = new THREE.LineMaterial( {
 			color: Math.random() * 0xffffff
-		} );
-		THREE.LineSegments2.call( this, geometry, material );
-		this.type = 'Line2';
+		} ) ) {
 
-	};
+			super( geometry, material );
+			this.type = 'Line2';
 
-	Line2.prototype = Object.assign( Object.create( THREE.LineSegments2.prototype ), {
-		constructor: Line2,
-		isLine2: true
-	} );
+		}
+
+	}
+
+	Line2.prototype.isLine2 = true;
 
 	THREE.Line2 = Line2;
 

diff --git a/examples/js/lines/LineGeometry.js b/examples/js/lines/LineGeometry.js
@@ -1,16 +1,15 @@
 ( function () {
 
-	var LineGeometry = function () {
+	class LineGeometry extends THREE.LineSegmentsGeometry {
 
-		THREE.LineSegmentsGeometry.call( this );
-		this.type = 'LineGeometry';
+		constructor() {
 
-	};
+			super();
+			this.type = 'LineGeometry';
 
-	LineGeometry.prototype = Object.assign( Object.create( THREE.LineSegmentsGeometry.prototype ), {
-		constructor: LineGeometry,
-		isLineGeometry: true,
-		setPositions: function ( array ) {
+		}
+
+		setPositions( array ) {
 
 			// converts [ x1, y1, z1,	x2, y2, z2, ... ] to pairs format
 			var length = array.length - 3;
@@ -27,11 +26,12 @@
 
 			}
 
-			THREE.LineSegmentsGeometry.prototype.setPositions.call( this, points );
+			super.setPositions( points );
 			return this;
 
-		},
-		setColors: function ( array ) {
+		}
+
+		setColors( array ) {
 
 			// converts [ r1, g1, b1,	r2, g2, b2, ... ] to pairs format
 			var length = array.length - 3;
@@ -48,11 +48,12 @@
 
 			}
 
-			THREE.LineSegmentsGeometry.prototype.setColors.call( this, colors );
+			super.setColors( colors );
 			return this;
 
-		},
-		fromLine: function ( line ) {
+		}
+
+		fromLine( line ) {
 
 			var geometry = line.geometry;
 
@@ -70,14 +71,18 @@
 
 			return this;
 
-		},
-		copy: function ( ) {
+		}
+
+		copy( ) {
 
 			// todo
 			return this;
 
 		}
-	} );
+
+	}
+
+	LineGeometry.prototype.isLineGeometry = true;
 
 	THREE.LineGeometry = LineGeometry;
 

diff --git a/examples/js/lines/LineMaterial.js b/examples/js/lines/LineMaterial.js
@@ -264,158 +264,160 @@
 		`
 	};
 
-	var LineMaterial = function ( parameters ) {
+	class LineMaterial extends THREE.ShaderMaterial {
 
-		THREE.ShaderMaterial.call( this, {
-			type: 'LineMaterial',
-			uniforms: THREE.UniformsUtils.clone( THREE.ShaderLib[ 'line' ].uniforms ),
-			vertexShader: THREE.ShaderLib[ 'line' ].vertexShader,
-			fragmentShader: THREE.ShaderLib[ 'line' ].fragmentShader,
-			clipping: true // required for clipping support
+		constructor( parameters ) {
 
-		} );
-		this.dashed = false;
-		Object.defineProperties( this, {
-			color: {
-				enumerable: true,
-				get: function () {
+			super( {
+				type: 'LineMaterial',
+				uniforms: THREE.UniformsUtils.clone( THREE.ShaderLib[ 'line' ].uniforms ),
+				vertexShader: THREE.ShaderLib[ 'line' ].vertexShader,
+				fragmentShader: THREE.ShaderLib[ 'line' ].fragmentShader,
+				clipping: true // required for clipping support
 
-					return this.uniforms.diffuse.value;
+			} );
+			this.dashed = false;
+			Object.defineProperties( this, {
+				color: {
+					enumerable: true,
+					get: function () {
 
-				},
-				set: function ( value ) {
-
-					this.uniforms.diffuse.value = value;
+						return this.uniforms.diffuse.value;
 
-				}
-			},
-			linewidth: {
-				enumerable: true,
-				get: function () {
+					},
+					set: function ( value ) {
 
-					return this.uniforms.linewidth.value;
+						this.uniforms.diffuse.value = value;
 
+					}
 				},
-				set: function ( value ) {
+				linewidth: {
+					enumerable: true,
+					get: function () {
 
-					this.uniforms.linewidth.value = value;
+						return this.uniforms.linewidth.value;
 
-				}
-			},
-			dashScale: {
-				enumerable: true,
-				get: function () {
+					},
+					set: function ( value ) {
 
-					return this.uniforms.dashScale.value;
+						this.uniforms.linewidth.value = value;
 
+					}
 				},
-				set: function ( value ) {
+				dashScale: {
+					enumerable: true,
+					get: function () {
 
-					this.uniforms.dashScale.value = value;
+						return this.uniforms.dashScale.value;
 
-				}
-			},
-			dashSize: {
-				enumerable: true,
-				get: function () {
+					},
+					set: function ( value ) {
 
-					return this.uniforms.dashSize.value;
+						this.uniforms.dashScale.value = value;
 
+					}
 				},
-				set: function ( value ) {
+				dashSize: {
+					enumerable: true,
+					get: function () {
 
-					this.uniforms.dashSize.value = value;
+						return this.uniforms.dashSize.value;
 
-				}
-			},
-			dashOffset: {
-				enumerable: true,
-				get: function () {
+					},
+					set: function ( value ) {
 
-					return this.uniforms.dashOffset.value;
+						this.uniforms.dashSize.value = value;
 
+					}
 				},
-				set: function ( value ) {
+				dashOffset: {
+					enumerable: true,
+					get: function () {
 
-					this.uniforms.dashOffset.value = value;
+						return this.uniforms.dashOffset.value;
 
-				}
-			},
-			gapSize: {
-				enumerable: true,
-				get: function () {
+					},
+					set: function ( value ) {
 
-					return this.uniforms.gapSize.value;
+						this.uniforms.dashOffset.value = value;
 
+					}
 				},
-				set: function ( value ) {
+				gapSize: {
+					enumerable: true,
+					get: function () {
 
-					this.uniforms.gapSize.value = value;
+						return this.uniforms.gapSize.value;
 
-				}
-			},
-			opacity: {
-				enumerable: true,
-				get: function () {
+					},
+					set: function ( value ) {
 
-					return this.uniforms.opacity.value;
+						this.uniforms.gapSize.value = value;
 
+					}
 				},
-				set: function ( value ) {
+				opacity: {
+					enumerable: true,
+					get: function () {
 
-					this.uniforms.opacity.value = value;
+						return this.uniforms.opacity.value;
 
-				}
-			},
-			resolution: {
-				enumerable: true,
-				get: function () {
+					},
+					set: function ( value ) {
 
-					return this.uniforms.resolution.value;
+						this.uniforms.opacity.value = value;
 
+					}
 				},
-				set: function ( value ) {
+				resolution: {
+					enumerable: true,
+					get: function () {
 
-					this.uniforms.resolution.value.copy( value );
+						return this.uniforms.resolution.value;
 
-				}
-			},
-			alphaToCoverage: {
-				enumerable: true,
-				get: function () {
+					},
+					set: function ( value ) {
 
-					return Boolean( 'ALPHA_TO_COVERAGE' in this.defines );
+						this.uniforms.resolution.value.copy( value );
 
+					}
 				},
-				set: function ( value ) {
+				alphaToCoverage: {
+					enumerable: true,
+					get: function () {
 
-					if ( Boolean( value ) !== Boolean( 'ALPHA_TO_COVERAGE' in this.defines ) ) {
+						return Boolean( 'ALPHA_TO_COVERAGE' in this.defines );
 
-						this.needsUpdate = true;
+					},
+					set: function ( value ) {
 
-					}
+						if ( Boolean( value ) !== Boolean( 'ALPHA_TO_COVERAGE' in this.defines ) ) {
 
-					if ( value ) {
+							this.needsUpdate = true;
 
-						this.defines.ALPHA_TO_COVERAGE = '';
-						this.extensions.derivatives = true;
+						}
 
-					} else {
+						if ( value ) {
 
-						delete this.defines.ALPHA_TO_COVERAGE;
-						this.extensions.derivatives = false;
+							this.defines.ALPHA_TO_COVERAGE = '';
+							this.extensions.derivatives = true;
 
-					}
+						} else {
+
+							delete this.defines.ALPHA_TO_COVERAGE;
+							this.extensions.derivatives = false;
 
+						}
+
+					}
 				}
-			}
-		} );
-		this.setValues( parameters );
+			} );
+			this.setValues( parameters );
 
-	};
+		}
+
+	}
 
-	LineMaterial.prototype = Object.create( THREE.ShaderMaterial.prototype );
-	LineMaterial.prototype.constructor = LineMaterial;
 	LineMaterial.prototype.isLineMaterial = true;
 
 	THREE.LineMaterial = LineMaterial;