`<sk-cone-points-source>`

← prev index next →

Scatters clones over the surface of a cone, cylinder, or frustum — the way to array copies up a tapering or straight tube, caps included.

JavaScript API: ConePointsSource

Remarks

This is the cone/cylinder member of the points-source family: a points-source defines the set of positions at which a sk-cloner places copies of its content, so it lives as a child of a <sk-cloner> and the cloner's other child is the template that gets cloned at each point. Because the positions are generated procedurally in the shader (see ShaderFunctionPointsSource), a finely subdivided cone costs the same handful of parameters as a coarse one.

Key attributes. bottom-radius and top-radius set the two end radii: a top-radius of 0 gives a pointed cone, equal radii give a straight cylinder, and two different non-zero radii give a truncated cone (frustum). height sets how far it extends along the orientation axis. height-segments sets how many rings run up the side and rotation-segments how many points sit around each ring (the angular resolution). orientation is the axis the cone extends along — one of +x, -x, +y, -y, +z, -z. center offsets the shape from the origin. Only unique points are emitted — a single apex for a pointed cone, one centre per end cap, and no seam duplicates.

Related. For a rounded-capped tube use sk-capsule-points-source; for a full donut use sk-torus-points-source. Its flat end cap is a sk-disc-points-source, and for a filled volume use sk-grid-points-source. To scatter over an arbitrary object's surface rather than an analytic cone, see sk-mesh-surface-points-source. Its host is always 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.

<!-- Small spheres over a pointed cone. top-radius="0" narrows the top to a
     single apex while bottom-radius="2" sets the wide base; height="4" makes it
     tall, and the segment counts lay 16 dots around each of the rings running
     up the side, capping into a disc of dots at the base. Set top-radius equal
     to bottom-radius for a straight cylinder, or to a smaller non-zero value
     for a truncated frustum. -->
<sk-scene>
    <sk-directional-light p="55deg" h="30deg" intensity="1.0"></sk-directional-light>
    <sk-ambient-light intensity="0.45"></sk-ambient-light>

    <sk-plain-material id="mat" base-color="#4f86c6"></sk-plain-material>

    <sk-cloner mode="vertex">
        <sk-cone-points-source top-radius="0" bottom-radius="2" height="4"
            height-segments="4" rotation-segments="16"></sk-cone-points-source>

        <!-- Template cloned at each surface point. -->
        <sk-sphere radius="0.16">
            <sk-surface-paint material="#mat"></sk-surface-paint>
        </sk-sphere>
    </sk-cloner>
</sk-scene>

Edit the markup, then Apply to re-render.

Attributes

Attribute	Type	Default	Description
`top-radius`	`<number>`	`0`	Radius at the top of the cone (0 for pointed cone).
`bottom-radius`	`<number>`	`1.0`	Radius at the bottom/base of the cone.
`height`	`<number>`	`1.0`	Height of the cone along orientation axis.
`height-segments`	`<number>`	`1`	Number of segments along the height.
`rotation-segments`	`<number>`	`8`	Number of segments around the circumference.
`orientation`animatable	`<orientation-axis> ("+x" \| "-x" \| "+y" \| "-y" \| "+z" \| "-z")`	`"+y"`	Axis along which the cone extends.
`center`	`<3d-position> ([<number>, <number>, <number>])`	`[0, 0, 0]`	Geometric center of the cone (midpoint of its extent along the orientation axis).

↑ Documentation home · ← All elements