MeshComponent

core / MeshComponent.js

👍

MeshComponent class inherits Component

MeshComponent used to work with THREE.Mesh (and THREE.Line) obects. It wraps WHS.Component with common methods and properties used to work with Three.js meshes.

It defines position, rotation, quaternion and scale properties that are used to transform 3D objects.

That's how you can make a WHS.Element from a three.js mesh:

3D Transforms

See 3D transforms page for more details about MeshComponent 3d transform methods/attributes.

Making a simple MeshComponent

BasicSphere.js

import * as THREE from 'three';

// MeshComponent provides simple interface
import {MeshComponent} from 'whs/src/core/MeshComponent';

export default class BasicSphere extends MeshComponent {
  build() {
    return new THREE.Mesh(
      new THREE.SphereGeometry(3, 16, 16),
      new THREE.MeshBasicMaterial({color: 0xff0000}) // red
    );
  }
}

📘

build()

build() method should return a mesh. This object will be then assigned to yourBasicSphere.native attribute and added to app's Scene object.

app.js

import BasicSphere from './BasicSphere';

// ...

const sphere = new BasicSphere();
sphere.addTo(app);

Handling parameters

BasicSphere.js

import * as THREE from 'three';

// MeshComponent provides simple interface
import {MeshComponent} from 'whs/src/core/MeshComponent';

class BasicSphere extends MeshComponent {
  static defaults = {
    color: 0xff0000
  };
  
  constructor(params = {}) {
    super(params, BasicSphere.defaults);
  }
  
  build() {
    return new THREE.Mesh(
      new THREE.SphereGeometry(3, 16, 16),
      new THREE.MeshBasicMaterial({color: params.color}) // your color
    );
  }
}

export {
  BasicSphere
};

Optional: Default values we provide as a second parameter when call super().

📘

static defaults = {}

It's better to provide defaults in a static variable. It allows then simply get them for specific kind of MeshComponents.

app.js

import BasicSphere from './BasicSphere';

// ...

const sphere = new BasicSphere({
  color: 0x0000ff // blue
});

sphere.addTo(app);

API

.build()

Method that creates a native object (THREE.Mesh).
Can also return a Promise if build processes are asynchronous. Then will assign resolved value to .native attribute.

❗️

This method is required for each component.

Is called by constructor.

.wrap()

.wrap() method applies 3D transforms (got from parameters) to component's .native

🚧

This method is originally provided by MeshComponent, but is also required.

Is called by constructor, after .build() method.

.clone()(geometry, material)

.clone() method clones the Mesh component, it take two boolean parameters to give full control over whether the Mesh geometry and/or material gets cloned.

Creating a MeshComponent of custom geometry

📘

Custom geomtery

There are two static functions in MeshComponent made for easy creation of components from just a geometry.

MeshComponent.custom( geometry, constructor[optional] )

You'll probably use this one to produce a component several times in a project. It returns a component (class):

MyComponent.js

export const Sphere = MeshComponent.custom( // Sphere is a class
  new THREE.SphereGeometry(3, 32, 32)
);

📘

constructor

Use this argument only if you want to use constructor other than THREE.Mesh (For example THREE.Line)

MeshComponent.create( geometry, params, constructor[optional] )

This one you can use if you need to generate that object once and use it immediately.

app.js

const sphere = MeshComponent.create( // sphere is an object
  new THREE.SphereGeometry(3, 32, 32),
  {
    material: new THREE.MeshBasicMaterial()
  }
);