3. js - Поместите динамический c 2D Canvas на PlaneGeometry - PullRequest
2 голосов
/ 30 мая 2020

Итак, у меня есть школьный проект, в котором я должен переделать GameBoy. Для этого я хотел создать модель GameBoy с Three JS (я новичок) и использовать publi c репозиторий эмулятора GameBoy в JavaScript. Итак, я несколько доработал модель GameBoy (все еще нужно добавить кое-что, но я сделаю ее лучше позже), и я решил использовать это репо для эмулятора GameBoy https://github.com/alexaladren/jsgameboy. Это репо работало отлично, когда ему давали холст с идентификатором «display». Но когда я попытался изменить холст на холст, который я сделал в Three JS, он ничего не отображает, вот код, когда я создаю холст:

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);

Вот код, который я отредактировано в эмуляторе, где был упомянут холст «display» по умолчанию:

   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);

PlaneGeometry отображается правильно (я также пробовал BoxGeometry, но с теми же результатами), но игра не отображается на созданном мной холсте.

Мои мысли о том, почему это не работает: - Поскольку Canvas создан в Three JS, похоже, что он не добавлен к элементам DOM и, вероятно, к уже существующему холсту Three JS ? - Может быть, созданный мной холст не обновляется? Но я установил для него CanvasTexture, поэтому он должен обновиться?

Спасибо за вашу помощь.

Обновление: все еще изучаю его, но не нашел решения, пытался найти помощь в 3 разных сервера Discord, которые предоставляют три js Discord, но безуспешно. Возможно, мне придется сделать gameboy stati c во время игры и поместить отображение игры поверх экрана, если я не найду другого решения.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...