lecodes-cli 0.1.6 → 0.2.0

package/runtime/sdk/gl/Geometry.ts

@@ -0,0 +1,218 @@
+// Mesh geometry: vertex / normal / index / uv buffers, plus the primitive builders. `Geometry.box()`
+// etc. return a Geometry you can hand to Mesh.from(); Mesh.box() is sugar over them. Ported from
+// worker/src/primitives/*.
+
+import { cx, cy, cz, type Vec3Like } from "../math/vec"
+
+export type MeshKind = "triangles" | "vertices" | "edges"
+
+// local tuple helpers — geometry building works on raw Float32Array buffers, so it stays out of the
+// Vec3 wrapper (no per-vertex allocation).
+type Tup3 = [number, number, number]
+const cross = (a: Tup3, b: Tup3): Tup3 => [ a[1] * b[2] - a[2] * b[1], a[2] * b[0] - a[0] * b[2], a[0] * b[1] - a[1] * b[0] ]
+const normalize = (a: Tup3): Tup3 => {
+  const l = Math.hypot(a[0], a[1], a[2])
+  return l === 0 ? [ 0, 0, 0 ] : [ a[0] / l, a[1] / l, a[2] / l ]
+}
+
+export class Geometry {
+  vertices: Float32Array
+  normals: Float32Array
+  indices: Uint16Array
+  uv: Float32Array
+  /** @internal native mesh-type enum (0 triangles / 1 edges / 2 vertices). */
+  _meshKind = 0
+
+  constructor(vertices: Float32Array, normals: Float32Array, indices: Uint16Array, uv: Float32Array) {
+    this.vertices = vertices
+    this.normals = normals
+    this.indices = indices
+    this.uv = uv
+  }
+
+  translate(x: number, y: number, z: number): this {
+    for (let i = 0; i < this.vertices.length; i += 3) {
+      this.vertices[i] += x; this.vertices[i + 1] += y; this.vertices[i + 2] += z
+    }
+    return this
+  }
+  scale(x: number, y: number, z: number): this {
+    for (let i = 0; i < this.vertices.length; i += 3) {
+      this.vertices[i] *= x; this.vertices[i + 1] *= y; this.vertices[i + 2] *= z
+    }
+    return this
+  }
+  scaleUV(x: number, y: number): this {
+    for (let i = 0; i < this.uv.length; i += 2) { this.uv[i] *= x; this.uv[i + 1] *= y }
+    return this
+  }
+  set kind(kind: MeshKind) {
+    this._meshKind = kind === "edges" ? 1 : kind === "vertices" ? 2 : 0
+  }
+
+  static box(): Geometry { return createCube() }
+  static sphere(options?: SphereOptions): Geometry { return createSphere(options) }
+  static cylinder(options?: CylinderOptions): Geometry { return createCylinder(options) }
+  static plane(options?: PlaneOptions): Geometry { return createPlane(options) }
+}
+
+// --- cube ---
+const createCube = (): Geometry => {
+  const vertices = new Float32Array(6 * 4 * 3)
+  const normals = new Float32Array(6 * 4 * 3)
+  const uv = new Float32Array(6 * 4 * 3)
+  const indices = new Uint16Array(6 * 6)
+  let cnt = 0, indicesCnt = 0
+  const sides = [ -0.5, 0.5 ]
+  for (let i = 0; i < 6; i++) {
+    const s = cnt
+    const side = i % 2 === 0 ? -0.5 : 0.5
+    for (const a of sides) {
+      for (const b of sides) {
+        uv.set([ a + 0.5, b + 0.5 ], cnt * 2)
+        if (i === 0 || i === 1) { vertices.set([ side, b, -a ], cnt * 3); normals.set([ side * 2, 0, 0 ], cnt * 3) }
+        if (i === 2 || i === 3) { vertices.set([ a, side, -b ], cnt * 3); normals.set([ 0, side * 2, 0 ], cnt * 3) }
+        if (i === 4 || i === 5) { vertices.set([ a, b, side ], cnt * 3); normals.set([ 0, 0, side * 2 ], cnt * 3) }
+        cnt++
+      }
+    }
+    const s1 = s + 1, s2 = s + 2, s3 = s + 3
+    if (i % 2 === 0) indices.set([ s, s1, s2, s3, s2, s1 ], indicesCnt)
+    else indices.set([ s2, s1, s, s1, s2, s3 ], indicesCnt)
+    indicesCnt += 6
+  }
+  return new Geometry(vertices, normals, indices, uv)
+}
+
+// --- sphere ---
+export type SphereOptions = { radius?: number, widthSegments?: number, heightSegments?: number }
+const createSphere = (options: SphereOptions = {}): Geometry => {
+  const { radius = 0.5, widthSegments = 32, heightSegments = 32 } = options
+  const verticesCount = (widthSegments + 1) * (heightSegments - 1) + widthSegments * 2
+  const vertices = new Float32Array(verticesCount * 3)
+  const normals = new Float32Array(verticesCount * 3)
+  const uvs = new Float32Array(verticesCount * 2)
+  const indices = new Uint16Array(widthSegments * (heightSegments - 2) * 6 + widthSegments * 3 * 2)
+  const phiLength = Math.PI * 2, thetaLength = Math.PI
+  let vertexCnt = 0, indicesCnt = 0
+  for (let iy = 1; iy < heightSegments; iy++) {
+    const v = iy / heightSegments
+    for (let ix = 0; ix <= widthSegments; ix++) {
+      const u = ix / widthSegments
+      const point: [number, number, number] = [
+        -Math.cos(u * phiLength) * Math.sin(v * thetaLength),
+        Math.cos(v * thetaLength),
+        Math.sin(u * phiLength) * Math.sin(v * thetaLength),
+      ]
+      vertices.set([ point[0] * radius, point[1] * radius, point[2] * radius ], vertexCnt * 3)
+      normals.set(point, vertexCnt * 3)
+      uvs.set([ u, 1 - v ], vertexCnt * 2)
+      if (iy > 1 && ix > 0) {
+        const s = vertexCnt - 1
+        const s1 = vertexCnt - (widthSegments + 1) - 1
+        indices.set([ s + 1, s1, s, s1, s + 1, s1 + 1 ], indicesCnt)
+        indicesCnt += 6
+      }
+      vertexCnt++
+    }
+  }
+  const sides = [ -radius, radius ]
+  const circleStart2 = vertexCnt - (widthSegments + 1)
+  for (const side of sides) {
+    const circleStart = side > 0 ? 0 : circleStart2
+    for (let ix = 0; ix < widthSegments; ix++) {
+      const u = (ix + 0.5) / widthSegments
+      vertices.set([ 0, side, 0 ], vertexCnt * 3)
+      normals.set([ 0, side < 0 ? -1 : 1, 0 ], vertexCnt * 3)
+      uvs.set([ u, side < 0 ? 0 : 1 ], vertexCnt * 2)
+      const s = circleStart + ix
+      if (side > 0) indices.set([ s, s + 1, vertexCnt ], indicesCnt)
+      else indices.set([ vertexCnt, s + 1, s ], indicesCnt)
+      indicesCnt += 3
+      vertexCnt++
+    }
+  }
+  return new Geometry(vertices, normals, indices, uvs)
+}
+
+// --- cylinder ---
+export type CylinderOptions = { radius?: number, radiusTop?: number, radiusBottom?: number, edges?: number, smooth?: boolean }
+const createCylinder = (options: CylinderOptions = {}): Geometry => {
+  const { edges = 32, smooth = true, radius = 0.5, radiusTop = radius, radiusBottom = radius } = options
+  const verticesCount = edges * 4 + (edges + 1) * 2
+  const vertices = new Float32Array(verticesCount * 3)
+  const normals = new Float32Array(verticesCount * 3)
+  const uv = new Float32Array(verticesCount * 2)
+  const indices = new Uint16Array(edges * 6 + edges * 6)
+  const sides = [ -0.5, 0.5 ]
+  let cnt = 0, indicesCnt = 0
+  for (let i = 0; i < edges; i++) {
+    const s = cnt
+    const normalX = Math.cos((i + 0.5) / edges * Math.PI * 2)
+    const normalY = Math.sin((i + 0.5) / edges * Math.PI * 2)
+    for (let j = 0; j < 2; j++) {
+      const x = Math.cos((i + j) / edges * Math.PI * 2)
+      const y = Math.sin((i + j) / edges * Math.PI * 2)
+      for (const side of sides) {
+        if (side > 0) vertices.set([ x * radiusTop, side, y * radiusTop ], cnt * 3)
+        else vertices.set([ x * radiusBottom, side, y * radiusBottom ], cnt * 3)
+        if (smooth) normals.set([ x, 0, y ], cnt * 3)
+        else normals.set([ normalX, 0, normalY ], cnt * 3)
+        uv.set([ (i + j) / edges, side + 0.5 ], cnt * 2)
+        cnt++
+      }
+    }
+    const s1 = s + 1, s2 = (s + 2) % (edges * 4), s3 = (s + 3) % (edges * 4)
+    indices.set([ s, s1, s2, s3, s2, s1 ], indicesCnt)
+    indicesCnt += 6
+  }
+  for (const side of sides) {
+    const center = cnt
+    vertices.set([ 0, side, 0 ], cnt * 3); normals.set([ 0, side * 2, 0 ], cnt * 3); cnt++
+    for (let i = 0; i < edges; i++) {
+      const x = Math.cos(i / edges * Math.PI * 2), y = Math.sin(i / edges * Math.PI * 2)
+      if (side > 0) vertices.set([ x * radiusTop, side, y * radiusTop ], cnt * 3)
+      else vertices.set([ x * radiusBottom, side, y * radiusBottom ], cnt * 3)
+      normals.set([ 0, side * 2, 0 ], cnt * 3)
+      if (side < 0) indices.set([ center, center + i + 1, center + 1 + ((i + 1) % edges) ], indicesCnt)
+      else indices.set([ center + 1 + ((i + 1) % edges), center + i + 1, center ], indicesCnt)
+      indicesCnt += 3
+      cnt++
+    }
+  }
+  return new Geometry(vertices, normals, indices, uv)
+}
+
+// --- plane ---
+export type PlaneOptions = { normal?: Vec3Like }
+const createPlane = (options: PlaneOptions = {}): Geometry => {
+  const normal: Tup3 = options.normal ? [ cx(options.normal), cy(options.normal), cz(options.normal) ] : [ 0, 0, 1 ]
+  const vertices = new Float32Array(4 * 3)
+  const normals = new Float32Array(4 * 3)
+  const uvs = new Float32Array(4 * 2)
+  const sides = [ -0.5, 0.5 ]
+  let cnt = 0
+  let upVector: Tup3, rightVec: Tup3
+  if (normal[1] === 0 && normal[2] === 0) { upVector = [ 0, 1, 0 ]; rightVec = [ 0, 0, -normal[0] ] }
+  else if (normal[0] === 0 && normal[2] === 0) { upVector = [ 0, 0, 1 ]; rightVec = [ -normal[1], 0, 0 ] }
+  else if (normal[0] === 0 && normal[1] === 0) { upVector = [ 0, 1, 0 ]; rightVec = [ normal[2], 0, 0 ] } // тут было верно
+  else {
+    const temp: Tup3 = Math.abs(normal[0]) < 0.5 ? [ 1, 0, 0 ] : [ 0, 0, 1 ]
+    upVector = normalize(cross(temp, normal))
+    rightVec = normalize(cross(upVector, normal))
+  }
+  for (const a of sides) {
+    for (const b of sides) {
+      normals.set(normal, cnt * 3)
+      uvs.set([ a + 0.5, b + 0.5 ], cnt * 2)
+      vertices.set([
+        rightVec[0] * a + upVector[0] * b,
+        rightVec[1] * a + upVector[1] * b,
+        rightVec[2] * a + upVector[2] * b,
+      ], cnt * 3)
+      cnt++
+    }
+  }
+  const indices = new Uint16Array([ 2, 1, 0, 1, 2, 3 ])
+  return new Geometry(vertices, normals, indices, uvs)
+}

