canvas中的2d纹理对Three.js的更新速度不够快？

我正在尝试创建一个动态纹理，使用屏幕外的画布。这是我的测试用例代码：

预期结果是实例化2个3.Mesh对象，具有2种不同的纹理

实际结果由于某些原因，两个网格对象具有相同的纹理。但是，如果我在第50行添加一个setTimeout，并执行相同的操作，它就会工作

我在这里遗漏了一些基本的东西，因为我无法让它发挥作用。有什么想法吗

使用three.jsr64

您的MyObject没有做您认为它正在做的事情

您正在自调用它，这意味着MyObject只包含您在其中返回的新对象/函数。您基本上覆盖了它的父上下文，但由于第一次有对父画布的有效引用，因此这也将用于下一次调用

没有必要使这些对象过于复杂。请尝试以下方法：

var MyObject = function(data) {

    var _canvas = document.createElement('canvas');
    _canvas.width = 200;
    _canvas.height = 200;

    var _context = _canvas.getContext('2d');
    _context.font = 'bold 20px Helvetica';
    _context.lineWidth = 1;
    _context.fillStyle = 'rgba(255, 255, 255, 1)';
    _context.strokeStyle = 'rgba(255, 255, 255, 1)';
    _context.clearRect(0, 0, _canvas.width, _canvas.height);
    _context.strokeText('n:' + data, 2, 30);

    var _geometry = {
        front: new THREE.PlaneGeometry(200, 200)
    };

    var texture = new THREE.Texture(_canvas);
    texture.needsUpdate = true;

    var material = new THREE.MeshBasicMaterial({
        map: texture
    });

    /// expose properties this way
    this.data = data;
    this.mesh = new THREE.Mesh(_geometry.front, material);

    return this;
};

现在你可以看到，你正在研究两个不同的例子：我没有设置小提琴来测试其他方面——如果它仍然失败，请考虑为我们设置一个小提琴。< / P >

---

现在，对画布、上下文等的引用将对每个实例有效。如果您计划使用其中几个实例，您可以研究使用原型。

好的，谢谢。所以基本上我把我的目标复杂化了。所以基本上我需要为我想要绘制的每个纹理创建一个新的画布和一个新的上下文？考虑到我计划以这种方式制作多个纹理，这不是资源密集型吗？@iwantoski它需要更多的资源来存储不同的图像，但根据画布的大小，它没有必要对系统产生重大影响。在这里的示例中，原始内存为200 x 200 x 4字节或156 kb。