Phaser3 Text Render Issue with Three.js

[immangrove-supertree]

Version

• Phaser Version:v3.23.0

• Operating system:mac OS

• Browser:chrome / safari / firefox

Description

I am testing three.js with reference to the pager example extern (https://labs.phaser.io/edit.html?src=src/bugs%5Cextern.js).

There was a pager text update rendering issue when using the map for the three.js material parameter.
-> new THREE.MeshBasicMaterial( { map: texture } )

It didn't happen when using color in the three.js material parameter.
-> new THREE.MeshBasicMaterial( { color: 0xff8200 } );

It's not an anti-aliasing issue, it seems to render multiple times.

Is there a solution to the problem?

Example Test Code

var config = {
    width: 800,
    height: 600,
    type: Phaser.AUTO,
    antialias: true,
    parent: 'phaser-example',
    backgroundColor: '#2d2d88',
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var camera;
var scene;
var mesh;
var renderer;
var text;


var game = new Phaser.Game(config);

function preload ()
{
    this.load.image('logo', 'assets/sprites/phaser.png');
    this.load.script('threejs', 'assets/tests/three.min.js');
}

function create ()
{
    this.add.text(10, 10, 'Extern Test 1');

    var e = this.add.extern();

    this.add.image(400, 300, 'logo');
    text = this.add.text(100, 400, 'text_test', { fontFamily: 'Arial', fontSize: 100, color: '#ffffff' });

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );
    camera.position.z = 400;

    scene = new THREE.Scene();

    var texture = new THREE.TextureLoader().load('assets/textures/tiles.jpg');

    var geometry = new THREE.BoxBufferGeometry( 100, 100, 100 );
    var material = new THREE.MeshBasicMaterial( { map: texture } );
    // var material = new THREE.MeshBasicMaterial( { color: 0xff8200 } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

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

    e.render = function (prenderer, pcamera, pcalcMatrix)
    {
        renderer.state.reset();

        renderer.render(scene, camera);
    }

    renderer.autoClear = false;
}

function update ()
{
    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;
    text.setText(mesh.rotation.x.toFixed(5));
    // renderer.render( scene, camera );
}

Additional Information

[photonstorm]

Thank you for submitting this issue. We have fixed this and the fix has been pushed to the master branch. It will be part of the next release. If you get time to build and test it for yourself we would appreciate that.