使用Javascript在Three.js中每帧更新数据纹理

Question

我一整天都在为一个本应很简单的问题苦恼。我正在构建一个音频可视化器，希望将音频数据数组存储在一个每帧更新的纹理中。根据three.js的文档和示例，通过将其标记为needsUpdate来更新纹理应该非常简单...但它不起作用。它正确地初始化了，但之后就无法更新。

//from the init

var simState = new THREE.PlaneBufferGeometry( 300, 300, 45, 45);

noiseSize =256

data = generateRandom(noiseSize); 

fftTex = new THREE.DataTexture( data, noiseSize, noiseSize, THREE.RGBAFormat);
fftTex.needsUpdate = true;

simUniforms= {
                fftArray : {type: "t", value: fftTex},
                };


var simShaderMaterial = new THREE.ShaderMaterial( {

                    uniforms:       simUniforms,
                    vertexShader:   document.getElementById( 'basicVertexShader' ).textContent,
                    fragmentShader: document.getElementById( 'simFragmentShader' ).textContent,
                    transparent:    true,


                });

testPlane = new THREE.Mesh( simState, simShaderMaterial);


scene.add( testPlane );

animate();


//render 

function render() {

  data = generateRandom(256);//generate random noise of the correct size
  fftTex.needsUpdate = true;

  fftTex.data = data;

  renderer.render( scene, camera );

};


function animate() {

   requestAnimationFrame( animate );

   render();

};

我想应该就这样了。我是否做了一些特别愚蠢的事情？它使用一个自定义的着色器材质，这是正常工作的。非常基础。

<script type="x-shader/x-fragment" id="fragmentShader"> 

#ifdef GL_ES
precision highp float;
#endif


    uniform vec3 color;

    varying float vAlpha;
    varying vec3 vColor;

    varying vec2 vUv;

    void main() {



        gl_FragColor = vec4( vUv.x,vUv.y,1.0, 1.0);

    }

</script>  

任何建议都将不胜感激。

- Seamus Foley

---

我遇到了几乎相同的问题：请参见https://dev59.com/kp7ha4cB1Zd3GeqPfzbm 不幸的是之前没有发现这个问题。 - Nikole

Answer 1

也许可以使用 data.set(generateRandom()) 替代 data = generateRandom()，这样数据对象的引用不会改变。 类似的解决方案已经在 stackoverflow.com/questions/41656520/ 中得到解决。

- Nikole