package/runtime/sdk/gl/Light.ts

@@ -0,0 +1,37 @@
+// Lights. Currently a directional sun (the engine's primary light). Add it to a scene like any node.
+
+import { Color, type ColorInput } from "../core/color"
+import type { Vec3Like } from "../math/vec"
+import { Node } from "./Node"
+
+export type SunOptions = {
+  /** Light direction (points where the light travels). Defaults to a typical key-light angle. */
+  direction?: Vec3Like
+  /** Luminous intensity. */
+  intensity?: number
+  color?: ColorInput
+  /**
+   * Shadow quality (default 1):
+   *   0 - no shadows
+   *   1 - standard (1024 shadow map, hard PCF edges)
+   *   2 - high (2048 + stable, soft contact-hardening edges)
+   *   3 - best (4096 + stable, PCSS soft shadows)
+   * Higher values cost more GPU/memory.
+   */
+  shadowsQuality?: 0 | 1 | 2 | 3
+}
+
+export class Light extends Node {
+  /** A directional sun light. */
+  static sun(options: SunOptions = {}): Light {
+    const light = new Light()
+    const [ dx, dy, dz ] = options.direction ?? [ 0.548267, -0.473983, -0.689016 ]
+    _creator.createSunLight(
+      light.id, dx, dy, dz,
+      options.intensity ?? 100000,
+      Color.toPackedRgb(options.color ?? 0xffffff),
+      options.shadowsQuality ?? 1,
+    )
+    return light
+  }
+}

