Question

我正在尝试使用离屏画布创建“动态纹理”。这是我的测试用例代码：https://dpaste.de/EvuZ

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

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

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

使用three.js＃r64

Answer 1

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

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

无需过度复杂化这些对象。尝试这样的事情：

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

现在你可以在this simple test看到你正在处理两个不同的实例（免责声明：我没有设置小提琴来测试其他方面 - 如果它仍然失败，请考虑为我们设置一个小提琴。）< / p>

现在对canvas，context等的引用对每个实例都有效。如果您打算使用其中几个实例，可以考虑使用原型。

来自画布的2d纹理没有为Three.js更新“足够快”？

1 个答案: