Graphics

Explore three-dimensional models and interactive shader studies.

Change the GLB or glTF source, poster, and description. Orbit, wireframe, and spin are viewer controls inside the preview; they are not component props.

Preview loads when it becomes visible.

Component parameters

idOptional stable figure ID for an attached note.srctitledescriptionposterviewwireframeparameterstrue, false, or an array of view and wireframe.classA CSS class supplied by your own site.

Source code

model.astro

---
import Model from "@alkemdotdev/alkemist-components/model";
---

<Model
  id={""}
  src={"/test/torus-knot.glb"}
  title={"A torus knot"}
  description={"Drag to inspect this generated teaching mesh."}
  poster={"/test/torus-knot.svg"}
  view={"perspective"}
  wireframe={false}
  parameters={false}
  class={""}
/>

Live controls require JavaScript. The initial preview and source remain available. .alk-playground__parameters { display: none; } .alk-playground__grid { grid-template-columns: 1fr; grid-template-areas: 'preview' 'source'; }

Read the Model reference →

Change the frequency and source angle of the interference study. Play the waves inside the preview. This is a fixed study, not an arbitrary shader compiler.

Preview loads when it becomes visible.

Component parameters

idOptional stable figure ID for an attached note.titlefrequencyangleparameterstrue, false, or an array of frequency and angle.class

Source code

shader.astro

---
import Shader from "@alkemdotdev/alkemist-components/shader";
---

<Shader
  id={""}
  title={"Two wave sources"}
  frequency={9}
  angle={24}
  parameters={true}
  class={""}
/>

Read the Shader reference →