Tube

components / meshes / Tube.js

WHS.Tube class makes a tube that extrudes along a 3d curve.

JavaScript

const CustomSinCurve = THREE.Curve.create(
  function (scale) { // custom curve constructor
    this.scale = (scale === undefined) ? 1 : scale;
  },

  function ( t ) { // getPoint: t is between 0-1
    const tx = t * 3 - 1.5,
        ty = Math.sin( 2 * Math.PI * t ),
        tz = 0;

    return new THREE.Vector3(tx, ty, tz).multiplyScalar(this.scale);
  }
);

const path = new CustomSinCurve( 10 );

const tube = new WHS.Tube({
  geometry: {
    path: path
  },

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

tube.addTo(world);

Parameters

Geometry defaults

JavaScript

{
  // ...

  geometry: {
    path: false, // Boolean.
    segments: 20, // Number.
    radius: 2, // Number.
    radiusSegments: 8, // Number.
    closed: false // Boolean.
  }
}

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

Instructions

JavaScript

{
  // ...

  geometry: [
    'path',
    'segments',
    'radius',
    'radiusSegments',
    'closed'
  ]
}