Threejs DataTexture 不更新

Threejs DataTexture Not Updating

更新:问题是每次都会重新创建 texData 对象,因此丢失了对 DataTexture 的引用。 WestLangley 的解决方案是覆盖 texData 中的数据,而不是重新创建 texData 对象。

我有一个简单的 threejs 场景,在 ShaderMaterial 中有一个 DataTexture。在初始化期间传递给它的数据数组会根据鼠标事件进行更新。但是 DataTexture 似乎没有更新。

我是否错误地分配了制服或纹理数据?或者错误地使用了 needsUpdate 标志?每次删除和重新创建纹理、material、网格和场景对象时,它确实有效,但这实际上不是必需的,因为我从许多我无法重现的示例中看到。

请注意,数据本身更新得很好,只是 DataTexture 没有更新。

// mouse event triggers request to server
// server then replies and this code here is called
// NOTE: this code **is** indeed called on every mouse update!

// this is the updated data from the msg received
// NOTE: texData **does** contain the correct updated data on each event
texData = new Float32Array(evt.data.slice(0, msgByteLength));

// init should happen only once
if (!drawContextInitialized) {

    // init data texture
    dataTexture = new THREE.DataTexture(texData, texWidth, texHeight, THREE.LuminanceFormat, THREE.FloatType);
    dataTexture.needsUpdate = true;

    // shader material
    material = new THREE.ShaderMaterial({
        vertexShader: document.querySelector('#vertexShader').textContent.trim(),
        fragmentShader: document.querySelector('#fragmentShader').textContent.trim(),
        uniforms: {
            dataTexture: { value: dataTexture }
        }
    });

    // mesh with quad geometry and material
    geometry = new THREE.PlaneGeometry(width, height, 1, 1);
    mesh = new THREE.Mesh(geometry, material);

    // scene
    scene = new THREE.Scene();
    scene.add(mesh);

    // camera + renderer setup
    // [...]

    drawContextInitialized = true;

}

// these lines seem to have no effect
dataTexture.needsUpdate = true;    
material.needsUpdate = true;
mesh.needsUpdate = true;
scene.needsUpdate = true;

renderer.render(scene, camera);

更新DataTexture数据时,不要实例化新数组。相反,像这样更新数组元素:

texData.set( javascript_array );

此外,更新纹理数据时唯一需要设置的标志是:

dataTexture.needsUpdate = true;

three.js r.83

由于某种原因,我很难看到对修改的任何更改。无奈之下,我刚刚制作了一个新的 DataTexture 。将 needsUpdate 设置为 true

很重要
imgData.set(updatedData)
var newDataTex = new THREE.DataTexture( imgData,...     
var newDataTex.needsUpdate = true

renderMesh.material.uniforms.texture.value = newDataTex