Skip to content

Commit 7a8a35e

Browse files
Mugen87Mugen87
authored
Examples: Convert lines to ES6. (#21599)
1 parent 807dced commit 7a8a35e

14 files changed

+882
-862
lines changed

‎examples/js/lines/Line2.js‎

Lines changed: 10 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,19 @@
11
( function () {
22

3-
var Line2 = function ( geometry, material ) {
3+
class Line2 extends THREE.LineSegments2 {
44

5-
if ( geometry === undefined ) geometry = new THREE.LineGeometry();
6-
if ( material === undefined ) material = new THREE.LineMaterial( {
5+
constructor( geometry = new THREE.LineGeometry(), material = new THREE.LineMaterial( {
76
color: Math.random() * 0xffffff
8-
} );
9-
THREE.LineSegments2.call( this, geometry, material );
10-
this.type = 'Line2';
7+
} ) ) {
118

12-
};
9+
super( geometry, material );
10+
this.type = 'Line2';
1311

14-
Line2.prototype = Object.assign( Object.create( THREE.LineSegments2.prototype ), {
15-
constructor: Line2,
16-
isLine2: true
17-
} );
12+
}
13+
14+
}
15+
16+
Line2.prototype.isLine2 = true;
1817

1918
THREE.Line2 = Line2;
2019

‎examples/js/lines/LineGeometry.js‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,15 @@
11
( function () {
22

3-
var LineGeometry = function () {
3+
class LineGeometry extends THREE.LineSegmentsGeometry {
44

5-
THREE.LineSegmentsGeometry.call( this );
6-
this.type = 'LineGeometry';
5+
constructor() {
76

8-
};
7+
super();
8+
this.type = 'LineGeometry';
99

10-
LineGeometry.prototype = Object.assign( Object.create( THREE.LineSegmentsGeometry.prototype ), {
11-
constructor: LineGeometry,
12-
isLineGeometry: true,
13-
setPositions: function ( array ) {
10+
}
11+
12+
setPositions( array ) {
1413

1514
// converts [ x1, y1, z1, x2, y2, z2, ... ] to pairs format
1615
var length = array.length - 3;
@@ -27,11 +26,12 @@
2726

2827
}
2928

30-
THREE.LineSegmentsGeometry.prototype.setPositions.call( this, points );
29+
super.setPositions( points );
3130
return this;
3231

33-
},
34-
setColors: function ( array ) {
32+
}
33+
34+
setColors( array ) {
3535

3636
// converts [ r1, g1, b1, r2, g2, b2, ... ] to pairs format
3737
var length = array.length - 3;
@@ -48,11 +48,12 @@
4848

4949
}
5050

51-
THREE.LineSegmentsGeometry.prototype.setColors.call( this, colors );
51+
super.setColors( colors );
5252
return this;
5353

54-
},
55-
fromLine: function ( line ) {
54+
}
55+
56+
fromLine( line ) {
5657

5758
var geometry = line.geometry;
5859

@@ -70,14 +71,18 @@
7071

7172
return this;
7273

73-
},
74-
copy: function ( ) {
74+
}
75+
76+
copy( ) {
7577

7678
// todo
7779
return this;
7880

7981
}
80-
} );
82+
83+
}
84+
85+
LineGeometry.prototype.isLineGeometry = true;
8186

8287
THREE.LineGeometry = LineGeometry;
8388

‎examples/js/lines/LineMaterial.js‎

Lines changed: 99 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -264,158 +264,160 @@
264264
`
265265
};
266266

267-
var LineMaterial = function ( parameters ) {
267+
class LineMaterial extends THREE.ShaderMaterial {
268268

269-
THREE.ShaderMaterial.call( this, {
270-
type: 'LineMaterial',
271-
uniforms: THREE.UniformsUtils.clone( THREE.ShaderLib[ 'line' ].uniforms ),
272-
vertexShader: THREE.ShaderLib[ 'line' ].vertexShader,
273-
fragmentShader: THREE.ShaderLib[ 'line' ].fragmentShader,
274-
clipping: true // required for clipping support
269+
constructor( parameters ) {
275270

276-
} );
277-
this.dashed = false;
278-
Object.defineProperties( this, {
279-
color: {
280-
enumerable: true,
281-
get: function () {
271+
super( {
272+
type: 'LineMaterial',
273+
uniforms: THREE.UniformsUtils.clone( THREE.ShaderLib[ 'line' ].uniforms ),
274+
vertexShader: THREE.ShaderLib[ 'line' ].vertexShader,
275+
fragmentShader: THREE.ShaderLib[ 'line' ].fragmentShader,
276+
clipping: true // required for clipping support
282277

283-
return this.uniforms.diffuse.value;
278+
} );
279+
this.dashed = false;
280+
Object.defineProperties( this, {
281+
color: {
282+
enumerable: true,
283+
get: function () {
284284

285-
},
286-
set: function ( value ) {
287-
288-
this.uniforms.diffuse.value = value;
285+
return this.uniforms.diffuse.value;
289286

290-
}
291-
},
292-
linewidth: {
293-
enumerable: true,
294-
get: function () {
287+
},
288+
set: function ( value ) {
295289

296-
return this.uniforms.linewidth.value;
290+
this.uniforms.diffuse.value = value;
297291

292+
}
298293
},
299-
set: function ( value ) {
294+
linewidth: {
295+
enumerable: true,
296+
get: function () {
300297

301-
this.uniforms.linewidth.value = value;
298+
return this.uniforms.linewidth.value;
302299

303-
}
304-
},
305-
dashScale: {
306-
enumerable: true,
307-
get: function () {
300+
},
301+
set: function ( value ) {
308302

309-
return this.uniforms.dashScale.value;
303+
this.uniforms.linewidth.value = value;
310304

305+
}
311306
},
312-
set: function ( value ) {
307+
dashScale: {
308+
enumerable: true,
309+
get: function () {
313310

314-
this.uniforms.dashScale.value = value;
311+
return this.uniforms.dashScale.value;
315312

316-
}
317-
},
318-
dashSize: {
319-
enumerable: true,
320-
get: function () {
313+
},
314+
set: function ( value ) {
321315

322-
return this.uniforms.dashSize.value;
316+
this.uniforms.dashScale.value = value;
323317

318+
}
324319
},
325-
set: function ( value ) {
320+
dashSize: {
321+
enumerable: true,
322+
get: function () {
326323

327-
this.uniforms.dashSize.value = value;
324+
return this.uniforms.dashSize.value;
328325

329-
}
330-
},
331-
dashOffset: {
332-
enumerable: true,
333-
get: function () {
326+
},
327+
set: function ( value ) {
334328

335-
return this.uniforms.dashOffset.value;
329+
this.uniforms.dashSize.value = value;
336330

331+
}
337332
},
338-
set: function ( value ) {
333+
dashOffset: {
334+
enumerable: true,
335+
get: function () {
339336

340-
this.uniforms.dashOffset.value = value;
337+
return this.uniforms.dashOffset.value;
341338

342-
}
343-
},
344-
gapSize: {
345-
enumerable: true,
346-
get: function () {
339+
},
340+
set: function ( value ) {
347341

348-
return this.uniforms.gapSize.value;
342+
this.uniforms.dashOffset.value = value;
349343

344+
}
350345
},
351-
set: function ( value ) {
346+
gapSize: {
347+
enumerable: true,
348+
get: function () {
352349

353-
this.uniforms.gapSize.value = value;
350+
return this.uniforms.gapSize.value;
354351

355-
}
356-
},
357-
opacity: {
358-
enumerable: true,
359-
get: function () {
352+
},
353+
set: function ( value ) {
360354

361-
return this.uniforms.opacity.value;
355+
this.uniforms.gapSize.value = value;
362356

357+
}
363358
},
364-
set: function ( value ) {
359+
opacity: {
360+
enumerable: true,
361+
get: function () {
365362

366-
this.uniforms.opacity.value = value;
363+
return this.uniforms.opacity.value;
367364

368-
}
369-
},
370-
resolution: {
371-
enumerable: true,
372-
get: function () {
365+
},
366+
set: function ( value ) {
373367

374-
return this.uniforms.resolution.value;
368+
this.uniforms.opacity.value = value;
375369

370+
}
376371
},
377-
set: function ( value ) {
372+
resolution: {
373+
enumerable: true,
374+
get: function () {
378375

379-
this.uniforms.resolution.value.copy( value );
376+
return this.uniforms.resolution.value;
380377

381-
}
382-
},
383-
alphaToCoverage: {
384-
enumerable: true,
385-
get: function () {
378+
},
379+
set: function ( value ) {
386380

387-
return Boolean( 'ALPHA_TO_COVERAGE' in this.defines );
381+
this.uniforms.resolution.value.copy( value );
388382

383+
}
389384
},
390-
set: function ( value ) {
385+
alphaToCoverage: {
386+
enumerable: true,
387+
get: function () {
391388

392-
if ( Boolean( value ) !== Boolean( 'ALPHA_TO_COVERAGE' in this.defines ) ) {
389+
return Boolean( 'ALPHA_TO_COVERAGE' in this.defines );
393390

394-
this.needsUpdate = true;
391+
},
392+
set: function ( value ) {
395393

396-
}
394+
if ( Boolean( value ) !== Boolean( 'ALPHA_TO_COVERAGE' in this.defines ) ) {
397395

398-
if ( value ) {
396+
this.needsUpdate = true;
399397

400-
this.defines.ALPHA_TO_COVERAGE = '';
401-
this.extensions.derivatives = true;
398+
}
402399

403-
} else {
400+
if ( value ) {
404401

405-
delete this.defines.ALPHA_TO_COVERAGE;
406-
this.extensions.derivatives = false;
402+
this.defines.ALPHA_TO_COVERAGE = '';
403+
this.extensions.derivatives = true;
407404

408-
}
405+
} else {
406+
407+
delete this.defines.ALPHA_TO_COVERAGE;
408+
this.extensions.derivatives = false;
409409

410+
}
411+
412+
}
410413
}
411-
}
412-
} );
413-
this.setValues( parameters );
414+
} );
415+
this.setValues( parameters );
414416

415-
};
417+
}
418+
419+
}
416420

417-
LineMaterial.prototype = Object.create( THREE.ShaderMaterial.prototype );
418-
LineMaterial.prototype.constructor = LineMaterial;
419421
LineMaterial.prototype.isLineMaterial = true;
420422

421423
THREE.LineMaterial = LineMaterial;

0 commit comments

Comments
 (0)