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()
    ],
};
6 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.

I’m rather curious, has anyone managed to get this working without the studio initialized?