Render 3d but use 2d physics

Phaser 3
1

I’m making a 2.5d game where characters would be rendered in 3d, but physics should use 2d.

Has anyone done this?

I tried rendering both, where in the create() function of my main scene I create a new Three.js WebGL Renderer reusing the same canvas:

    const canvas = this.sys.game.canvas;
    this.threeRenderer = new THREE.WebGLRenderer({ canvas, antialias: true });
    this.threeRenderer.setSize(window.innerWidth, window.innerHeight);

And the Game is loaded with:

const config: Phaser.Types.Core.GameConfig = {
  type: Phaser.WEBGL,
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 300, x: 0 },
      debug: true
    }
  },
  scene: [MainScene]
};

new Phaser.Game(config);

But that gives me “THREE.WebGLRenderer: A WebGL context could not be created. Reason: Canvas has an existing context of a different type”. Which also makes sense.

I found some very old posts where people suggested rendering 3d on a separate canvas and then using that canvas as a sprite in the 2d canvas. Given that these threads were very old (2015) I thought there might be a better way today.

Any help is appreciated. Thanks!