Can I serialize scene out of the box?

I don’t know why, but I can’t post gif here…

webm -

So really want to parse your current scene state? Like from game, runtime?

So if you want to get this structure by your own, you need to parse entities from entities:list

var entities  = {};'entities:list').map(function(element) {
     return element._data
}).forEach(function(element) {
     entities[element.resource_id] = element;

Other things, such gravity, camera settings and etc you can obtain from I guess.
So if you don’t like Editor at all, you have to abstract from entities:list. I think it’s possible too.

I’m working without editor, so I have no access to function and it’s _data)
So, I have to write something like this

export function serializeEntity(entity) {
    var data = {
        // _guid: entity._guid,
        resource_id: entity._guid,
        enabled: entity.enabled,
        position: entity.getLocalPosition().toArray(),
        rotation: entity.getEulerAngles().toArray(),
        scale: entity.getLocalScale().toArray(),

        tags: entity.tags._list,
        children: => v._guid),
        parent: null,
        components: {}

    if (entity.parent) {
        data.parent = entity.parent._guid;

    if (entity.c && Object.keys(entity.c).length) {
        data.components = serializeComponents(entity);

    return data;

function serializeComponents(entity) {
    var data = {};

    for (let name in entity.c) {
        let component = entity.c[name];
        let cData = data[name] = {};

        for (let name in {
            let val =[name];
            let t = typeof val;
            if (t === 'boolean' || t === 'number' || t === 'string') cData[name] = val;

        if (name === 'camera') {
            Object.assign(cData, {
                clearColor: component.clearColor.toArray(),
                rect: component.rect.toArray(),
        if (name === 'model') {
            Object.assign(cData, {
        if (name === 'light') {
            Object.assign(cData, {
                // material:

    return data;

// -- utils --
pc.Vec2.prototype.toArray = function() { return Array.from(; }
pc.Vec3.prototype.toArray = function() { return Array.from(; }
pc.Vec4.prototype.toArray = function() { return Array.from(; }
pc.Color.prototype.toArray = function() { return Array.from(; }
1 Like

Okay, I just did the same. Now I have parser - it can parse current hierarchy, pack it just like an Editor and throw Json into your console. So you can use my method to build hierarchy back and it works pretty well.

The only thing it can’t - to get components from entity. For now I don’t know how to get it. And also it’s stinky, just a sketch.

Check SceneChange.prototype.getJsonFromCurrentState

1 Like

Well, pc.SceneChange is undefined

Where? is my project.

Open Main 2 scene, SceneChange is script asset

Ah, got it. Anyway, there is no serialization method out of the box. Okay.
Well, my code has component serialization, but you should also add vectors and colors there. And other fields like material, textures or entity pointers

Okay, now my parser is working pretty well.
But I don’t know how to parse scripts.

Since you don’t use Editor, you have to attach scripts by oneself, so just implement it somehow.

If you want to test it:

  1. go to
  2. open main 2 scene in Editor and play
  3. Press 4 to get current scene json in console and save it somewhere (newSceneJson asset for example)
  4. Press 3 to load scene from json file (newSceneJson for now)

I feel like i’ve created Frankenstein :smiley:
And I still think it’s cheating and we should use Editor for such things!

just wanted to say this is great information. I was looking at this myself:

1 Like

Nice. Are you making offline editor?

1 Like

lol, yes that was what I was working towards. Seems we are of like mind, electron was my end target too.

However I’m not sure how far I will take it, mostly exploratory, learning playcanvas/webgl/html5 game engines

playcanvas was the first game engine that worked like my brain works. Superpowers game engine is an inspiration too

At the moment, I’m looking at threejs editor as a potential importer/exporter platform for playcanvas/others. Threejs already has a playcanvas model importer, but I need to explore further

Obviously I do not want to duplicate work. I’ll share more in a few days

What tools/libs are you using for your development stack?

I always use RiotJS for UI components (minimal, build process optional), but that is all I settled on so far

1 Like

Any updates? I’m looking to use Playcanvas for an MMO game, and would love to hear what worked for you as a scene editor (for the backend). Was the three.js editor a good option in the end?

Might be worth starting a new thread with your needs @StanGatarn and start a new discussion :slight_smile:

1 Like