Livelink React UI

A collection of React components that provide a set of UI components for Livelink.

Installation

Install the React package in your application:

npm install @3dverse/livelink-react-ui

Example

The following example shows how to use the SunPositionPicker component which allows to update the sun position for every connected client in real-time.

import { Livelink, Canvas, Viewport, useEntity } from "@3dverse/livelink-react";
import { SunPositionPicker } from "@3dverse/livelink-react-ui";

function App() {
    return (
        <Livelink token="public_i1-8nmpu9dTKaQvl" sceneId="bfadafe7-7d75-4e8d-ba55-3b65c4b1d994">
            <AppLayout />
        </Livelink>
    );
}

function AppLayout() {
    return (
        <Canvas style={{ width: "100%", height: "100%" }}>
            <Viewport style={{ width: "100%", height: "100%" }}>
                <SunWidget />
            </Viewport>
        </Canvas>
    );
}

const SUN_ENTITY_ID = "23e6b1cc-5e04-42c4-b179-12447556a170" as const;

function SunWidget() {
    const { entity, isPending } = useEntity({ euid: SUN_ENTITY_ID });

    if (!isPending && !entity) {
        console.error("There's no sun entity in the scene");
        return null;
    }

    return (
        <div style={{ position: "absolute", bottom: "5vh", right: "5vh" }}>
            <SunPositionPicker sun={entity} />
        </div>
    );
}

Explanation of the code

SunWidget is a custom component defined below.

The entity ID is copied from the console.

useEntity() returns the entity based on the entity ID (euid).

The sun entity is passed to the SunPositionPicker.