Translating a parent container and keeping current camera view

[DubMan1234]

Good day developer:

Is it possible to move just a parent container and only have the effect of translation on the 3D Object.

Here is an example:

    let topLeft = new PIXI3D.Container3D();
    topLeft.x = 0;
    topLeft.y = 0;
    root.addChild(topLeft);

    let camView = new PIXI3D.Container3D();
    camView.x = 0;
    camView.y = 0;
    camView.z = 0;
    topLeft.addChild(camView);

If I modify the topLeft container such as the following:
let topLeft = new PIXI3D.Container3D();
topLeft.x = 600;
topLeft.y = 0;
root.addChild(topLeft);

Its using the 3D coords, anot allowing me to move it in 2D Space, (IE, I just want to translate everything to another point, using the same camera orientation and view.).

If I modify the topLeft container such as the following:
let topLeft = new PIXI3D.Container3D();
topLeft.x = -3;
topLeft.y = 0;
root.addChild(topLeft);

Maybe a visual example will make sense:

Can I go from this

To this:

Using a perspective camera, and just moving around a parent container.

[jnsmalm]

At this time all positions on a 3d container is in world space by default, maybe I could add an option to change that behaviour for a 3d container?

I guess you could create your own class extending for PIXI Container and inside that one to the "screenToWorld" for your 3d object. Otherwise as you said you could use a orthographic camera if that works for you...

[DubMan1234]

Thanks so much,
I think adding an option would be great if you would be able to, in the case with the games we write, it would be nice if I can add a 3D container inside our 2D container and have a 3D object appear there.

I'm not too sure how about writing an extension as I'm still coming to grips with this library.

Would you be able to help with that?

[jnsmalm]

Here is an example how you could create a 2d container with 3d content, this only handles position. You have to figure out scale/rotation if you need it :-)

let app = new PIXI.Application({
  backgroundColor: 0xdddddd, resizeTo: window, antialias: true
})
document.body.appendChild(app.view)

class Container2D extends PIXI.Container {
  constructor() {
    super()
    this._container3D = super.addChild(new PIXI3D.Container3D())
    this.z = 7
  }

  addChild(displayObject) {
    this._container3D.addChild(displayObject)
    return displayObject
  }

  _render() {
    PIXI3D.Camera.main.screenToWorld(
      this.x, this.y, this.z, this._container3D.position)
  }
}

let container2D = app.stage.addChild(new Container2D())

document.onmousemove = (evt) => {
  container2D.position.set(evt.x, evt.y)
}

let mesh = container2D.addChild(PIXI3D.Mesh3D.createCube())
let light = Object.assign(new PIXI3D.Light(), {
  x: -1,
  z: +3,
})
PIXI3D.LightingEnvironment.main.lights.push(light)

let rotation = 0
app.ticker.add(() => {
  mesh.rotationQuaternion.setEulerAngles(0, rotation++, 0)
})

[DubMan1234]

Here is the full code:

