ThreeView

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:

<Canvas>
    <ECS.Provider>
        <Entity>
            <Health />
            <ThreeView>
                {/* your @react-three fiber/drei components */}
            </ThreeView>
        </Entity>
    </ECS.Provider>
</Canvas>

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.

<Entity>
    <ThreeView>
        <Torus scale={5}>
            <meshBasicMaterial color={red}>
        </Torus>
    </ThreeView>
</Entity>

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.