更新:问题是每次都重新创建texData对象,因此DataTexture的引用丢失了。 WestLangley的解决方案是覆盖texData中的数据,而不是重新创建texData对象。
我有一个简单的threejs场景,在DataTexture
有一个ShaderMaterial
。在初始化期间传递给它的数据数组在鼠标事件上更新。但是DataTexture似乎没有更新。
我错误地分配了制服或纹理数据了吗?或者错误地使用needsUpdate
标志?它在每次删除和重新创建纹理,材质,网格和场景对象时都有效,但这不应该是必要的,因为我从许多例子中看到了我无法再现的例子。
请注意,数据本身很好地更新,而不是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。设置需要更新为true非常重要
imgData.set(updatedData)
var newDataTex = new THREE.DataTexture( imgData,...
var newDataTex.needsUpdate = true
renderMesh.material.uniforms.texture.value = newDataTex