Loads a whole 3D model from a file — a glTF scene or an OBJ mesh — and brings the recovered node tree into the scene under one transform.
JavaScript API:
Asset
The asset is a SceneNode that stands in for an externally-authored
model: it fetches its src, parses it, and expands the recovered subtree so it
renders as part of the scene. This is how you drop a model exported from a
modelling tool into a Skenra scene.
Key attributes. src is the file URL; the format is chosen by extension.
A glTF file (the default) recovers its groups and meshes as a renderable
hierarchy. Where one glTF mesh splits into several compatible per-material
primitives, they merge into a single mesh whose per-primitive face groups become
named selections; a single-primitive mesh keeps its whole-mesh base-color paint,
while a merged mesh preserves each region's base color as its selection grouping.
Only base color is imported from a glTF material — never textures or the
metallic/roughness/emissive PBR terms. An .obj file recovers a single mesh —
each o/g object group becomes a named face selection on it — and one spline
per polyline, carrying no materials of its own (assign appearance by targeting the
recovered mesh, and its object groups by name via a selection binding).
Because the loaded tree renders under this node, the asset's own transform
(x/y/z, s, rotation) moves and scales the whole model as one unit. Loading
is asynchronous, so a load event fires on success and an error event on
failure; a failed re-load leaves any prior content intact.
Normalizing. A loaded model arrives at whatever scale and position it was
exported at. normalize-scale="N" rescales it (aspect-preserving) so its largest
extent fits [-N, N], and anchor picks the reference point translated to the
origin first (anchor="center" recenters it) — so a bare scene frames the model
naturally under the default camera. The transform is applied to the loaded content
only; the asset's own transform and any nested annotations are untouched. Omit
normalize-scale to keep the authored coordinates (and fit the camera yourself in
an onload handler from the asset's computed bounds).
Related. For a single piece of imported geometry rather than a whole
hierarchy, use sk-mesh; to stamp a loaded model across many positions,
make it the content of 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 a self-contained glTF and expands it into a renderable subtree,
normalized to a 3-unit half-box and centered so the default camera frames
it. Position/scale the asset to move the whole rig; `onload`/`onerror`
handle the async load. -->
<sk-scene>
<sk-asset id="rig" src="../assets/sample.gltf"
normalize-scale="3" anchor="center"></sk-asset>
</sk-scene>| 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. |
xanimatable |
<number> |
0 |
X position. |
yanimatable |
<number> |
0 |
Y position. |
zanimatable |
<number> |
0 |
Z position. |
hanimatable |
<angle> |
0 |
Heading (Y-axis rotation) in radians. |
panimatable |
<angle> |
0 |
Pitch (X-axis rotation) in radians. |
banimatable |
<angle> |
0 |
Bank (Z-axis rotation) in radians. |
quaternionanimatable |
<quaternion> ({ <number>, <number>, <number>, <number> }) |
— | Rotation as quaternion (overrides h, p, b if provided) |
sxanimatable |
<number> |
1 |
X-axis scale factor. |
syanimatable |
<number> |
1 |
Y-axis scale factor. |
szanimatable |
<number> |
1 |
Z-axis scale factor. |
s |
<number> |
— | Uniform scale factor for all axes (overrides sx, sy, sz if provided) write-only |
src |
<string> |
— | URL of the asset to load. The format is chosen by file extension: |
normalize-scale |
<positive-normalize-scale> ( |
"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 |
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