package/runtime/sdk/gl/Material.ts

@@ -0,0 +1,124 @@
+// A material instance over creator-gl. Uniforms are set through a Proxy that lowers each JS value to
+// the right native uniform call. The common materials are static factories (Material.lit/unlit/
+// video/shadow); Material.load brings in a custom compiled shader. Ported from worker/src/Material.ts,
+// with the Lit/Unlit/... subclasses collapsed into factories and color accepting any ColorInput.
+
+import { Color, type ColorInput } from "../core/color"
+import { fetch, type FetchResponse } from "../runtime/fetch"
+import { Texture } from "./Texture"
+
+type UniformValue = string | Texture | number | boolean | number[] | Float32Array | null
+
+const applyUniform = (id: number, key: string, value: UniformValue): void => {
+  if (typeof value === "string") {
+    if (value.length > 7) _creator.setUniformRgba(id, key, parseInt(value.slice(1), 16))
+    else _creator.setUniformRgb(id, key, parseInt(value.slice(1), 16))
+  } else if (typeof value === "number") {
+    _creator.setUniformFloat(id, key, value)
+  } else if (typeof value === "boolean") {
+    _creator.setUniformBoolean(id, key, value)
+  } else if (value instanceof Texture) {
+    _creator.setUniformTexture(id, key, value._id, value.wrapS, value.wrapT)
+  } else if (value instanceof Float32Array) {
+    _creator.setUniformArray(id, key, value)
+  } else if (Array.isArray(value)) {
+    _creator.setUniformArray(id, key, Float32Array.of(...value))
+  } else {
+    _creator.setUniformNull(id, key)
+  }
+}
+
+export type MaterialColorOptions = { color?: ColorInput, map?: Texture | null }
+
+export class Material {
+  /** @internal native material-instance handle. */
+  _id: number
+  readonly shader: FetchResponse | "unknown"
+  readonly uniforms: Record<string, UniformValue>
+
+  private _colorKey: string | null = null
+  private _useMapFlag = true
+
+  constructor(shader: FetchResponse | number) {
+    if (typeof shader === "number") {
+      this.shader = "unknown"
+      this._id = shader
+    } else {
+      this.shader = shader
+      this._id = _creator.createMaterial((shader as any)._id)
+    }
+    const store: Record<string, UniformValue> = {}
+    const id = () => this._id
+    this.uniforms = new Proxy(store, {
+      get: (t, k: string) => t[k],
+      set: (t, k: string, v: UniformValue) => { t[k] = v; applyUniform(id(), k, v); return true },
+    })
+  }
+
+  /** Set a uniform (chainable). */
+  set(key: string, value: UniformValue): this {
+    this.uniforms[key] = value
+    return this
+  }
+
+  set color(c: ColorInput) {
+    if (this._colorKey) this.uniforms[this._colorKey] = Color.toHexString(c)
+  }
+
+  set map(value: Texture | null) {
+    if (value === null) {
+      if (this._useMapFlag) this.uniforms.useBaseColorMap = false
+    } else {
+      this.uniforms.baseColorMap = value
+      if (this._useMapFlag) this.uniforms.useBaseColorMap = true
+    }
+  }
+
+  // --- factories ---
+
+  /** PBR lit material. */
+  static lit(options: MaterialColorOptions = {}): Material {
+    // The fetchLocal literal must be inline so the compiler's preload header captures the shader name.
+    const m = new Material({ _id: _creatorUtils.fetchLocal("lit.filamat") } as any)
+    m._colorKey = "baseColor"
+    if (options.color !== undefined) m.color = options.color
+    if (options.map) m.map = options.map
+    return m
+  }
+
+  /** Unlit (flat) material. */
+  static unlit(options: MaterialColorOptions = {}): Material {
+    const m = new Material({ _id: _creatorUtils.fetchLocal("unlit.filamat") } as any)
+    m._colorKey = "baseColor"
+    if (options.color !== undefined) m.color = options.color
+    if (options.map) m.map = options.map
+    return m
+  }
+
+  /** Material that samples a VideoPlayer's texture. */
+  static video(map?: Texture): Material {
+    const m = new Material({ _id: _creatorUtils.fetchLocal("video.filamat") } as any)
+    m._useMapFlag = false
+    if (map) m.uniforms.baseColorMap = map
+    return m
+  }
+
+  /** Shadow-catcher material (transparent except where shadows fall). */
+  static shadow(color: ColorInput = "#000000aa"): Material {
+    const m = new Material({ _id: _creatorUtils.fetchLocal("shadow.filamat") } as any)
+    m._colorKey = "color"
+    m.color = color
+    return m
+  }
+
+  /** Load a custom compiled shader (.mat URL) as a material. */
+  static load(url: string): Promise<Material> {
+    return fetch(url, { useOnce: true }).then((resp) => {
+      if (resp.status >= 400) return Promise.reject(new Error(`Failed to fetch shader from ${url}. HTTP ${resp.status}`))
+      return new Material(resp)
+    })
+  }
+
+  /** @internal */
+  static idOf(material: Material): number { return material._id }
+}

