Extrude

components / meshes / Extrude.js

Extrude geometry means that you can create a 3D mesh from any 2D shape using three.js geometry based on THREE.Vector2. Such implementation will help you to make volumed shapes that have their own depth and can be seen from all angels.

You can also find some interesting examples made using three.js which is a core of Whitestorm.js, such as:

• Webgl geometry extrude
• Extrude shapes from geodata
• Extrude splines

Such examples can be easily implemented using whitestorm.js or it's plugins. Use WHS.Extrude class with THREE.Shape to get extrude effect of shape defined by 2D vectors.

This class is similar to THREE.ExtrudeGeometry, but it also contain's all properties, applied by WHS.Shape, such as material, mass and vectors like position (pos) and rotation (rot).

JavaScript

const shape = new THREE.Shape([
  new THREE.Vector2(-4,-4),
  new THREE.Vector2(-2,0),
  new THREE.Vector2(-4,4),
  new THREE.Vector2(0,2),
  new THREE.Vector2(4,4),
  new THREE.Vector2(2,0),
  new THREE.Vector2(4,-4),
  new THREE.Vector2(0,-2)
]);

const extrude = new WHS.Extrude({
  geometry: {
    shapes: shape,
    options: {
      bevelEnabled: false,
      bevelSize: 0,
      amount: 2
    }
  },

  material: new THREE.MeshBasicMaterial({
    color: 0xffffff
  }),

  position: [0, 100, 0]
});

extrude.addTo(world);

Parameters

Geometry defaults

JavaScript

{
  // ...

  geometry: {
    shapes: [], // Array of THREE.Shape`s or THREE.Shape
    options: {} // Object
  }
}

These defaults are additional, there are also defaults filled by MeshComponent, etc.

Instructions

JavaScript

{
  // ...

  geometry: ['shapes', 'options']
}