未捕获的TypeError:使用Three.js在WebGL中键入错误

时间:2013-12-16 20:40:26

标签: javascript graphics three.js web-audio

我正在使用WebGL和Three.js构建一个小型音乐可视化工具,使用ThreeAudio.js库将音频转换为传递到着色器的纹理。虽然一切正在运行,但我收到以下错误,我想跟踪:

“未捕获类型错误:输入错误”

然后从我的动画函数,我的渲染函数,到three.js渲染函数,到“l”的东西,到renderBuffer,追溯到“z”。

我的动画功能如下:

function animate() {
 requestAnimationFrame( animate );
 audioTextures.update();

 stats.update();
 render();
}

我的渲染功能如下:

function render(){
 renderer.render( scene, camera );
}

我认为这是我正在创建的网格的一个问题,因为当我注释掉代码以将其添加到场景中时,错误就会消失。

我所拥有的动画领域的代码如下:

audioSource = (new       ThreeAudio.Source()).load('https://api.soundcloud.com/tracks/125098652/stream?client_id=MYCLIENTID').play();
audioTextures = new ThreeAudio.Textures(renderer, audioSource);
audioMaterial = new ThreeAudio.Material(audioTextures, vertexShader, fragmentShader);
audioMesh = new THREE.Mesh(geometry, audioMaterial);
scene.add(audioMesh);

可以在这里找到ThreeAudio github:https://github.com/unconed/ThreeAudio.js 如果发布我的着色器也会有帮助,请告诉我。

有谁知道我应该如何开始解决这个错误?有没有人以这种方式看到它?请告诉我。

1 个答案:

答案 0 :(得分:1)

好的,我最后自己回答了这个问题。万一有人偶然发现这个寻找类似问题的答案,这就是我修复它的方法:

我意识到在加载音频源之前调用了animate函数,这意味着音频纹理中没有任何数据。看起来我正在使用的库(ThreeAudio)处理了异常,在我有限的经验问题中,数据进入着色器往往会破坏一切。

解决方案是在加载音频源后将animate()调用移动到回调函数中。我的代码如下所示:

audioSource = (new ThreeAudio.Source()).load('https://api.soundcloud.com/tracks/125098652/stream?client_id=MYCLIENTID', function(){
clock = new THREE.Clock();
audioSource.play();
audioTextures = new ThreeAudio.Textures(renderer, audioSource);
audioMaterial = new ThreeAudio.Material(audioTextures, vertexShader, fragmentShader);
audioMaterial.uniforms['volume'] = {type: 'f', value: 0};
audioMaterial.uniforms['volume2'] = {type: 'f', value: 0};
audioMaterial.uniforms['volume3'] = {type: 'f', value: 0};

// My custom cube geometry
var geometry = CubeGeometry(audioTextures, 500, 500, 500, 500, 500);

audioMesh = new THREE.Mesh(geometry, audioMaterial);
audioMesh.position.y = -200;
scene.add(audioMesh);

animate();
});