`<sk-cylinder>`

Draws a cylinder — a straight tube with equal ends and both caps — for columns, pipes, and shafts.

JavaScript API: Cylinder

Remarks

This is a member of the AbstractMeshNode geometry-primitive family: a solid, renderable shape you position, paint, and animate like any scene node. It is the shape to reach for whenever you need a column, a pillar, or a pipe.

Key attributes. radius and height set the profile and length, and both are animatable — a cylinder can widen or telescope live. orientation (+x, -x, +y, -y, +z, -z) picks the axis it extends along, so the same cylinder is a standing column or a lying pipe. rotation-segments (minimum 3) sets the facets around the circumference — raise it for a smooth tube; height-segments subdivides along the length for deformation. Both circular caps are always included. A cylinder is the special case of a sk-cone with equal top and bottom radii; for a taper use a cone directly. include-quad-diagonals toggles the diagonal edges shown in wireframe.

Related. Give it appearance with a sk-surface-paint (fills the faces) or an sk-edge-paint (draws the wireframe), each naming a sk-plain-material. It is closely kin to sk-cone (add a taper) and sk-capsule (round the ends), and, like every mesh, can supply clone positions to a sk-cloner.

Serve these docs to run the live example. WebGPU needs a secure context — open this page via grunt serve rather than double-clicking the file. The Markup tab works from disk.

<!-- Three cylinders showing what you control. LEFT: height ANIMATES 1 -> 4 and
     back, so the length attribute drives the mesh live (a telescoping column).
     MIDDLE: the default cylinder drawn as a wireframe, so the rotation facets and
     caps read. RIGHT: the SAME cylinder re-oriented to +x — a lying pipe instead
     of a standing column. -->
<sk-scene>
    <sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
    <sk-plain-material id="wire" base-color="#e0b050"></sk-plain-material>

    <!-- height is animatable: the column telescopes -->
    <sk-cylinder x="-2.6" radius="0.6" height="2" rotation-segments="24">
        <sk-surface-paint material="#mat"></sk-surface-paint>
        <sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
            <sk-keyframe offset="0" height="1"></sk-keyframe>
            <sk-keyframe offset="1" height="4"></sk-keyframe>
        </sk-animation>
    </sk-cylinder>

    <!-- default cylinder, wireframe so facets and caps read -->
    <sk-cylinder radius="0.8" height="2" rotation-segments="12">
        <sk-edge-paint material="#wire"></sk-edge-paint>
    </sk-cylinder>

    <!-- same cylinder re-oriented to +x: a lying pipe -->
    <sk-cylinder x="2.6" radius="0.35" height="3" orientation="+x">
        <sk-surface-paint material="#mat"></sk-surface-paint>
    </sk-cylinder>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

Attribute	Type	Default	Description
`id`	`<id>`	—	The element's unique identifier — the standard HTML global `id` attribute.
`draggable`	`<boolean>`	`false`	Gets whether this node can be dragged.
`x`animatable	`<number>`	`0`	X position.
`y`animatable	`<number>`	`0`	Y position.
`z`animatable	`<number>`	`0`	Z position.
`h`animatable	`<angle>`	`0`	Heading (Y-axis rotation) in radians.
`p`animatable	`<angle>`	`0`	Pitch (X-axis rotation) in radians.
`b`animatable	`<angle>`	`0`	Bank (Z-axis rotation) in radians.
`quaternion`animatable	`<quaternion> ({ <number>, <number>, <number>, <number> })`	—	Rotation as quaternion (overrides h, p, b if provided)
`sx`animatable	`<number>`	`1`	X-axis scale factor.
`sy`animatable	`<number>`	`1`	Y-axis scale factor.
`sz`animatable	`<number>`	`1`	Z-axis scale factor.
`s`	`<number>`	—	Uniform scale factor for all axes (overrides sx, sy, sz if provided) write-only
`overlay`	`<boolean>`	`false`	Whether this node renders as an overlay with depth-aware translucency.
`overlay-occluded-opacity`	`<number>`	`0.3`	Alpha multiplier for overlay fragments occluded by scene geometry.
`cast-shadow`animatable	`<boolean>`	`true`	Gets whether this mesh casts shadows.
`radius`animatable	`<number>`	`1`	Radius of the cylinder. Must be positive.
`height`animatable	`<number>`	`1`	Height of the cylinder along orientation axis. Must be positive.
`rotation-segments`	`<number>`	`8`	Number of segments around the circumference. Minimum 3.
`height-segments`	`<number>`	`1`	Number of segments along the height. Minimum 1.
`orientation`	`<orientation-axis> ("+x" \| "-x" \| "+y" \| "-y" \| "+z" \| "-z")`	`"+y"`	Axis along which the cylinder extends.
`include-quad-diagonals`	`<boolean>`	`false`	Whether to include quad diagonal edges in wireframe rendering.
`cull-mode`	`<cull-mode> ("front" \| "back" \| "none")`	—	Default face culling mode for surface paints.

Event handler attributes

Standard DOM event-handler content attributes — the value is JavaScript run when the event fires. They behave exactly as on any HTML element.

onclick, ondblclick, onauxclick, oncontextmenu, onpointerdown, onpointerup, onpointermove, onpointercancel, onpointerover, onpointerout, onpointerenter, onpointerleave, ongotpointercapture, onlostpointercapture, onwheel, ondragstart, ondrag, ondragenter, ondragover, ondragleave, ondrop, ondragend

↑ Documentation home · ← All elements