TubeMeshDesc

The TubeMeshDesc class is a mesh descriptor for drawing tube geometry. It can create tube shapes along a Catmull-Rom curve.

In addition to the properties below, all common properties from the base class (position, rotation, scale, matrix, matrixWorld, pickable, visible) are available. See MeshDesc for details.

Properties

points

Type: XYZ[]

Description: Specifies an array of 3D coordinates that define the tube’s path. A minimum of 2 points is required.

Example:

{
  tube: {
    points: [
      { x: 0, y: 0, z: 0 },
      { x: 100, y: 50, z: 0 },
      { x: 200, y: 0, z: 0 }
    ],
  }
}

tubularSegments

Type: number

Description: Specifies the number of segments along the length of the tube.

Default: 64

Example:

{
  tube: {
    tubularSegments: 128,
  }
}

radius

Type: number

Description: Specifies the radius of the tube.

Default: 1

Example:

{
  tube: {
    radius: 10,
  }
}

radialSegments

Type: number

Description: Specifies the number of segments around the circumference of the tube.

Default: 8

Example:

{
  tube: {
    radialSegments: 16,
  }
}

closed

Type: boolean

Description: Specifies whether to create a closed tube shape.

Default: false

Example:

{
  tube: {
    closed: true,
  }
}

tension

Type: number

Description: Specifies the tension of the Catmull-Rom curve. Values closer to 0 produce straighter lines.

Default: 0.5

Example:

{
  tube: {
    tension: 0.8,
  }
}

color

Type: Color

Description: Specifies the color of the tube using a Color instance. The Color class supports hexadecimal color codes and CSS-style color specifications.

Default: new Color().setStyle("#ffffff")

Example:

import { Color } from "@navaramap/three";

{
  tube: {
    color: new Color().setHex(0xff8800),
  }
}

castShadow

Type: boolean | undefined

Description: Specifies whether the tube casts shadows.

Default: false

Example:

{
  tube: {
    castShadow: true,
  }
}

receiveShadow

Type: boolean | undefined

Description: Specifies whether the tube receives shadows.

Default: false

Example:

{
  tube: {
    receiveShadow: true,
  }
}

emissiveColor

Type: Color

Description: Specifies the emissive color of the tube using a Color instance.

Default: new Color().setHex(0x000000)

Example:

import { Color } from "@navaramap/three";

{
  tube: {
    emissiveColor: new Color().setHex(0xff8800),
  }
}

emissiveIntensity

Type: number

Description: Specifies the emissive intensity.

Default: 0

Example:

{
  tube: {
    emissiveIntensity: 1.0,
  }
}

opacity

Type: number

Description: Specifies the opacity of the tube in the range of 0.0 to 1.0. transparent must be set to true.

Default: 1

Example:

{
  tube: {
    opacity: 0.5,
    transparent: true,
  }
}

transparent

Type: boolean

Description: Specifies whether to make the tube semi-transparent.

Default: false

Example:

{
  tube: {
    transparent: true,
    opacity: 0.5,
  }
}

Config

effectIds

Type: string[] (optional)

Description: Specifies an array of selective effect descriptor IDs to apply to this mesh.

Example:

{
  tube: {
    effectIds: ["bloom-effect", "outline-effect"],
  }
}

Usage Examples

import ThreeView, { Color } from "@navaramap/three";
import { TubeMeshDesc } from "@navaramap/three_default_descs";

const view = new ThreeView();
view.registerMesh("tube", TubeMeshDesc);
await view.init();

// Add a TubeMeshDesc
const tubeDesc = view.addMesh<TubeMeshDesc>({
  tube: {
    points: [
      { x: 0, y: 0, z: 1000 },
      { x: 100, y: 50, z: 1100 },
      { x: 200, y: -50, z: 1000 },
      { x: 300, y: 0, z: 1000 },
    ],
    radius: 10,
    tubularSegments: 128,
    radialSegments: 16,
    color: new Color().setHex(0xff8800),
    tension: 0.5,
  },
});