我正在使用 Electron 和 Two.js .该应用程序基本上是一个2D级别的编辑器。有 Tile 代表 32x32 游戏中的瓷砖。这里有一组瓷砖对象,我试着用 Two.JS 但事实证明 two 无法找到与不在同一范围内的可渲染内容 two.update()

我试着用 two.makeGroup() 然后在循环平铺对象时,我尝试使用 two.add(newRect) .不走运。

这样做根本不起作用。(超出范围?)

for (let i = 0; i < tiles.length-1; i++) {
    let rect = two.makeRectangle(tiles[i].getX(), tiles[i].getY(), size, size);
    rect.fill = 'rgb('+tiles[i].color[0]+', '+tiles[i].color[1]+', '+tiles[i].color[2]+')';
    rect.noStroke();

}

two.update();

但由于某些原因,这种方法非常有效

let rect = two.makeRectangle(tiles[i].getX(), tiles[i].getY(), size, size);
rect.fill = 'rgb('+tiles[i].color[0]+', '+tiles[i].color[1]+', '+tiles[i].color[2]+')';
rect.noStroke();

two.update();

我的问题是:如何渲染来自不同范围的多个对象?

(不绘制的地方)这个函数是我尝试绘制的地方: https://github.com/idontreallywolf/gyarb_mapper/blob/750eddc6cbb179d359c47b4fc6711c9e79a0472d/renderer.js#L73

编辑:(可以绘制的地方) 我试着添加一个随机函数,它对这个函数有效。由于某种原因,之前的作用域没有(检测到?)

function troll(){
    let rect = two.makeRectangle(100, 100, 100, 100);
    rect.fill = "rgb(255,255,255)";
    rect.stroke = "#f00";
}

troll();
two.update();

更新: