PlayCanvas + Theatre.js

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

PlayCanvas 3D HTML5 Game Engine

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; = studio;
window.t = t;

Then bundled with rollup:

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: [
            jsnext: true,
            main: true,
            browser: true,

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

            exclude: 'node_modules/**'

        // mangling the studio breaks it :/, client is ok though
        // terser()

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?

1 Like

Is there a way to play the animation automatically ?
For some reason it only works when SPACE BAR is pressed

even though I set

    sheet.sequence.position = 0;;

Ok I found a solution :

proj.ready.then(() =>;


Hi @LeXXik, can you explain how can I add it to my project, what do you mean when you say " I exposed the studio , and t to window in index.js :" and “Then bundled with rollup:”? thanks

Exposing them to window, simply means that studio and t are available in global scope, so you can access them from your PlayCanvas scripts. To add it to your project, just copy/paste the bundle from Theatre.js folder to your project and you are good to go. If you are asking what is studio and t, I would recommend to complete some Theatre.js tutorials to get familiar with how to use it.

1 Like