Skip to content

Commit d1a5133

Browse files
Mugen87Mugen87
authored
Examples: Convert loaders to ES6 Part I. (#21612)
1 parent 5f84432 commit d1a5133

40 files changed

+8209
-8221
lines changed

‎examples/js/loaders/3MFLoader.js‎

Lines changed: 297 additions & 295 deletions
Large diffs are not rendered by default.

‎examples/js/loaders/AMFLoader.js‎

Lines changed: 81 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* More information about the AMF format: http://amf.wikispaces.com
88
*
99
* Usage:
10-
* var loader = new AMFLoader();
10+
* const loader = new AMFLoader();
1111
* loader.load('/path/to/project.amf', function(objecttree) {
1212
* scene.add(objecttree);
1313
* });
@@ -18,18 +18,18 @@
1818
*
1919
*/
2020

21-
var AMFLoader = function ( manager ) {
21+
class AMFLoader extends THREE.Loader {
2222

23-
THREE.Loader.call( this, manager );
23+
constructor( manager ) {
2424

25-
};
25+
super( manager );
2626

27-
AMFLoader.prototype = Object.assign( Object.create( THREE.Loader.prototype ), {
28-
constructor: AMFLoader,
29-
load: function ( url, onLoad, onProgress, onError ) {
27+
}
28+
29+
load( url, onLoad, onProgress, onError ) {
3030

31-
var scope = this;
32-
var loader = new THREE.FileLoader( scope.manager );
31+
const scope = this;
32+
const loader = new THREE.FileLoader( scope.manager );
3333
loader.setPath( scope.path );
3434
loader.setResponseType( 'arraybuffer' );
3535
loader.setRequestHeader( scope.requestHeader );
@@ -58,18 +58,19 @@
5858

5959
}, onProgress, onError );
6060

61-
},
62-
parse: function ( data ) {
61+
}
62+
63+
parse( data ) {
6364

6465
function loadDocument( data ) {
6566

66-
var view = new DataView( data );
67-
var magic = String.fromCharCode( view.getUint8( 0 ), view.getUint8( 1 ) );
67+
let view = new DataView( data );
68+
const magic = String.fromCharCode( view.getUint8( 0 ), view.getUint8( 1 ) );
6869

6970
if ( magic === 'PK' ) {
7071

71-
var zip = null;
72-
var file = null;
72+
let zip = null;
73+
let file = null;
7374
console.log( 'THREE.AMFLoader: Loading Zip' );
7475

7576
try {
@@ -87,7 +88,7 @@
8788

8889
}
8990

90-
for ( var file in zip ) {
91+
for ( file in zip ) {
9192

9293
if ( file.toLowerCase().substr( - 4 ) === '.amf' ) {
9394

@@ -102,8 +103,8 @@
102103

103104
}
104105

105-
var fileText = THREE.LoaderUtils.decodeText( view );
106-
var xmlData = new DOMParser().parseFromString( fileText, 'application/xml' );
106+
const fileText = THREE.LoaderUtils.decodeText( view );
107+
const xmlData = new DOMParser().parseFromString( fileText, 'application/xml' );
107108

108109
if ( xmlData.documentElement.nodeName.toLowerCase() !== 'amf' ) {
109110

@@ -118,16 +119,16 @@
118119

119120
function loadDocumentScale( node ) {
120121

121-
var scale = 1.0;
122-
var unit = 'millimeter';
122+
let scale = 1.0;
123+
let unit = 'millimeter';
123124

124125
if ( node.documentElement.attributes.unit !== undefined ) {
125126

126127
unit = node.documentElement.attributes.unit.value.toLowerCase();
127128

128129
}
129130

130-
var scaleUnits = {
131+
const scaleUnits = {
131132
millimeter: 1.0,
132133
inch: 25.4,
133134
feet: 304.8,
@@ -148,19 +149,19 @@
148149

149150
function loadMaterials( node ) {
150151

151-
var matName = 'AMF Material';
152-
var matId = node.attributes.id.textContent;
153-
var color = {
152+
let matName = 'AMF Material';
153+
const matId = node.attributes.id.textContent;
154+
let color = {
154155
r: 1.0,
155156
g: 1.0,
156157
b: 1.0,
157158
a: 1.0
158159
};
159-
var loadedMaterial = null;
160+
let loadedMaterial = null;
160161

161-
for ( var i = 0; i < node.childNodes.length; i ++ ) {
162+
for ( let i = 0; i < node.childNodes.length; i ++ ) {
162163

163-
var matChildEl = node.childNodes[ i ];
164+
const matChildEl = node.childNodes[ i ];
164165

165166
if ( matChildEl.nodeName === 'metadata' && matChildEl.attributes.type !== undefined ) {
166167

@@ -200,16 +201,16 @@
200201

201202
function loadColor( node ) {
202203

203-
var color = {
204+
const color = {
204205
r: 1.0,
205206
g: 1.0,
206207
b: 1.0,
207208
a: 1.0
208209
};
209210

210-
for ( var i = 0; i < node.childNodes.length; i ++ ) {
211+
for ( let i = 0; i < node.childNodes.length; i ++ ) {
211212

212-
var matColor = node.childNodes[ i ];
213+
const matColor = node.childNodes[ i ];
213214

214215
if ( matColor.nodeName === 'r' ) {
215216

@@ -237,12 +238,12 @@
237238

238239
function loadMeshVolume( node ) {
239240

240-
var volume = {
241+
const volume = {
241242
name: '',
242243
triangles: [],
243244
materialid: null
244245
};
245-
var currVolumeNode = node.firstElementChild;
246+
let currVolumeNode = node.firstElementChild;
246247

247248
if ( node.attributes.materialid !== undefined ) {
248249

@@ -266,9 +267,9 @@
266267

267268
} else if ( currVolumeNode.nodeName === 'triangle' ) {
268269

269-
var v1 = currVolumeNode.getElementsByTagName( 'v1' )[ 0 ].textContent;
270-
var v2 = currVolumeNode.getElementsByTagName( 'v2' )[ 0 ].textContent;
271-
var v3 = currVolumeNode.getElementsByTagName( 'v3' )[ 0 ].textContent;
270+
const v1 = currVolumeNode.getElementsByTagName( 'v1' )[ 0 ].textContent;
271+
const v2 = currVolumeNode.getElementsByTagName( 'v2' )[ 0 ].textContent;
272+
const v3 = currVolumeNode.getElementsByTagName( 'v3' )[ 0 ].textContent;
272273
volume.triangles.push( v1, v2, v3 );
273274

274275
}
@@ -283,30 +284,30 @@
283284

284285
function loadMeshVertices( node ) {
285286

286-
var vertArray = [];
287-
var normalArray = [];
288-
var currVerticesNode = node.firstElementChild;
287+
const vertArray = [];
288+
const normalArray = [];
289+
let currVerticesNode = node.firstElementChild;
289290

290291
while ( currVerticesNode ) {
291292

292293
if ( currVerticesNode.nodeName === 'vertex' ) {
293294

294-
var vNode = currVerticesNode.firstElementChild;
295+
let vNode = currVerticesNode.firstElementChild;
295296

296297
while ( vNode ) {
297298

298299
if ( vNode.nodeName === 'coordinates' ) {
299300

300-
var x = vNode.getElementsByTagName( 'x' )[ 0 ].textContent;
301-
var y = vNode.getElementsByTagName( 'y' )[ 0 ].textContent;
302-
var z = vNode.getElementsByTagName( 'z' )[ 0 ].textContent;
301+
const x = vNode.getElementsByTagName( 'x' )[ 0 ].textContent;
302+
const y = vNode.getElementsByTagName( 'y' )[ 0 ].textContent;
303+
const z = vNode.getElementsByTagName( 'z' )[ 0 ].textContent;
303304
vertArray.push( x, y, z );
304305

305306
} else if ( vNode.nodeName === 'normal' ) {
306307

307-
var nx = vNode.getElementsByTagName( 'nx' )[ 0 ].textContent;
308-
var ny = vNode.getElementsByTagName( 'ny' )[ 0 ].textContent;
309-
var nz = vNode.getElementsByTagName( 'nz' )[ 0 ].textContent;
308+
const nx = vNode.getElementsByTagName( 'nx' )[ 0 ].textContent;
309+
const ny = vNode.getElementsByTagName( 'ny' )[ 0 ].textContent;
310+
const nz = vNode.getElementsByTagName( 'nz' )[ 0 ].textContent;
310311
normalArray.push( nx, ny, nz );
311312

312313
}
@@ -330,13 +331,13 @@
330331

331332
function loadObject( node ) {
332333

333-
var objId = node.attributes.id.textContent;
334-
var loadedObject = {
334+
const objId = node.attributes.id.textContent;
335+
const loadedObject = {
335336
name: 'amfobject',
336337
meshes: []
337338
};
338-
var currColor = null;
339-
var currObjNode = node.firstElementChild;
339+
let currColor = null;
340+
let currObjNode = node.firstElementChild;
340341

341342
while ( currObjNode ) {
342343

@@ -358,8 +359,8 @@
358359

359360
} else if ( currObjNode.nodeName === 'mesh' ) {
360361

361-
var currMeshNode = currObjNode.firstElementChild;
362-
var mesh = {
362+
let currMeshNode = currObjNode.firstElementChild;
363+
const mesh = {
363364
vertices: [],
364365
normals: [],
365366
volumes: [],
@@ -370,7 +371,7 @@
370371

371372
if ( currMeshNode.nodeName === 'vertices' ) {
372373

373-
var loadedVertices = loadMeshVertices( currMeshNode );
374+
const loadedVertices = loadMeshVertices( currMeshNode );
374375
mesh.normals = mesh.normals.concat( loadedVertices.normals );
375376
mesh.vertices = mesh.vertices.concat( loadedVertices.vertices );
376377

@@ -399,18 +400,18 @@
399400

400401
}
401402

402-
var xmlData = loadDocument( data );
403-
var amfName = '';
404-
var amfAuthor = '';
405-
var amfScale = loadDocumentScale( xmlData );
406-
var amfMaterials = {};
407-
var amfObjects = {};
408-
var childNodes = xmlData.documentElement.childNodes;
409-
var i, j;
403+
const xmlData = loadDocument( data );
404+
let amfName = '';
405+
let amfAuthor = '';
406+
const amfScale = loadDocumentScale( xmlData );
407+
const amfMaterials = {};
408+
const amfObjects = {};
409+
const childNodes = xmlData.documentElement.childNodes;
410+
let i, j;
410411

411412
for ( i = 0; i < childNodes.length; i ++ ) {
412413

413-
var child = childNodes[ i ];
414+
const child = childNodes[ i ];
414415

415416
if ( child.nodeName === 'metadata' ) {
416417

@@ -430,40 +431,40 @@
430431

431432
} else if ( child.nodeName === 'material' ) {
432433

433-
var loadedMaterial = loadMaterials( child );
434+
const loadedMaterial = loadMaterials( child );
434435
amfMaterials[ loadedMaterial.id ] = loadedMaterial.material;
435436

436437
} else if ( child.nodeName === 'object' ) {
437438

438-
var loadedObject = loadObject( child );
439+
const loadedObject = loadObject( child );
439440
amfObjects[ loadedObject.id ] = loadedObject.obj;
440441

441442
}
442443

443444
}
444445

445-
var sceneObject = new THREE.Group();
446-
var defaultMaterial = new THREE.MeshPhongMaterial( {
446+
const sceneObject = new THREE.Group();
447+
const defaultMaterial = new THREE.MeshPhongMaterial( {
447448
color: 0xaaaaff,
448449
flatShading: true
449450
} );
450451
sceneObject.name = amfName;
451452
sceneObject.userData.author = amfAuthor;
452453
sceneObject.userData.loader = 'AMF';
453454

454-
for ( var id in amfObjects ) {
455+
for ( const id in amfObjects ) {
455456

456-
var part = amfObjects[ id ];
457-
var meshes = part.meshes;
458-
var newObject = new THREE.Group();
457+
const part = amfObjects[ id ];
458+
const meshes = part.meshes;
459+
const newObject = new THREE.Group();
459460
newObject.name = part.name || '';
460461

461462
for ( i = 0; i < meshes.length; i ++ ) {
462463

463-
var objDefaultMaterial = defaultMaterial;
464-
var mesh = meshes[ i ];
465-
var vertices = new THREE.Float32BufferAttribute( mesh.vertices, 3 );
466-
var normals = null;
464+
let objDefaultMaterial = defaultMaterial;
465+
const mesh = meshes[ i ];
466+
const vertices = new THREE.Float32BufferAttribute( mesh.vertices, 3 );
467+
let normals = null;
467468

468469
if ( mesh.normals.length ) {
469470

@@ -473,7 +474,7 @@
473474

474475
if ( mesh.color ) {
475476

476-
var color = mesh.color;
477+
const color = mesh.color;
477478
objDefaultMaterial = defaultMaterial.clone();
478479
objDefaultMaterial.color = new THREE.Color( color.r, color.g, color.b );
479480

@@ -486,13 +487,13 @@
486487

487488
}
488489

489-
var volumes = mesh.volumes;
490+
const volumes = mesh.volumes;
490491

491492
for ( j = 0; j < volumes.length; j ++ ) {
492493

493-
var volume = volumes[ j ];
494-
var newGeometry = new THREE.BufferGeometry();
495-
var material = objDefaultMaterial;
494+
const volume = volumes[ j ];
495+
const newGeometry = new THREE.BufferGeometry();
496+
let material = objDefaultMaterial;
496497
newGeometry.setIndex( volume.triangles );
497498
newGeometry.setAttribute( 'position', vertices.clone() );
498499

@@ -522,7 +523,8 @@
522523
return sceneObject;
523524

524525
}
525-
} );
526+
527+
}
526528

527529
THREE.AMFLoader = AMFLoader;
528530

0 commit comments

Comments
 (0)