Component

core / Component.js

Component is a main class which is commonly used in core parts of WhitestormJS framework. WHS.Component is used in WHS.World, WHS.Group and almost all known classes of framework.

📘

Quick tip

Meshes, Lights, Cameras, even World is based on WHS.Component class.

JavaScript

import THREE from 'three';

// Basic component class.
import {Component} from 'whitestormjs/core/Component';

class EmptyComponent extends Component {
  constructor(params = {}) {
    super(params, SimpleComponent.defaults, SimpleComponent.instructions);

    this.native = new THREE.Object3D();
  }
}

const myEmptyElement = new EmptyComponent();

Defaults & instructions

When we call super - we should pass params object there. And we can also specify defaults object to fill required properties.

JavaScript

// ...

class Dinosaur extends Component {
  static defaults = {
    teethCount: 32
  };

  // ...
}

const saurolophus = new Dinosaur({teethCount: 56});
saurolophus.params.teethCount // -> 56

const dino = new Dinosaur();
dino.params.teethCount // -> 32

And sometimes we need to make simplified record, you may use instructions for that:

JavaScript

// ...

class Star extends Component {
  static defaults = {
    direction: {x: 1, y: 0, z: 0}
  };

  static instructions = {
    direction: ['x', 'y', 'z']
  };

  // ...
}

// After you can use it as here:
const sun = new Star({direction: [0, 1, 0]})

// Or as usually:
const sun = new Star({direction: {x: 0, y: 1, z: 0}});

Properties

.params

An object that contains parameters.

.native

A three.js object linked to the component.

Methods

.updateParams( object );

Every component has it's own params that it uses in further operations (such as building a geometry, material or linking to other object). For this we have a .params property that after you define a component is filled with defaults modified by values you passed.

.updateParams() extends this object with provided new values.

JavaScript

// Lets imagine myEmptyElement.params -> {a: 2, b: 4}

myEmptyElement.updateParams({c: 3}) // -> {a: 2, b: 4, c: 3}
myEmptyElement.updateParams({b: 5}) // -> {a: 2, b: 5, c: 3}

.addTo( parent )

As we work in 3D space - we have a World and objects that it should contain. All those object are called it's children . A world object will be a parent of other objects.

When we created a component we just described what it should be. But WHS.World is not yet linked to object we want to see on scene.

JavaScript

myEmptyElement.addTo(world);

Now we added our component to the scene. If you debug world.scene.children now - you can see that we have a THREE.Object3D in this array.

.copy( source )

This method is used to copy .native and .params from other WHS.Component.

🚧

This method's code is different in pair with decorators like MeshComponent, PhysicsComponent and SoftbodyComponent.

JavaScript

const ball = MeshComponent(new WHS.Component(
  new THREE.Mesh(
    new THREE.SphereGeometry(3, 16, 16),
    new THREE.MeshBasicMaterial({color: 0xffffff})
  )
));

myEmptyElement.copy(ball);

// Now:
// - myEmptyElement.params is a copy of ball.params
// - myEmptyElement.native is a copy of ball.native

.clone()

Clone method works directly with .copy() method. That's what it does:

JavaScript

// Component.js
  // ... 

  clone() {
    return new Component(this.params).copy(this);
  }

  // ...

Uasge of .clone():

JavaScript

// Let's take "ball" this time as it has .native;

const ball2 = ball.clone();
ball2.position.y += 10;

ball2.addTo(world);