Best way to implement a 3D viewer?

[onetrickwolf]

I have a game in Pixi.js.

 

At some point, we would like a 3D viewer to pop up so users can view the 3D versions of items they collected.  It doesn't need to interact with Pixi in anyway and it doesn't need to have a transparent background, it just needs to overlay in a window and spin a 3D object.

 

I tried using three.js on top of Pixi.js but for some reason it always renders under the Pixi.js canvas.

 

I tried create a texture from the three.js canvas and applying it to a Pixi.js sprite but that seems inefficient and it's kind of a mess to destroy and set textures.

 

Recommendations?

 

 

[xerver]

You can reorder the canvases with CSS, likely they jsut weren't z-indexed correctly.

You don't need three.js to just render a small model though. That is MBs of JS just for one small feature. Instead we have a plugin for pixi, called pixi-flip, that adds some perspective transforms to pixi.js that may help you. You can contribute to Patreon to help us get there: https://www.patreon.com/user?u=2384552&u=2384552&ty=h.

Alternatively rendering just a single model should be pretty simple to do yourself in webgl.

[chg]

Random thought, if you go the do it yourself route, the Mesh class might be part way there (I think it only does 2D meshes out of the box with it's Pixi 2d matrixes & shaders??) https://pixijs.github.io/docs/PIXI.mesh.Mesh.html

[onetrickwolf]

Thanks yeah my problem was a z-index I missed in the code.  Will definitely support the Patreon am liking Pixi.js quite a bit!

 

Relative to my project, the ~800KB three.js adds isn't really a big deal, or is there some performance issue I'm not seeing here?  It seems to simplify the process quite a bit but I'll do more research.