PlayCanvas + Theatre.js

An example project that demonstrates how to use Theatre.js to animate your objects in PlayCanvas:

PlayCanvas 3D HTML5 Game Engine

Edit:
For those wondering how I bundled Theatre:

I exposed the studio, and t to window in index.js:

import { getProject, types as t } from "@theatre/core";
import studio from "@theatre/studio";

window.getProject = getProject;
window.studio = studio;
window.t = t;

Then bundled with rollup:
rollup.config.js

import { nodeResolve } from '@rollup/plugin-node-resolve';
import { babel } from '@rollup/plugin-babel';
import commonjs from '@rollup/plugin-commonjs';
import replace from '@rollup/plugin-replace';
import { terser } from "rollup-plugin-terser";

export default {
    input: 'src/index.js',
    output: {
        file: 'build/bundle.js',
        format: 'iife'
    },
    // sourceMap: 'inline',
    plugins: [
        nodeResolve({
            jsnext: true,
            main: true,
            browser: true,
        }),
        commonjs(),

        // doesn't work with redux for some reason =(
        replace({
            'process.env.NODE_ENV': JSON.stringify('production')
        }),

        babel({
            exclude: 'node_modules/**'
        }),

        // mangling the studio breaks it :/, client is ok though
        // terser()
    ],
};
5 Likes

Looks awesome! Theater.js is a powerful library.

@LeXXik project is private though, can’t seem to open.

1 Like

Oops, fixed! Thanks!

1 Like

Brilliant, thanks!

1 Like

Nothing seems to be happening when I press play. Has this become broken?

It works. You can press Space to start the animation sequence.