PlayCanvas + Theatre.js

Useful Resources
1

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

image
image1579×913 70.2 KB

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()
    ],
};
7 Likes
2

Looks awesome! Theater.js is a powerful library.

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

1 Like
3

Oops, fixed! Thanks!

1 Like
4

Brilliant, thanks!

1 Like
5

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

6

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

7

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

1 Like
8

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;
    sheet.sequence.play();
9

Ok I found a solution :

proj.ready.then(() => sheet.sequence.play());

3 Likes
10

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

11

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