package/runtime/sdk/gl/Mesh.ts

@@ -0,0 +1,100 @@
+// A renderable 3D node from raw geometry — the primitive shapes (box/sphere/cylinder/plane) and
+// Mesh.from for a custom Geometry. A GLB import is a different kind: see Model.load.
+
+import { cx, cy, cz, type Vec3Like } from "../math/vec"
+import {
+  Geometry,
+  type CylinderOptions,
+  type PlaneOptions,
+  type SphereOptions,
+} from "./Geometry"
+import { Material } from "./Material"
+import { Node } from "./Node"
+
+/** Common transform/render options every primitive factory accepts. */
+export type MeshOptions = {
+  material?: Material
+  position?: Vec3Like
+  eulerAngles?: Vec3Like
+  scale?: Vec3Like | number
+  name?: string
+  castShadows?: boolean
+  receiveShadows?: boolean
+}
+
+export class Mesh extends Node {
+  private _geometry?: Geometry
+  private _materials: Material[] = []
+
+  constructor(geometry?: Geometry, material?: Material) {
+    super()
+    if (geometry) {
+      const mat = material ?? Material.unlit()
+      this._geometry = geometry
+      this._materials = [ mat ]
+      _creator.setMesh(this.id, Material.idOf(mat), geometry.vertices, geometry.normals, geometry.indices, geometry.uv, geometry._meshKind)
+    }
+  }
+
+  override get geometry(): Geometry | undefined { return this._geometry }
+
+  get material(): Material { return this._materials[0] }
+  set material(m: Material) { this.setMaterial(m, 0) }
+
+  setMaterial(material: Material, index = 0): this {
+    this._materials[index] = material
+    _creator.setMaterial(this.id, Material.idOf(material), index)
+    return this
+  }
+  getMaterial(index = 0): Material | null {
+    const existing = this._materials[index]
+    if (existing) return existing
+    const id = _creator.getMaterial(this.id, index)
+    if (id === 0) return null
+    const mat = new Material(id)
+    this._materials[index] = mat
+    return mat
+  }
+
+  set culling(v: boolean) { _creator.setCulling(this.id, v) }
+  set castShadows(v: boolean) { _creator.setCastShadows(this.id, v) }
+  set receiveShadows(v: boolean) { _creator.setReceiveShadows(this.id, v) }
+
+  // --- factories ---
+
+  static box(options: MeshOptions & { size?: Vec3Like | number } = {}): Mesh {
+    const geo = Geometry.box()
+    const [ sx, sy, sz ] = sizeToVec(options.size ?? 1)
+    if (sx !== 1 || sy !== 1 || sz !== 1) geo.scale(sx, sy, sz)
+    return apply(new Mesh(geo, options.material), options)
+  }
+
+  static sphere(options: MeshOptions & SphereOptions = {}): Mesh {
+    return apply(new Mesh(Geometry.sphere(options), options.material), options)
+  }
+
+  static cylinder(options: MeshOptions & CylinderOptions = {}): Mesh {
+    return apply(new Mesh(Geometry.cylinder(options), options.material), options)
+  }
+
+  static plane(options: MeshOptions & PlaneOptions = {}): Mesh {
+    return apply(new Mesh(Geometry.plane(options), options.material), options)
+  }
+
+  /** Wrap a custom Geometry. */
+  static from(geometry: Geometry, options: MeshOptions = {}): Mesh {
+    return apply(new Mesh(geometry, options.material), options)
+  }
+}
+
+const sizeToVec = (s: Vec3Like | number): [number, number, number] => (typeof s === "number" ? [ s, s, s ] : [ cx(s), cy(s), cz(s) ])
+
+const apply = (mesh: Mesh, o: MeshOptions): Mesh => {
+  if (o.position) mesh.position = o.position
+  if (o.eulerAngles) mesh.eulerAngles = o.eulerAngles
+  if (o.scale !== undefined) mesh.scale = typeof o.scale === "number" ? [ o.scale, o.scale, o.scale ] : o.scale
+  if (o.name !== undefined) mesh.name = o.name
+  if (o.castShadows !== undefined) mesh.castShadows = o.castShadows
+  if (o.receiveShadows !== undefined) mesh.receiveShadows = o.receiveShadows
+  return mesh
+}

