`<sk-cone>`

← prev index next →

Draws a cone or frustum — a shape with a base tapering to a point or a smaller top — for spires, funnels, and spotlight volumes.

JavaScript API: Cone

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 pointed spire, a truncated funnel, or a spotlight-cone volume.

Key attributes. A cone is defined by two radii — bottom-radius at the base and top-radius at the top — both animatable, so the shape can morph live. top-radius="0" gives a classic pointed cone; a non-zero top-radius truncates it into a frustum (funnel); equal radii would be a plain tube (use sk-cylinder for that). height (also animatable) is the length along the orientation axis (+x, -x, +y, -y, +z, -z), which picks base-to-tip direction. rotation-segments (minimum 3) sets how many facets go around the circumference — raise it for a smooth cone; height-segments subdivides along the length.

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-cylinder (a cone with equal radii) and sk-sphere, 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 cones showing what you control. LEFT: top-radius ANIMATES 0 -> 1.2 and
     back, so the shape morphs live between a pointed cone and a truncated frustum.
     MIDDLE: the default pointed cone drawn as a wireframe, so the rotation facets
     read. RIGHT: a tall spire with a fine circumference, showing height and
     rotation-segments. -->
<sk-scene>
    <sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>
    <sk-plain-material id="wire" base-color="#e0b050"></sk-plain-material>

    <!-- top-radius is animatable: pointed cone <-> frustum -->
    <sk-cone x="-3.5" bottom-radius="1.2" top-radius="0" height="2.5" rotation-segments="24">
        <sk-surface-paint material="#mat"></sk-surface-paint>
        <sk-animation duration="2000ms" iterations="Infinity" direction="alternate">
            <sk-keyframe offset="0" top-radius="0"></sk-keyframe>
            <sk-keyframe offset="1" top-radius="1.2"></sk-keyframe>
        </sk-animation>
    </sk-cone>

    <!-- default pointed cone, wireframe so the facets read -->
    <sk-cone bottom-radius="1" top-radius="0" height="2" rotation-segments="12">
        <sk-edge-paint material="#wire"></sk-edge-paint>
    </sk-cone>

    <!-- tall spire, fine circumference -->
    <sk-cone x="3.5" bottom-radius="0.8" top-radius="0" height="4"
             height-segments="4" rotation-segments="32">
        <sk-surface-paint material="#mat"></sk-surface-paint>
    </sk-cone>
</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.
`top-radius`animatable	`<number>`	`0`	Radius at the top of the cone. Use 0 for a pointed cone.
`bottom-radius`animatable	`<number>`	`1`	Radius at the bottom/base of the cone.
`height`animatable	`<number>`	`1`	Height of the cone along orientation axis.
`rotation-segments`	`<number>`	`8`	Number of segments around the circumference. Minimum 3.
`height-segments`	`<number>`	`1`	Number of segments along the height.
`orientation`	`<orientation-axis> ("+x" \| "-x" \| "+y" \| "-y" \| "+z" \| "-z")`	`"+y"`	Axis along which the cone extends from base to tip. See `AxisOrientation` for all valid values.
`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