Entity

Entity is a JSX wrapper around any three.js class. Where <T.Mesh/> is shorthand for "make me a Mesh", <Entity from={Mesh}/> says the same thing without pre-building a T namespace — useful in libraries, or when the class is only known at runtime.

Conceptually it mirrors Solid's <Dynamic>: a component that takes what to render as a prop rather than baking it into the tag.

Pass a constructor:

<Entity from={Mesh}>
  <Entity from={BoxGeometry} args={[1, 1, 1]} />
  <Entity from={MeshBasicMaterial} args={[{ color: "orange" }]} />
</Entity>

or an instance:

const mesh = new Mesh(new BoxGeometry(1, 1, 1), new MeshBasicMaterial({ color: "orange" }))
<Entity from={mesh} position={[0, 0, 0]} />

Props

Every prop other than from and args is applied via useProps — array conversion, dashed-path nesting (shadow-mapSize-width={1024}), Color string parsing, attach slotting, event-listener registration, and needsUpdate flagging. See useProps for the full conversion table and attach / args / ref semantics.

interface EntityProps {
  from: Constructor | Instance
  args?: ConstructorParameters
  // Plus all three.js object props
}

createEntity

createEntity builds a single typed component from one three.js constructor — the same primitive createT uses to build a whole namespace. Reach for it when you want a one-off component without a full namespace:

import { createEntity } from "solid-three"
import { Mesh } from "three"

const MeshComponent = createEntity(Mesh)

// Equivalent to <T.Mesh /> but without the full namespace
<MeshComponent position={[0, 1, 0]}>
  ...
</MeshComponent>

Manual disposal of instance-entities

When you pass an instance to <Entity from={...}/>, you own its disposal — three.js keeps the resource in memory until you release it. Wrap the instance in autodispose to free it when the component unmounts.

Wrong — box and sphere are never disposed, so they leak:

function Wrong(props: { shape: "box" | "sphere" }) {
  const box = new BoxGeometry()
  const sphere = new SphereGeometry()
  return (
    <Show when={props.shape === "box"} fallback={<Entity from={sphere} />}>
      <Entity from={box} />
    </Show>
  )
}

Good — autodispose releases each geometry on cleanup:

function Good(props: { shape: "box" | "sphere" }) {
  const box = autodispose(new BoxGeometry())
  const sphere = autodispose(new SphereGeometry())
  return (
    <Show when={props.shape === "box"} fallback={<Entity from={sphere} />}>
      <Entity from={box} />
    </Show>
  )
}

See also

• T / createT — the pre-typed namespace form.
• useProps — how every non-from/args prop is applied.
• autodispose — disposing instances you pass to from.