Skip to content

math: move to es6 classes #19997

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 12 commits into from
Aug 14, 2020
Merged

math: move to es6 classes #19997

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
938a4cf
Vector2
yomotsu Aug 3, 2020
881697f
missing semi
yomotsu Aug 3, 2020
9d14b87
Vector3, Vector4
yomotsu Aug 3, 2020
979f99d
solve hoisting in Vector3
yomotsu Aug 3, 2020
b6e40eb
Matrix3, Matrix4
yomotsu Aug 3, 2020
22eca2d
Quaternion
yomotsu Aug 3, 2020
5eef1d2
Euler
yomotsu Aug 3, 2020
f549b79
fix static value of Euler
yomotsu Aug 3, 2020
8bcfccd
move internal use instances to the end of the file
yomotsu Aug 4, 2020
8000b03
Euler.DefaultOrder should be writable
yomotsu Aug 9, 2020
027a6b1
revert Euler.RotationOrders to be writable
yomotsu Aug 11, 2020
a53fcce
is*** should not be a getter function
yomotsu Aug 14, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 69 additions & 77 deletions src/math/Euler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,96 +6,88 @@ import { MathUtils } from './MathUtils.js';
const _matrix = new Matrix4();
const _quaternion = new Quaternion();

function Euler( x = 0, y = 0, z = 0, order = Euler.DefaultOrder ) {
class Euler {

this._x = x;
this._y = y;
this._z = z;
this._order = order;
constructor( x = 0, y = 0, z = 0, order = Euler.DefaultOrder ) {

}

Euler.RotationOrders = [ 'XYZ', 'YZX', 'ZXY', 'XZY', 'YXZ', 'ZYX' ];

Euler.DefaultOrder = 'XYZ';

Object.defineProperties( Euler.prototype, {
this._x = x;
this._y = y;
this._z = z;
this._order = order;

x: {
}

get: function () {
static get RotationOrders() {

return this._x;
return [ 'XYZ', 'YZX', 'ZXY', 'XZY', 'YXZ', 'ZYX' ];

},
}

set: function ( value ) {
static get DefaultOrder() {
Copy link
Owner

@mrdoob mrdoob Aug 8, 2020

Choose a reason for hiding this comment

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

We should do a setter for this one too.

Copy link
Contributor Author

@yomotsu yomotsu Aug 9, 2020 •
edited
Loading

Choose a reason for hiding this comment

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

@mrdoob

Thank you for reviewing.
Sorry, I got it wrong, I thought DefaultOrder is read-only too.
I will fix it.

Before that, I have a question: How do we declare Public class fields?

The readable-writable static value can be declare like

class MyClass {

  static xxx = 1;

  constructor( x ) {
    this.x = x
  }

}

However It seems Buble transpiler does not support the syntax, while Babel support that

Which option would be preferable in three.js (with Buble)?

class MyClass {

  constructor( x ) {
    this.x = x
  }

}

MyClass.xxx = 1;

or using Object.defineProperty

class MyClass {

  constructor( x ) {
    this.x = x
  }

}

Object.defineProperty(
  MyClass,
  'xxx',
  {
    value: 1,
    configurable: true,
    writable: true
  }
);

or

let _xxx = 1;

class MyClass {

  static get xxx = () => {
    return _xxx;
  }

  static set xxx = ( value ) => {
    _xxx = value;
  }

  constructor( x ) {
    this.x = x
  }

}

or other?
Thank you in advance🙇‍♂️

maybe @DefinitelyMaybe or @ianpurvis could give a suggestion?

Copy link
Contributor

@ianpurvis ianpurvis Aug 9, 2020

Choose a reason for hiding this comment

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

class MyClass {

  constructor( x ) {
    this.x = x
  }

}

MyClass.xxx = 1;

I think this style is nice for read/write 👍

Copy link
Contributor Author

@yomotsu yomotsu Aug 9, 2020

Choose a reason for hiding this comment

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

Thanks, I'll do that then!

Copy link
Contributor

@DefinitelyMaybe DefinitelyMaybe Aug 10, 2020

Choose a reason for hiding this comment

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

For future reference:
There are only three things in the current r120 dev build where Buble is being used.
Curves, Geometries and Materials.
When Buble is no longer needed, i.e. after converting everything to es6 classes, we should have a look back into this

class MyClass {

  static xxx = 1;

  constructor( x ) {
    this.x = x
  }

}

Copy link
Contributor

@DefinitelyMaybe DefinitelyMaybe Aug 10, 2020

Choose a reason for hiding this comment

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

nvm. I've got Buble's purpose backwards. Buble is our 'convert classes back to support IE' tool and output it as build/three.js.


this._x = value;
this._onChangeCallback();
return 'XYZ';

}

},
}

y: {
get x() {

get: function () {
return this._x;

return this._y;
}

},
set x( value ) {

set: function ( value ) {
this._x = value;
this._onChangeCallback();

this._y = value;
this._onChangeCallback();
}

}
get y() {

},
return this._y;

z: {
}

get: function () {
set y( value ) {

return this._z;
this._y = value;
this._onChangeCallback();

},
}

set: function ( value ) {
get z() {

this._z = value;
this._onChangeCallback();
return this._z;

}
}

},
set z( value ) {

order: {
this._z = value;
this._onChangeCallback();

get: function () {
}

return this._order;
get order() {

},
return this._order;

set: function ( value ) {
}

this._order = value;
this._onChangeCallback();
set order( value ) {

}
this._order = value;
this._onChangeCallback();

}

} );
get isEuler() {

Object.assign( Euler.prototype, {
return true;

isEuler: true,
}

set: function ( x, y, z, order ) {
set( x, y, z, order ) {

this._x = x;
this._y = y;
Expand All @@ -106,15 +98,15 @@ Object.assign( Euler.prototype, {

return this;

},
}

clone: function () {
clone() {

return new this.constructor( this._x, this._y, this._z, this._order );

},
}

copy: function ( euler ) {
copy( euler ) {

this._x = euler._x;
this._y = euler._y;
Expand All @@ -125,9 +117,9 @@ Object.assign( Euler.prototype, {

return this;

},
}

setFromRotationMatrix: function ( m, order, update ) {
setFromRotationMatrix( m, order, update ) {

const clamp = MathUtils.clamp;

Expand Down Expand Up @@ -262,39 +254,39 @@ Object.assign( Euler.prototype, {

return this;

},
}

setFromQuaternion: function ( q, order, update ) {
setFromQuaternion( q, order, update ) {

_matrix.makeRotationFromQuaternion( q );

return this.setFromRotationMatrix( _matrix, order, update );

},
}

setFromVector3: function ( v, order ) {
setFromVector3( v, order ) {

return this.set( v.x, v.y, v.z, order || this._order );

},
}

reorder: function ( newOrder ) {
reorder( newOrder ) {

// WARNING: this discards revolution information -bhouston

_quaternion.setFromEuler( this );

return this.setFromQuaternion( _quaternion, newOrder );

},
}

equals: function ( euler ) {
equals( euler ) {

return ( euler._x === this._x ) && ( euler._y === this._y ) && ( euler._z === this._z ) && ( euler._order === this._order );

},
}

fromArray: function ( array ) {
fromArray( array ) {

this._x = array[ 0 ];
this._y = array[ 1 ];
Expand All @@ -305,9 +297,9 @@ Object.assign( Euler.prototype, {

return this;

},
}

toArray: function ( array, offset ) {
toArray( array, offset ) {

if ( array === undefined ) array = [];
if ( offset === undefined ) offset = 0;
Expand All @@ -319,9 +311,9 @@ Object.assign( Euler.prototype, {

return array;

},
}

toVector3: function ( optionalResult ) {
toVector3( optionalResult ) {

if ( optionalResult ) {

Expand All @@ -333,19 +325,19 @@ Object.assign( Euler.prototype, {

}

},
}

_onChange: function ( callback ) {
_onChange( callback ) {

this._onChangeCallback = callback;

return this;

},
}

_onChangeCallback: function () {}
_onChangeCallback() {}

} );
}


export { Euler };
Loading