Jump to content

Best way to implement a 3D viewer?


Recommended Posts

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.





Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...