Mesh

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

Declarative element: <sk-mesh>

Global: available as sk.Mesh inside a scene <script>.

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.

Constructor

constructor(config?: { meshData?: MeshData; src?: string; normalizeScale?: number | 'none'; anchor?: AnchorValue3D; cullMode?: CullMode; overlay?: boolean; overlayOccludedOpacity?: number; id?: string; x?: number; y?: number; z?: number; h?: number; p?: number; b?: number; quaternion?: Quaternion; sx?: number; sy?: number; sz?: number; s?: number; class?: string; style?: string })

Inherited from: AbstractMeshNode, RenderableNode, SceneNode, SkenraAnimatable — see those pages for inherited members.

Properties

Config Properties

Other Properties

Methods

Example

import { parseObj } from '/js/skenra/meshes/parsers/obj-parser.js';
import { Mesh } from '/js/skenra/scene-graph/mesh.js';

const meshData = parseObj(objFileText);
const node = new Mesh({ id: 'bunny', meshData, normalizeScale: 3, anchor: 'center' });
scene.appendChild(node);

↑ Documentation home · ← All classes