react-threeco v1.0.0

Threeco

Threeco provides a simple way to create a render loop inside a React application.
That loop can be used to animate (interactive) 3D and 2D graphics e.g. for a presentation, a web app or a browser game.

What to do with the render loop is up to you. You may create a WebGL or Three.js project or simply animate with the canvas element.

Get started

First install the npm package to your React project:

$ npm i react-threeco

Now you have access to the useThreeco hook:

import {useThreeco} from 'react-threeco';

const MyComponent = () => {
    useThreeco(() => {
        // setup your canvas, scene or whatever

        return {
            // update your values that depend on deltaTime
            onUpdate: deltaTime => {},
            // redraw your canvas
            onRender: () => {},
            // remove listeners, elements from DOM, ...
            onUnmount: () => {}
        };
    });

    return (
        <div>
            Hello World
        </div>
    );
};

export default MyComponent;

Alternatively you can use the Threeco component that works pretty similar:

import {Threeco} from 'react-threeco';

const MyComponent = () => {
    const setup = () => {
        // setup your canvas, scene or whatever

        return {
            // update your values that depend on deltaTime
            onUpdate: deltaTime => {},
            // redraw your canvas
            onRender: () => {},
            // remove listeners, elements from DOM, ...
            onUnmount: () => {}
        };
    };

    return (
        <Threeco setup={setup}>
            Hello World
        </Threeco>
    );
};

export default MyComponent;

Documentation

useThreeco

useThreeco(setup: (...context?: unknown[]) => object, ...context?: unknown[]): object

The useThreeco hook takes a setup function as first argument.
All other arguments (if any) are passed to that setup function.

const arg1 = 'Number:';
const arg2 = 42;

useThreeco(
    (label, num) => {
        return {
            onUpdate: deltaTime => {},
            onRender: () => console.log(`${label} ${num++}`)
        };
    },
    arg1,
    arg2
);

Return

The hook returns an object of the following shape:

const {run, pause, isRunning} = useThreeco(() => ({
    onUpdate: deltaTime => {},
    onRender: () => {},
    autorun: false
}));

Threeco

The Threeco component functionality is similar to that of the useThreeco hook.
It can have the following properties:

<Threeco
    setup={(first, second) => ({onRender: () => {}})} 
    context={['first', 'second']}
    isRunning={true}
/>

The component can have children too.

<Threeco setup={() => ({onRender: () => {}})}>
    <canvas id="canvas" width="800" height="450"></canvas>
</Threeco>

Setup function

The setup function is used to prepare your scene or canvas and register the listeners you need (click, mousedown, touchstart, ...).
It may receive arguments (the context).
The function must then return an object of the following shape: