Three.js - Place a dynamic 2D Canvas on a PlaneGeometry

Viewed 156

so I have a school project where I have to remake a GameBoy. For this I wanted to create a GameBoy model with ThreeJS (i'm a beginner) and use a public repo of a GameBoy emulator in JavaScript. So I somewhat finished the GameBoy model (still need some some stuff to be added but i'll make it better later) and I decided to use this repo for the GameBoy emulator https://github.com/alexaladren/jsgameboy. This repo worked perfectly fine when it was given a canvas with an ID "display". But when I tried to change the canvas to the canvas I made in ThreeJS it doesn't display anything, here is the code of when I make the Canvas:

geometry = new THREE.PlaneGeometry( 0.55, 0.45, 0.1 );
for (let index = 0; index < 6; index++) {
    let x2 = document.createElement("canvas");
    let xc2 = x2.getContext("2d");

    x2.width = 320;
    x2.height = 288;
    xc2.fillStyle = "rgba(0, 0, 200, 0.5)";
    x2.style.id = 'display';
    screenCanvas = x2;
    xc2.fillRect(0, 0, x2.width, x2.height);
    let tex2 = new THREE.CanvasTexture(x2);
    screen.push(new THREE.MeshBasicMaterial({
        map: tex2,
        transparent:true,
        opacity:0.3
    }))
    number++;
}

material = new THREE.MeshBasicMaterial({color: 0xA1A935});
mesh = new THREE.Mesh( geometry, screen );
mesh.position.y = 0.25;
mesh.position.z = 0.3;
group.add(mesh);

Here is the code I edited in the emulator where the default "display" canvas was mentioned:

   if(window.gb != undefined){
  clearInterval(gb.interval);
  screenCanvas.getContext("2d").setTransform(1,0,0,1,0,0);
  }
  gb = new GameBoy(arraybuffer);
  gb.displaycanvas = screenCanvas.getContext("2d");
  screenCanvas.getContext("2d").scale(2,2);

The PlaneGeometry is correctly displayed (I also tried BoxGeometry but same results) but the game won't display on the Canvas I created.

My thoughts on why it doesn't work: - Because the Canvas is created in ThreeJS it doesn't seem to be added to the DOM elements and probably to the already existing ThreeJS canvas? - Maybe the canvas I created isn't updating? But I set it to a CanvasTexture so it should update?

Thank you for your help.

Update: Still looking into it but haven’t found a solution, been trying to find help in 3 different Discord servers that provide threejs Discord but no luck. I might have to make the gameboy static while the game is playing and put the game display ontop of the screen if I don’t find another solution.

0 Answers
Related