PixiJS with ThreeJS

[Jimothy]

Does anyone have experience with setting up PixiJS and ThreeJS together and able to show a quick example?

All the examples I've seen appear to be outdated?

[ivan.popelyshev]

use reset() function of both pixi and three render in your game loop and it'll be fine. Which examples did you find?

For example, I have not shared big project that sorted pixi and three objects in the same scene

[Jimothy]

@ivan.popelyshevI've managed to get something working by doing this in version `0.127.0`

this.threeRenderer.state.reset();
this.threeRenderer.render(this.threeScene, this.threeCamera);
this.threeRenderer.state.reset();

this.pixiRenderer.reset();
this.pixiRenderer.render(this.pixiScene);
this.pixiRenderer.reset();

 

However when i try to enable shadows the ThreeJS screen goes completely black.

this.threeRenderer.shadowMaps.enabled = true

When I remove the Pixi renderer the shadows start working again. Any ideas on how to fix this?

 

Here is the code I'm currently using. Uncommenting line 95 causes the issues

https://gist.github.com/Zyie/e655cc3bd3d42483213620f4c0668108

Edited July 3, 2021 by Jimothy

[ivan.popelyshev]

Any ideas on how to fix this?

most probably threeRender doesnt wholy implement state reset(), so it things that specific texture is bound or framebuffer is bound, e.t.c.

I had problems like that through different versions, usually the best way is to just copy whole WebGLRenderer webgl file and add whatever needed in reset().

I cant help with it right now because i already have many help requests about my plugins in the queue.

Edited July 3, 2021 by ivan.popelyshev

[ivan.popelyshev]

If you find something there - please send them PR to fix reset()

[mcfly]

Hello, just wanted to check if there is any update on this topic and any working examples for pixi v6? I also would like to try integrate three.js (some ready made code) with pixi.
@ivan.popelyshev, is this the suggested way for updating the pixi renderer? Are there any pitfalls/issues that you've encountered based on your experience?
 

this.threeRenderer.state.reset();
this.threeRenderer.render(this.threeScene, this.threeCamera);
this.threeRenderer.state.reset();

this.pixiRenderer.reset();
this.pixiRenderer.render(this.pixiScene);
this.pixiRenderer.reset();

Thank you very much!

[ivan.popelyshev]

I think its better be asked at https://github.com/pixijs/pixijs/discussions , search if there wre any discussions for v6. I remember that people did it.