Skip to main content


For API documentation check here.

<ThreeView> is a Entity View that lets your entities partake in ThreeJS scenes.

In addition to familiarity with ThreeJS, this documentation also assume some familiarity with:

If you don't know them already, check them out. Incredible libraries.

ThreeView as a Facet#

<ThreeView> is used like a normal facet:

<Health />
{/* your @react-three fiber/drei components */}
Heads up!

Notice that we've wrapped a @react-three/fiber <Scene> around everything.

It doesn't matter whether <Scene> or ECS.Provider comes first though.

It can also be queried like a normal facet:

const query = useQuery((e) => e.has(ThreeView));

Child Content#

<ThreeView> should have a single child that is either a @react-three/fiber or @react-three/drei compatible component.

<Torus scale={5}>
<meshBasicMaterial color={red}>

Accessing the view child#

Simply use the ThreeView.object3d property:

const CoolSystem = () => {
const query = useQuery((e) => e.has(ThreeView));
return useSystem((dt) => {
query.loop([ThreeView], (e, [view]) => {
const mesh = view.object3d as Mesh;
// ...

See Entity Views for more information.