How to use pixi3d with pixi-viewport?

Hi,

First of all; great work! This is a very nice piece of tool to be able to use 3d inside pixi! Thanks a lot for this!

At the moment I’m learning all features of it. I’m stumbling on one thing though I can’t find the answer to so far: When adding the Model as a child of a pixi-viewport Container (which does scaling, dragging and all kind of cool stuff to navigate a 2d scene), the Model isn’t moving with it. This does work with other display objects, but unfortunately not with a pixi3d model. At least I can’t get it to work here.

How can we make the Model move and scale with the viewport (preferrably by not changing anything in the 3d object/scene nor the camera, so only its 2d ‘render’ output)

[jnsmalm]

I fiddled around with the functions for texture in PixiJS. Might have found a solution for this. Let me know if it works for you, when maybe I can add it to the API. Also not entirely sure what you mean with PixiJS viewport, is this the same as the canvas?

In this example I render a 3d object using PostProcessingSprite. The sprite is scaled 4 times which makes it blurry by default. I can press A/Z to increase/decrease the resolution which changes the quality of the rendered output without changing the size of the sprite.

let sprite = app.stage.addChild(new PIXI3D.PostProcessingSprite(app.renderer, {
    objectToRender: world,
    width: 128,
    height: 128
  }))

  sprite.scale.set(4)

  function setResolution(resolution) {
    sprite.texture.setResolution(resolution)
    sprite.texture.resize(128, 128, true)
  }

  let resolution = 1
  document.addEventListener("keydown", e => {
    if (e.key === "a") {
      resolution = resolution * 2
      setResolution(resolution)
    }
    if (e.key === "z") {
      resolution /= 2
      setResolution(resolution)
    }
  })

[jnsmalm]

Glad it worked out!