This is the 9th day of my participation in the November Gwen Challenge. See details: The Last Gwen Challenge 2021.

Three. js is a 3D graphics library wrapped around WebGL. Using this library, we can make small wechat jump games, big mobA games like King of Glory and VR games. The latest version of three.js uses the class syntax, embracing the idea that everything is an object and carrying this idea forward in the three.js library.

Object3D is the parent class of all 3D objects. Is Object3D.

Constructor analysis

class Object3D extends EventDispatcher {}
Copy the code
  1. That is, all 3D objects are subclasses of event listeners. Implement is more appropriate if JS supports interfaces well. This gives all 3D in all three.js the ability to bind events and trigger events.
  2. The source code for EventDispatcher is relatively conventional. Almost any library of a certain size will have this mode implemented. Readers can try to write EventDispatcher by themselves.
  3. To recap, EventDispatcher maintains a listeners collection. Addeventlisteners can add a listener handler element to the Listeners array. DispatchEvent iterates over listenRS to execute each listener in order.

Object3D source address is here

let _object3DId = 0;
class Object3D extends EventDispatcher {
	constructor() {
		super(a);Object.defineProperty( this.'id', { value: _object3DId ++ } );
		this.uuid = MathUtils.generateUUID();
		this.name = ' ';
		this.type = 'Object3D';

		this.parent = null;
		this.children = []; }}Copy the code
  1. The first line of the code defines a variable that counts any 3D object that has been new once, _object3DId +1,
  2. Because all 3D objects are direct or indirect subclasses of Object3D, Object3D’s constructor must be executed. Super is the constructor used to execute EventDispatcher.
  3. Each 3D object has a unique UUID
  4. Name is null because the subclass overrides it.
  5. Parent is null because it is the root of everything in three.js3d.
  6. DefineProperty is used to add attributes to Object3D. Position is configurable and enumerable, rotation Angle is configurable and enumerable, scale is configurable and enumerable for 3d objects. ModelViewMatrix and normalMatrix assign the initial values new Matrix4() and new Matrix3().
  7. Next time we will familiarize ourselves with Vector3,Euler, and Quaternion. The Vector3 stores three values, x, Y, and z. Euler and Quaternion are mathematical abstractions of three.js. The mathematical formula is also abstracted as an object, so to speak, everything is an object.
  8. By default, 3D objects are visible and automatically updated. CastShadow and receiveShadow are not acceptable.
  9. 3D objects have their own animation collection.
  10. 3d objects can store userData userData

The Object3d constructor mainly initializes the properties of a 3D object. Any 3D object inherits these properties and also has its own unique properties. Welcome to the world of 3D objects. If you want to learn three.js well, it’s important to understand every property of Object3D.

Object3D provides methods

Two empty methods, onBeforeRender and onAfterRender, indicate what the 3D object does before rendering and what it does after rendering. These two methods are overridden by their subclasses (overide).

	getObjectByProperty( name, value ) {

		if ( this[ name ] === value ) return this;

		for ( let i = 0, l = this.children.length; i < l; i ++ ) {

			const child = this.children[ i ];
			const object = child.getObjectByProperty( name, value );

			if( object ! = =undefined ) {

				returnobject; }}return undefined;

	}
Copy the code
  • GetObjectByProperty is a higher-order function to find 3d object instances based on any property.
  • Returns the object itself if the value of the current object’s property is equal to the value of the property passed in. Otherwise the children traversing the 3D object will return it immediately if they find it, so the name and ID attributes of the 3D object must be unique. It recursively iterates through all the child objects to find a matching 3D object, which is singular.
  • Translation and rotation functions also use the technique of higher order functions, which are translated around x,y and Z axes by passing different coordinate axes into translateOnAxis. Rotate Group functions do the same. These transformations all depend on the mathematical encapsulation of three.js. The author plans to use a special article to analyze the mathematical library of Three. js. It takes some math, like matrices, sines and cosines.

Other methods use a large amount of mathematical library, and the remaining methods will be analyzed after analyzing the mathematical library of three.js. These methods include:

  • Local coordinate system to world coordinate system
  • World coordinate system to local coordinate system
  • Look at a point in the 3D world
  • Update matrix
  • Update matrix world
  • Update the world matrix

The three.js library is the perfect tutorial for learning object-oriented programming. It is a perfect abstraction. In Three. js, everything is an object.