You can see the mouse cursor doesn't follow the object. If I remove the width, height from the screenToWorld method, then it doesn't render in the centre. I'm a bit stumped on it.

  let app = new PIXI.Application({
    resizeTo: window, antialias: true
  })
  document.body.appendChild(app.view);
  let _stage = new PIXI.Container();
  app.stage.addChild(_stage);

  let width = 1920;
  let height = 1080;
  let rendererWidth = 1920;

  let root = new PIXI.Container();
  root.x = (rendererWidth - width) / 2;

  //_root.x = (_rendererWidth - _width) / 2;
  _stage.addChild(root);

  class Container2D extends PIXI.Container {
    constructor() {
      super()

      let cont3D = new PIXI3D.Container3D();
      this._container3D = cont3D;
      super.addChild(cont3D);
      this.z = 0;
    }

    addChild(displayObject) {
      this._container3D.addChild(displayObject)
      return displayObject
    }

    _render() {
      let p = new PIXI3D.ObservablePoint3D(function() {
      });
      let position = this.getGlobalPosition();
      //console.log(PIXI3D.Camera.main.position.z);
      //let position = {x: this.x, y: this.y, z: this.z};
      PIXI3D.Camera.main.screenToWorld(
        position.x, position.y, PIXI3D.Camera.main.position.z, p,
        {
          width: width,
          height: height
        });
      this._container3D.position = p;

    }
  }

  let mesh = null;
  if (true) {
    let cont = new Container2D();
    root.addChild(cont)
    cont.position.set(width /2, height /2);


    let camera = PIXI3D.Camera.main;
    document.onmousemove = (evt) => {
      console.log(evt.x + "," + evt.y);
      cont.position.set(evt.x, evt.y);
    };

    let mat = new PIXI3D.StandardMaterial();
    mat.baseColor = new PIXI3D.Color(0,0,0.5,0);
    mesh = cont.addChild(PIXI3D.Mesh3D.createCube(mat))
  }

  if (true) {
    let cont = new PIXI3D.Container3D();
    root.addChild(cont)
    cont.position.set(0, 0,0);

    let camera = PIXI3D.Camera.main;
    /*
    document.onmousemove = (evt) => {
      let p = new PIXI3D.ObservablePoint3D(function() {});
      PIXI3D.Camera.main.screenToWorld(
                evt.x, evt.y, Math.abs(camera.position.z), p);
      //cont.position.set(p.x, p.y, p.z);
      //cont.position.set(evt.x, evt.y);
      //console.log(evt.x + "," + evt.y);
    }*/
    let mesh = cont.addChild(PIXI3D.Mesh3D.createCube())
  }


  PIXI3D.LightingEnvironment.main.lights.push(
    Object.assign(new PIXI3D.Light(), {
      x: 1,
      y: 3,
      z: 3
    }));


  PIXI3D.LightingEnvironment.main.lights.push(
    Object.assign(new PIXI3D.Light(), {
      x: -3,
      y: 0,
      z: 0
    }));

  let l =Object.assign(new PIXI3D.Light(), {
    //  type: PIXI3D.LightType.ambient,
    x: 0,
    y: 0,
    z: 5,
    intensity: 10
  })
  PIXI3D.LightingEnvironment.main.lights.push(l);


  //let orthoSize = 5;
  //PIXI3D.Camera.main.orthographic = true;
  //PIXI3D.Camera.main.orthographicSize = orthoSize;
  //PIXI3D.Camera.main.fieldOfView = 80;
  PIXI3D.Camera.main.position.z = 10;
  //PIXI3D.Camera.main.rotationQuaternion.setEulerAngles(0,180,0);

  let rotation = 0;
  app.ticker.add(() => {
    mesh.rotationQuaternion.setEulerAngles(0, rotation++, 0)
    PIXI3D.Camera.main.position.z += 0.1;
  });

[jnsmalm]

If you give screenToWorld a viewSize (width/height) as you have done like below, it expects the aspect ratio to be the same as the actual renderer width/height. When you create your app you never give it a width and height, which is needed. You can also skip the viewSize thing in screenToWorld and it will use the aspect ratio of the main camera.

let app = new PIXI.Application({
  antialias: true, width: 1920, height: 1080
})

...

PIXI3D.Camera.main.screenToWorld(
      position.x, position.y, PIXI3D.Camera.main.position.z, p,
      {
        width: width,
        height: height
      });

[DubMan1234]

Thanks, I've done what you have said, but its still rendering off the center.

      let position = this.getGlobalPosition();
      PIXI3D.Camera.main.screenToWorld(
        position.x, position.y, PIXI3D.Camera.main.position.z, p);
      this._container3D.position = p;

[jnsmalm]

Work for me with your previous code when I create the app like this:

let app = new PIXI.Application({
  antialias: true, width: 1920, height: 1080
})

[DubMan1234]

Work for me with your previous code when I create the app like this:

let app = new PIXI.Application({
  antialias: true, width: 1920, height: 1080
})

Looks like I have it working now, thanks so much for your time.

[jnsmalm]

I have created a component called MeshSprite which might be of use for this scenario. MeshSprite is pretty much a regular PixiJS sprite which can have an 3D object that gets rendered to the sprite's texture. It would be really good if you would find the time to feedback this component.

You can find an example how MeshSprite can be used here: https://github.com/jnsmalm/pixi3d/blob/develop/examples/src/mesh-sprite.js.

I have not released it yet, so if you want to try it you need to:

git clone https://github.com/jnsmalm/pixi3d.git
cd pixi3d
npm install
npm run build

You will find the build at dist/pixi3d.js. Please let me know if you have any feedback and if it covers your scenario.

[DubMan1234]

This is awesome man, just played a bit with this now. Easy to add a model to a 2D container now.

[jnsmalm]

If you want to use this functionality in the future, it's now called "ObjectRenderingSprite" instead of "MeshSprite".

[jnsmalm]

Realised that I actually already had similar functionality in class PostProcessingSprite. I merged API for ObjectRenderingSprite and PostProcessingSprite, so now only PostProcessingSprite exists which can be used for rendering a 3D object to a 2D sprite.