Dynamic 更新three.js中的纹理和几何体

我想弄清楚，一旦纹理被更新，是否有办法获得回调？我正在交换场景中的几何体，但共享基于画布的相同变化的底层纹理，我注意到随着程序运行，随机损坏最终消失。我认为这是由于抖动导致几何体更改与纹理更新不同步

因此，我意识到建立的机制是在纹理和材质上设置is needsUpdate=true，但是我可以知道何时应用了更新，以便将新几何体添加到场景中吗？我想我是在更新实际到达gpu之前添加几何体，并使用旧纹理处理随机帧。这是可能的，还是在绘制场景之前一定要处理纹理更新

如果你能给我指出正确的方向，我将不胜感激

此外，我还向材质添加了一个更新事件侦听器，该侦听器经常被调用，但最终仍然会遇到与几何体更新后发生的纹理更新相关的相同问题

这里有一个例子，我的意思是，一些代码删除。一般的想法是在许多生成的对象之间共享相同的纹理/材质。更新画布，然后将新对象添加到场景中。这在大多数情况下都适用于chrome，但在应用了先前纹理的帧中偶尔会出现小故障

var material, texture, texture_canvas, context;

var frames = [];
var total_frames = 24;
var last_frame = undefined;
var current_frame = 0;
var scene;


function init() {

    // initialize scene, etc
    scene = new THREE.Scene();

    // Set up render etc, omitted

    texture_canvas = document.createElement('canvas');
    texture_canvas.height = 1024;
    texgture_canvas.width = 1024;

    context = texture_canvas.getContext( '2d' );
    context.fillStyle = '#000000';
    context.fillRect( 0, 0,
        texture_canvas.width,
        texture_canvas.height );

    texture = new THREE.Texture( this.texture_canvas );
    texture.minFilter = THREE.LinearFilter;
    texture.magFilter = THREE.LinearFilter;
    texture.generateMipmaps = false;

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

    for (var i=0; i<total_frames; i++) {
         var mesh = new THREE.Mesh( generate_geometry(), material );
         frames.push(mesh);
    }

}

function animate() {


    if (last_frame) {
        scene.remove(frames[last_frame]);
    }
    // Update / generate new canvas
    context.drawImage( generate_image(), 0, 0 );
    texture.needsUpdate = true;
    material.needsUpdate = true;
    frames[current_frame].uvsNeedUpdate = true;
    scene.add(frames[current_frame % total_frames]);
    last_frame = current_frame;
    current_frame++;
    requestAnimationFrame( animate );
}

var材质、纹理、画布纹理、上下文；
var框架=[]；
var total_frames=24；
var last_frame=未定义；
无功电流_帧=0；
var场景；
函数init（）{
//初始化场景等
场景=新的三个。场景（）；
//设置渲染等，省略
texture_canvas=document.createElement（'canvas'）；
纹理_canvas.height=1024；
texgture_canvas.width=1024；
context=texture_canvas.getContext（'2d'）；
context.fillStyle='#000000'；
context.fillRect（0，0，
纹理宽度，
纹理（高度）；
纹理=新的三个纹理（this.texture\u画布）；
texture.minFilter=THREE.LinearFilter；
texture.magFilter=THREE.LinearFilter；
texture.generateMipmaps=false；
material=new THREE.MeshLambertMaterial（{map:texture}）；
对于（var i=0；i）您可能想分享一些您迄今为止所做的工作的代码。因此，我们将能够更好地理解您实际在做什么？我添加了一些示例代码，我认为这些代码可以解决问题。