package/runtime/sdk/gl/Model.ts

@@ -0,0 +1,40 @@
+// A loaded GLB model — its own node kind (a GLB is a node hierarchy with baked animation clips),
+// distinct from Mesh (raw primitives, no animation). Animation is always present, reached as
+// model.anim:
+//   const hero = await Model.load(asset('./hero.glb'))
+//   hero.anim.play('Run')
+
+import { fetch, type FetchResponse } from "../runtime/fetch"
+import { Node } from "./Node"
+import { ModelAnimation } from "./ModelAnimation"
+
+export class Model extends Node {
+  /** GLB skeletal animation — always present on a Model. */
+  declare readonly anim: ModelAnimation
+
+  constructor(internalId: number) {
+    super(internalId)
+    this.aspect(ModelAnimation)
+  }
+
+  /** Load a GLB model. Returns its root as a Model; play its baked clips via model.anim. */
+  static load(
+    source: string | FetchResponse,
+    options: { culling?: boolean, onProgress?: (p: { loaded: number, total?: number }) => void } = {},
+  ): Promise<Model> {
+    if (typeof source === "string") {
+      return fetch(source, { useOnce: true, onProgress: options.onProgress }).then((resp) => {
+        if (resp.status >= 400) return Promise.reject(new Error(`Failed to load GLB from ${source}. HTTP ${resp.status}`))
+        return Model.load(resp, options)
+      })
+    }
+    return new Promise<Model>((resolve, reject) => {
+      _creator.createGlb((source as unknown as { _id: number })._id, (entityId: number) => {
+        if (entityId === 0) { reject(new Error("Failed to load GLB")); return }
+        const model = new Model(entityId)
+        if (options.culling !== true) _creator.setGlbCulling(entityId, false)
+        resolve(model)
+      }, reject)
+    })
+  }
+}

