CylinderMeshDesc
The CylinderMeshDesc class is a mesh descriptor for drawing cylinder geometry. You can create cylinders and cones by specifying top radius, bottom radius, height, and other parameters.
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
Section titled “Properties”radiusTop
Section titled “radiusTop”Type: number
Description: Specifies the top radius of the cylinder.
Default: 1
Example:
{ cylinder: { radiusTop: 50, }}radiusBottom
Section titled “radiusBottom”Type: number
Description: Specifies the bottom radius of the cylinder.
Default: 1
Example:
{ cylinder: { radiusBottom: 50, }}height
Section titled “height”Type: number
Description: Specifies the height of the cylinder.
Default: 1
Example:
{ cylinder: { height: 200, }}radialSegments
Section titled “radialSegments”Type: number
Description: Specifies the number of segments around the circumference.
Default: 32
Example:
{ cylinder: { radialSegments: 64, }}heightSegments
Section titled “heightSegments”Type: number
Description: Specifies the number of segments along the height.
Default: 1
Example:
{ cylinder: { heightSegments: 2, }}openEnded
Section titled “openEnded”Type: boolean
Description: Specifies whether to leave both ends of the cylinder open.
Default: false
Example:
{ cylinder: { openEnded: true, }}thetaStart
Section titled “thetaStart”Type: number
Description: Specifies the starting angle of the cylinder in radians.
Default: 0
Example:
{ cylinder: { thetaStart: Math.PI / 4, }}thetaLength
Section titled “thetaLength”Type: number
Description: Specifies the central angle of the cylinder in radians.
Default: Math.PI * 2
Example:
{ cylinder: { thetaLength: Math.PI, }}Type: Color
Description: Specifies the color of the cylinder 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";
{ cylinder: { color: new Color().setHex(0x0088ff), }}castShadow
Section titled “castShadow”Type: boolean
Description: Specifies whether the cylinder casts shadows.
Default: false
Example:
{ cylinder: { castShadow: true, }}receiveShadow
Section titled “receiveShadow”Type: boolean
Description: Specifies whether the cylinder receives shadows.
Default: false
Example:
{ cylinder: { receiveShadow: true, }}emissiveColor
Section titled “emissiveColor”Type: Color
Description: Specifies the emissive color of the cylinder using a Color instance.
Default: new Color().setHex(0x000000)
Example:
import { Color } from "@navaramap/three";
{ cylinder: { emissiveColor: new Color().setHex(0x00ff00), }}emissiveIntensity
Section titled “emissiveIntensity”Type: number
Description: Specifies the emissive intensity.
Default: 0
Example:
{ cylinder: { emissiveIntensity: 1.0, }}opacity
Section titled “opacity”Type: number
Description: Specifies the opacity of the cylinder in the range of 0.0 to 1.0. transparent must be set to true.
Default: 1
Example:
{ cylinder: { opacity: 0.5, transparent: true, }}transparent
Section titled “transparent”Type: boolean
Description: Specifies whether to make the cylinder semi-transparent.
Default: false
Example:
{ cylinder: { transparent: true, opacity: 0.5, }}Config
Section titled “Config”effectIds
Section titled “effectIds”Type: string[] (optional)
Description: Specifies an array of selective effect descriptor IDs to apply to this mesh.
Example:
{ cylinder: { effectIds: ["bloom-effect", "outline-effect"], }}Usage Examples
Section titled “Usage Examples”Basic Cylinder
Section titled “Basic Cylinder”import ThreeView, { Color } from "@navaramap/three";import { CylinderMeshDesc } from "@navaramap/three_default_descs";
const view = new ThreeView();view.registerMesh("cylinder", CylinderMeshDesc);await view.init();
// Add a CylinderMeshDescconst cylinderDesc = view.addMesh<CylinderMeshDesc>({ cylinder: { radiusTop: 50, radiusBottom: 50, height: 200, color: new Color().setHex(0x0088ff), }, position: { x: 0, y: 0, z: 1000 },});Creating a Cone
Section titled “Creating a Cone”import ThreeView, { Color } from "@navaramap/three";import { CylinderMeshDesc } from "@navaramap/three_default_descs";
const coneDesc = view.addMesh<CylinderMeshDesc>({ cylinder: { radiusTop: 0, radiusBottom: 100, height: 200, color: new Color().setHex(0xff8800), },});