Mixing 2D and 3D using Phaser3 and Three.js

[tong3d]

I used pixijs and threejs on the same canvas，through the following code：

pixRenderer.render(this.global.stage)
pixRenderer.reset()
threeRenderer.clearDepth()
threeRenderer.render(this.global.scene, this.global.camera)
threeRenderer.state.reset()
pixRenderer.reset()
pixRenderer.render(this.global.stage, undefined, false)

But I don't know what to do with phaser3，please help，thank you！

[photonstorm]

Use an Extern Game Object and set-up three.js like this:

let view = this.add.extern();

let renderer = new THREE.WebGLRenderer({
    canvas: this.sys.game.canvas,
    context: this.sys.game.context,
    antialias: true
});

renderer.autoClear = false;

view.render = () => {

    renderer.state.reset();

    renderer.render(scene, camera);

};

[tong3d]

Use an Extern Game Object and set-up three.js like this:

let view = this.add.extern();

let renderer = new THREE.WebGLRenderer({
    canvas: this.sys.game.canvas,
    context: this.sys.game.context,
    antialias: true
});

renderer.autoClear = false;

view.render = () => {

    renderer.state.reset();

    renderer.render(scene, camera);

};

Sorry, it doesn't work this way

[tong3d]

This is my code:

var config = {
            type: Phaser.WEBGL,
            width: window.innerWidth,
            height: window.innerHeight,
            physics: {
                default: 'arcade',
                arcade: {
                    gravity: { y: 200 }
                }
            },
            scene: {
                preload: preload,
                create: create
            }
        }
        var game = new Phaser.Game(config)
        function preload ()
        {
            this.load.image('button', './pkc.png', 193, 71);
        }
        let renderer3d
        let scene
        let camera
        let _canvas
        let view
        function create ()
        {
            view=this.add.extern()
            this.add.sprite(200, 300, 'button')
            _canvas=game.canvas
            renderer3d = new THREE.WebGLRenderer({
                antialias: true,
                canvas:_canvas,
                context:game.context
            })
            renderer3d.autoClear=false
            scene = new THREE.Scene();
            // camera
             camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
            camera.position.set(0, 0, 5);
            scene.add(camera);
            // a cube in the scene
            var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),
                new THREE.MeshBasicMaterial({
                    color: 0xff0000
                })
            );
            scene.add(cube);
            view.render = () => {
                renderer3d.state.reset();

                renderer3d.render(scene, camera);

            }

        }

[photonstorm]

The approach I described works, it's exactly how the Phaser3D lib was created (which is available in Patreon along with 32 examples of use), your Three Scene probably isn't correct.

http://labs.phaser.io/view.html?src=src%5Cbugs%5Cextern.js&v=dev

[tong3d]

Yes, I used the problem of the version of three.js, and it can work with the latest version

[Thundros]

@photonstorm : Can someone please help me use a 3D sprite-texture plane with collisions & physics in Phaser 3? I have SCOURED the internet looking for an example & just can't find one... Thank you.

[NouCake]

Use an Extern Game Object and set-up three.js like this:

let view = this.add.extern();

let renderer = new THREE.WebGLRenderer({
    canvas: this.sys.game.canvas,
    context: this.sys.game.context,
    antialias: true
});

renderer.autoClear = false;

view.render = () => {

    renderer.state.reset();

    renderer.render(scene, camera);

};

The example provided seem to have some issues when multiple different meshes are rendered. Therefore I adjusted the render loop like this, which runs smoothly so far.

 view.render = () => {
     renderer.render(scene, camera);
     renderer.resetState();
 };