Can not even get started

[djlastnight]

Hello! I am trying to load the drone demo, but no luck so far. I am using pixi 5.3.9 and this code does not seem to work. Unfortunately I can't update pixi to v6, because the project is huge and this will take days and days.

`app.loader.add("assets/buster_drone/scene.gltf")

app.loader.load((loader, resources) => { let model = app.stage.addChild( PIXI3D.Model.from(resources["assets/buster_drone/scene.gltf"].gltf)) })`

the property gltf is always undefined (it is even missing, because the resource is of type Resource). I noticed that there is a static method for loading gltf from array, but I did not try this yet. I guess I should load the bin or the model file there?

Thanks for your time.

Edit. I just tried the 3d cube code. It does not work for me too. Idk what's wrong since Mesh3D extends DisplayObject.

Maybe I am missing some npm package?

Edit2: The cube works with a hack. I cast the cube to any, then to DisplayObject and the code compiles and runs.

[jnsmalm]

Hey,

About loading glTF models. My guess is that you are creating the PixiJS renderer or application before Pixi3D has been loaded. Try require("pixi3d") before creating the PixiJS renderer or application object.

The TypeScript error you are seeing is because Pixi3D uses PixiJS v6 types, and you are using PixiJS v5 types. As you have already noticed, this is only a TypeScript compile time error, Pixi3D is fully compatible with PixiJS v5.3 at runtime. I have to look into this and see if I can figure something out. Thanks for pointing this out!

[djlastnight]

Thanks for the fast reply. I will try what you suggested and I will give feedback.

[djlastnight]

Thank you it worked. Is there a way to load cylinder easily (like the cube in example) or I should import it from glTF file.

[jnsmalm]

The easiest way right now is to create a cylinder in Blender, export it as glTF and then load that in your application. I will probably add more convenience to create common meshes later.

[djlastnight]

Thank you so much. Final question: any recommendations for best performance on low end mobile devices? I will use only 5 rotating cylinders, everything else is 2d.

[jnsmalm]

You will probably not have any performance issue if you are just rendering 5 cylinders, but some general stuffs which impacts performance:

• Number of meshes (and number of vertices for those meshes)
• Complexity of the material/shader used when rendering those meshes.
• Number of lights used in the lighting environment (each material can have it's own lighting environment). Maybe you don't need realtime lighting at all?

Not sure if it works in your case, but for example - maybe you can create those cylinders as a single mesh? You can also use instancing (https://github.com/jnsmalm/pixi3d/blob/develop/examples/src/instancing.js) as it may improve performance when rendering the same object more than once.

In the end, you just have to try with the lowest end devices you are targeting and see if performance is acceptable.

[djlastnight]

You are great! Thank you again. It was pleasure to meet you. Closing this.

Kind regards, Ivan

[jnsmalm]

The cube works with a hack. I cast the cube to any, then to DisplayObject and the code compiles and runs.

I looked closer at this specific error you are getting and unfortunately it's because of an error in PixiJS types (in matrix) before v6.0. Two options:

• Use // @ts-ignore above that line which caused the error.
• Do casting let mesh = app.stage.addChild(<DisplayObject><unknown>Mesh3D.createCube())