[英]Three.js “webgl-template.html:69 Uncaught TypeError: Cannot read property 'domElement' of undefined" error
[英]Uncaught TypeError: Type error in WebGL using Three.js
我正在使用ThreeAudio.js库使用WebGL和Three.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请让我知道是否也可以发布着色器。
有谁知道我应该如何开始解决这个错误? 有人看到过这种礼物吗? 请告诉我。
好的,我最后自己回答了这个问题。 如果有人偶然发现此问题以寻找类似问题的答案,这就是我的解决方法:
我意识到动画函数是在加载音频源之前被调用的,这意味着音频纹理中没有任何数据。 似乎我正在使用的库(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();
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.