Skip to content

Commit

Permalink
some objects to es6 classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@DefinitelyMaybe
DefinitelyMaybe committed Feb 12, 2021
1 parent 8000053 commit 501053e
Show file tree
Hide file tree
Showing 5 changed files with 117 additions and 128 deletions.
18 changes: 7 additions & 11 deletions src/objects/Group.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,16 @@
import { Object3D } from '../core/Object3D.js';

function Group() {
class Group extends Object3D {

Object3D.call( this );
constructor() {

this.type = 'Group';
super();
this.type = 'Group';
Object.defineProperty( this, 'isGroup', { value: true } );

}

Group.prototype = Object.assign( Object.create( Object3D.prototype ), {

constructor: Group,
}

isGroup: true

} );
}


export { Group };
69 changes: 34 additions & 35 deletions src/objects/LOD.js
View file
Original file line number Diff line number Diff line change
@@ -1,37 +1,36 @@
import { Vector3 } from '../math/Vector3.js';
import { Object3D } from '../core/Object3D.js';

const _v1 = new Vector3();
const _v2 = new Vector3();
const _v1 = /*@__PURE__*/ new Vector3();
const _v2 = /*@__PURE__*/ new Vector3();

function LOD() {
class LOD extends Object3D {

Object3D.call( this );
constructor() {

this._currentLevel = 0;
super();

this.type = 'LOD';
this._currentLevel = 0;

Object.defineProperties( this, {
levels: {
enumerable: true,
value: []
}
} );

this.autoUpdate = true;

}
this.type = 'LOD';

LOD.prototype = Object.assign( Object.create( Object3D.prototype ), {
Object.defineProperties( this, {
levels: {
enumerable: true,
value: []
},
isLOD: {
value: true,
}
} );

constructor: LOD,
this.autoUpdate = true;

isLOD: true,
}

copy: function ( source ) {
copy( source ) {

Object3D.prototype.copy.call( this, source, false );
super.copy( source, false );

const levels = source.levels;

Expand All @@ -47,9 +46,9 @@ LOD.prototype = Object.assign( Object.create( Object3D.prototype ), {

return this;

},
}

addLevel: function ( object, distance = 0 ) {
addLevel( object, distance = 0 ) {

distance = Math.abs( distance );

Expand All @@ -73,15 +72,15 @@ LOD.prototype = Object.assign( Object.create( Object3D.prototype ), {

return this;

},
}

getCurrentLevel: function () {
getCurrentLevel() {

return this._currentLevel;

},
}

getObjectForDistance: function ( distance ) {
getObjectForDistance( distance ) {

const levels = this.levels;

Expand All @@ -105,9 +104,9 @@ LOD.prototype = Object.assign( Object.create( Object3D.prototype ), {

return null;

},
}

raycast: function ( raycaster, intersects ) {
raycast( raycaster, intersects ) {

const levels = this.levels;

Expand All @@ -121,9 +120,9 @@ LOD.prototype = Object.assign( Object.create( Object3D.prototype ), {

}

},
}

update: function ( camera ) {
update( camera ) {

const levels = this.levels;

Expand Down Expand Up @@ -163,11 +162,11 @@ LOD.prototype = Object.assign( Object.create( Object3D.prototype ), {

}

},
}

toJSON: function ( meta ) {
toJSON( meta ) {

const data = Object3D.prototype.toJSON.call( this, meta );
const data = super.toJSON( meta );

if ( this.autoUpdate === false ) data.object.autoUpdate = false;

Expand All @@ -190,7 +189,7 @@ LOD.prototype = Object.assign( Object.create( Object3D.prototype ), {

}

} );
}


export { LOD };
16 changes: 7 additions & 9 deletions src/objects/LineLoop.js
View file
Original file line number Diff line number Diff line change
@@ -1,20 +1,18 @@
import { Line } from './Line.js';

function LineLoop( geometry, material ) {
class LineLoop extends Line {

Line.call( this, geometry, material );
constructor( geometry, material ) {

this.type = 'LineLoop';
super( geometry, material );
this.type = 'LineLoop';
Object.defineProperty( this, 'isLineLoop', { value: true } );

}

LineLoop.prototype = Object.assign( Object.create( Line.prototype ), {
}

constructor: LineLoop,

isLineLoop: true,

} );
}


export { LineLoop };
63 changes: 31 additions & 32 deletions src/objects/Skeleton.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,29 @@ import { Bone } from './Bone.js';
import { Matrix4 } from '../math/Matrix4.js';
import { MathUtils } from '../math/MathUtils.js';

const _offsetMatrix = new Matrix4();
const _identityMatrix = new Matrix4();
const _offsetMatrix = /*@__PURE__*/ new Matrix4();
const _identityMatrix = /*@__PURE__*/ new Matrix4();

function Skeleton( bones = [], boneInverses = [] ) {
class Skeleton {

this.uuid = MathUtils.generateUUID();
constructor( bones = [], boneInverses = [] ) {

this.bones = bones.slice( 0 );
this.boneInverses = boneInverses;
this.boneMatrices = null;
this.uuid = MathUtils.generateUUID();

this.boneTexture = null;
this.boneTextureSize = 0;
this.bones = bones.slice( 0 );
this.boneInverses = boneInverses;
this.boneMatrices = null;

this.frame = - 1;
this.boneTexture = null;
this.boneTextureSize = 0;

this.init();
this.frame = - 1;

}
this.init();

Object.assign( Skeleton.prototype, {
}

init: function () {
init() {

const bones = this.bones;
const boneInverses = this.boneInverses;
Expand Down Expand Up @@ -57,9 +57,9 @@ Object.assign( Skeleton.prototype, {

}

},
}

calculateInverses: function () {
calculateInverses() {

this.boneInverses.length = 0;

Expand All @@ -77,9 +77,9 @@ Object.assign( Skeleton.prototype, {

}

},
}

pose: function () {
pose() {

// recover the bind-time world matrices

Expand Down Expand Up @@ -120,9 +120,9 @@ Object.assign( Skeleton.prototype, {

}

},
}

update: function () {
update() {

const bones = this.bones;
const boneInverses = this.boneInverses;
Expand All @@ -148,15 +148,15 @@ Object.assign( Skeleton.prototype, {

}

},
}

clone: function () {
clone() {

return new Skeleton( this.bones, this.boneInverses );

},
}

getBoneByName: function ( name ) {
getBoneByName( name ) {

for ( let i = 0, il = this.bones.length; i < il; i ++ ) {

Expand All @@ -172,9 +172,9 @@ Object.assign( Skeleton.prototype, {

return undefined;

},
}

dispose: function ( ) {
dispose( ) {

if ( this.boneTexture !== null ) {

Expand All @@ -184,9 +184,9 @@ Object.assign( Skeleton.prototype, {

}

},
}

fromJSON: function ( json, bones ) {
fromJSON( json, bones ) {

this.uuid = json.uuid;

Expand All @@ -211,9 +211,9 @@ Object.assign( Skeleton.prototype, {

return this;

},
}

toJSON: function () {
toJSON() {

const data = {
metadata: {
Expand Down Expand Up @@ -244,7 +244,6 @@ Object.assign( Skeleton.prototype, {

}

} );

}

export { Skeleton };
Loading

10 comments on commit 501053e

@FlorentMasson
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is breaking my inheritance:

function Player() {
    THREE.Group.call(this);
}

Is there a way to make it work without ES6 syntax?

@mrdoob
Copy link
Owner

@mrdoob mrdoob commented on 501053e Apr 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes#sub_classing_with_extends

class Player extends THREE.Group {
    constructor() {
        super();
    }
}

@Mugen87
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mrdoob I've added a note in the migration guide that Object3D as well as other basic classes or now written in ES6 class syntax.

https://github.com/mrdoob/three.js/wiki/Migration-Guide#127--128

@FlorentMasson
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mrdoob I've added a note in the migration guide that Object3D as well as other basic classes or now written in ES6 class syntax.

https://github.com/mrdoob/three.js/wiki/Migration-Guide#127--128

this is for 126 => 127 I think

@Mugen87
Copy link
Collaborator

@Mugen87 Mugen87 commented on 501053e Apr 15, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, THREE.Group was already converted in r127. I guess more devs will complain in context of Object3D and ShaderMaterial.

However, it does not make sense to list all converted classes in the migration guide. The upcoming release will contain the biggest (and final) step towards ES6 classes.

@mrdoob
Copy link
Owner

@mrdoob mrdoob commented on 501053e Apr 15, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@Mugen87 @marcofugaro Maybe we could do a new build three.legacy.js that transpiles to ES5?

@Mugen87
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@FlorentMasson How do you structure your projects? Are you using the npm package of three.js and already use ES6 import syntax with a build? Or do you copy library files into your project and import them via the script tag?

@Mugen87
Copy link
Collaborator

@Mugen87 Mugen87 commented on 501053e Apr 15, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@mrdoob It would be indeed convenient for users to have three.legacy.js. However they could requests legacy files for examples/js, too. And it won't help users wit a npm/ES6 import workflow since these files would still be ES6.

Right now, I would vote to leave the ES5 conversion to users.

@marcofugaro
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I agree with @Mugen87, apart from a couple of users, ES6 is pretty widespread nowadays and will continue to be.

I guess we could write a guide with this comment's content to point the users to.

@FlorentMasson
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@FlorentMasson How do you structure your projects? Are you using the npm package of three.js and already use ES6 import syntax with a build? Or do you copy library files into your project and import them via the script tag?

Yes, I use three.js through npm.
I do not use ES6 modules but I use ES6 syntax when appropriate (hence @mrdoob extract is actually not problematic).
My project is a set of javascript files (own source and third-party code) included via script tags (e.g. pointing node_modules/... when appropriate)
I remember trying ES6 import syntax for three.js but you can't import an ES6 module into a non-ES6 module.

For release, I have a script that concatenates all javascript files, add a closure and processes that through UglifyES for minification and obfuscation, and with option ecma:5 for best compatibility (people sometimes use older browsers/version especially on mobile).

That's why using ES6 syntax is ok for us, but not being forced to use ES6 modules (until someone knows about a way to import ES6 modules outside a module)

Please sign in to comment.