Programatically convert fbx to json for playcavas

Hello lovely people,

Is there a program/API/code/library to convert any of the source file formats(fbx/obj/dwg) into playcanvas’s json format ?

I know it can be done manually by dragging and dropping in the playcanvas editor. But I’m using playcanvas in a way that needs to be integrated to take in any one of the 3D source format to automatically do the transformation.
At the very least I just need the 3D mesh (for now I can live without textures and materials) imported into playcanvas application. I’d love to hear if anyone’s done any work on this and can share that.

Thanks <3

Have you considered using this:

Together with this:

?

1 Like

Thanks @will. I think this might just work !

1 Like

I have implemented this solution, however I am getting an error:

Invalid chunk type found in glb file. Expected 0x4E4F534A, found 0x4a0000bd

Hi @Jordan. Since this thread was started, the core engine has had glTF 2.0 support added to it. So that playcanvas-gltf repo is in the process of being deprecated. If you want to try it out, check out the glb viewer availlable here. Does that load your file? (Note that, at the moment, that viewer just supports glb loading and not unpacked glTF files).

Since that viewer loads a cubemap I changed it to load a model and replaced the .dds file with a .glb like so:

    var glbAsset = new pc.Asset('01.glb', 'model', {
        url: assetsFolder + "01.glb"
    }, {
        rgbm: true
    });

    app.assets.add(glbAsset);
    app.assets.load(glbAsset);
        var glb = new pc.Entity('glb');
        glb.addComponent('model', {
            asset: glbAsset
        });

    // create the orbit camera
    var camera = new pc.Entity("Camera");
    camera.addComponent("camera", {
        fov: 60,
        clearColor: new pc.Color(0.4, 0.45, 0.5)
    });

    // load orbit script
    app.assets.loadFromUrl(
        assetsFolder + "orbit-camera.js",
        "script",
        function (err, asset) {
            // setup orbit script component
            camera.addComponent("script");
            camera.script.create("orbitCamera", {
                attributes: {
                    inertiaFactor: 0.1
                }
            });
            camera.script.create("orbitCameraInputMouse");
            camera.script.create("orbitCameraInputTouch");
            app.root.addChild(glb);
        });

I am not getting any errors but the screen is completely white. This is the glb file I am using which was converted from fbx. Here is the output from that:

FBX2glTF -i ~/Desktop/01Alocasia.fbx -o gltf/01.glb -b
Warning: could not find a image file for texture: Texture.
Warning: could not find a image file for texture: Texture.
Warning: could not find a image file for texture: Texture.
Warning: could not find a image file for texture: Map #10.
Warning: could not find a image file for texture: Map #11.
Warning: could not find a image file for texture: Texture.044.
Warning: could not find a image file for texture: Texture.044.
Warning: could not find a image file for texture: Texture.041.
Warning: could not find a image file for texture: Texture.041.
Warning: could not find a image file for texture: Texture.043.
Warning: could not find a image file for texture: Texture.043.
Warning: could not find a image file for texture: Map #7.
Warning: could not find a image file for texture: Map #8.
Warning: could not find a image file for texture: Texture.039.
Warning: could not find a image file for texture: Texture.039.
Warning: could not find a image file for texture: Texture.039.
Warning: could not find a image file for texture: Texture.
Warning: could not find a image file for texture: Texture.
Warning: could not find a image file for texture: Texture.
Warning: could not find a image file for texture: Map #10.
Warning: could not find a image file for texture: Map #11.
Animation Take 001: [0 - 0]
Warning: animation 'Take 001' has zero channels. Skipping.
Wrote 9494861 bytes of binary glTF to gltf/outalo.glb.

The fbx file was from free3d

Something is wrong with that GLB file. I can’t load it in any glTF viewer (PlayCanvas or otherwise). I re-converted that FBX file (I downloaded it from Free3D) using FBX2glTF and it works fine:

Why did you have to edit the viewer code anyway? Just drag and drop the GLB onto the viewer and it works (as I show above).

When I drag and drop I get the following error:

viewer.js:189 Uncaught TypeError: this.app.assets.loadFromUrlAndFilename is not a function
    at Viewer.load (viewer.js:189)
    at dropHandler (viewer.js:103)

Can you show the output you got from FBX2glTF? I may have a faulty binary

Sure. I couldn’t figure out a good way to share the file with you so I dropped it in a PlayCanvas project:

https://playcanvas.com/editor/scene/904958

You can download it from there.

Forgive me , could you show me the proper way to run the glb viewer from scratch?

Download the files and serve them on a HTTP server (e.g python simple server).

When the glb-viewer is opened this message appears in the console:

playcanvas.js:1 Failed to load resource: the server responded with a status of 404 (File not found)

viewer.js:8 Uncaught ReferenceError: pc is not defined
    at new Viewer (viewer.js:8)
    at main (viewer.js:317)
    at onload ((index):12)

Unless I edit it and include the latest playcanvas-stable.js in which case I get the error I mentioned above.

That’s because you haven’t built the engine. Install NodeJS. Then, at the command line in the root of the engine repo do:

npm install
npm run build

And try again.