package/runtime/sdk/gl/ModelAnimation.ts

@@ -0,0 +1,64 @@
+// GLB skeletal animation as an aspect. Auto-attached by Model (a glb always has its clips), so you
+// reach it directly: model.anim.play('Run'). Clips come baked in the glb; play by name or index.
+
+import { Aspect } from "../core/Aspect"
+import { nodeRegistry } from "./Node"
+import type { Model } from "./Model"
+
+let animatorRegistered = false
+const ensureAnimator = (): void => {
+  if (animatorRegistered) return
+  animatorRegistered = true
+  _creator.setOnAnimationComplete((entityId, clipIndex) => nodeRegistry.get(entityId)?._onAnimationComplete(clipIndex) ?? true)
+}
+
+export class ModelAnimation extends Aspect<"anim", Model> {
+  static readonly aspect = "anim"
+
+  private _playing = false
+  private _clip = 0
+  private _speed = 1
+  private _loop = false
+
+  onAttach(): void {
+    this.node._animComplete = (clipIndex) => {
+      if (clipIndex !== this._clip) return true
+      if (!this._loop) { this._playing = false; this.node._emitAnim("completed", clipIndex) }
+      else this.node._emitAnim("loopReached", clipIndex)
+      return this._playing
+    }
+  }
+
+  /** The clips baked into the glb. */
+  get clips(): { name: string, duration: number }[] { return _creator.getGlbAnimations(this.node.id) }
+
+  get playing(): boolean { return this._playing }
+  set playing(value: boolean) {
+    this._playing = value
+    _creator.setAnimation(this.node.id, value, this._clip, this._speed)
+  }
+
+  /** Play a clip by name or index. Chainable. */
+  play(clip?: string | number, options: { loop?: boolean } = {}): this {
+    if (typeof clip === "number") this._clip = clip
+    else if (typeof clip === "string") {
+      const i = this.clips.findIndex((c) => c.name === clip)
+      if (i >= 0) this._clip = i
+    }
+    if (options.loop !== undefined) this._loop = options.loop
+    this.playing = true
+    ensureAnimator()
+    return this
+  }
+  stop(): this { this.playing = false; return this }
+
+  get loop(): boolean { return this._loop }
+  set loop(v: boolean) { this._loop = v }
+  get speed(): number { return this._speed }
+  set speed(v: number) {
+    this._speed = v
+    _creator.setAnimation(this.node.id, this._playing, this._clip, v)
+  }
+  get time(): number { return _creator.getAnimationTime(this.node.id) }
+  set time(v: number) { _creator.setAnimationTime(this.node.id, this._clip, v) }
+}