`<sk-mesh>`

← prev index next →

Brings an external polygon mesh into the scene — the way to render a model authored elsewhere rather than a built-in parametric shape.

JavaScript API: Mesh

Remarks

This is the file-loading member of the AbstractMeshNode geometry-primitive family: instead of generating geometry from a few parameters like sk-sphere or sk-cube, it takes its geometry from outside — a model exported from a modelling tool. Once loaded it behaves like any other mesh node: position it, paint it, and animate its transform.

Key attributes. src is the URL of the mesh file (an http(s) address, an absolute or relative path, or an inline data: URL); the geometry is fetched and parsed when the node enters the scene (currently OBJ). The load is asynchronous, so a load event fires on success and an error event on failure. The mesh has no shape parameters of its own — its form comes from the file — so to make it move you animate its transform (rotate it, scale it) like any node.

Normalizing. Imported geometry arrives at whatever scale and position it was authored at, which may not suit the scene. normalize-scale="N" rescales the mesh (aspect-preserving) so its largest extent fits [-N, N], and anchor picks the point translated to the origin first (anchor="center" recenters it) — the result is baked into the mesh's vertices. Omit normalize-scale to keep the authored coordinates.

Related. Give it appearance with a sk-surface-paint or sk-edge-paint naming a sk-plain-material, exactly as for the parametric primitives (sk-sphere, sk-cube). For a whole external scene hierarchy (a glTF file with its own node tree, meshes, and materials) use sk-asset instead; sk-mesh is for a single imported geometry. Like every mesh it 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.

<!-- Loads geometry from an external OBJ file via `src`, normalizes it to a
     known size (`normalize-scale="3"` fits it into a 3-unit half-box) centered
     on the origin (`anchor="center"`), then paints it and gently rotates it (a
     transform animation, since an imported mesh has no shape parameters of its
     own). The load is asynchronous — a 'load' event fires on success, an
     'error' event on failure. -->
<sk-scene>
    <sk-plain-material id="mat" base-color="#7fa8d8"></sk-plain-material>

    <sk-mesh src="/js-assets/skenra/demos/html/scenes/scooter.obj"
        normalize-scale="3" anchor="center">
        <sk-surface-paint material="#mat"></sk-surface-paint>
        <!-- imported meshes have no shape params, so we animate the transform -->
        <sk-animation duration="8000ms" iterations="Infinity">
            <sk-keyframe offset="0" h="0deg"></sk-keyframe>
            <sk-keyframe offset="1" h="360deg"></sk-keyframe>
        </sk-animation>
    </sk-mesh>
</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.
`src`	`<string>`	—	Source URL (http(s) / absolute or relative path / `data:` URL) for
`cull-mode`	`<cull-mode> ("front" \| "back" \| "none")`	—	Default face culling mode for surface paints.
`normalize-scale`	`<positive-normalize-scale> (none)`	`"none"`	Uniform normalization target half-size. A number `N` rescales the loaded
`anchor`	`<content-anchor-3d> (<anchor-3d>)`	`"content(0,0,0)"`	The 3D anchor point translated to the origin before normalization. See

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, onload, onerror

↑ Documentation home · ← All elements