音频上下文的顶点置换(THRE.JS R76)
Vertex Displacment with Audio Context (THREE.JS R76)
我正在尝试从Three.js.中的AudioContext api映射顶点
现在,我已经用平面(非着色器)成功地做到了这一点,但在尝试将其应用于圆柱体时遇到了问题。由于圆柱体顶点是全向量,而不是平面的0,我不知道如何将它们映射到frequencyData。
我将为未来寻找音频上下文的观众提供一些额外的功能。
音频上下文
function audioLink(){
player = document.getElementById('musicPlayer'),
context = new (window.AudioContext || window.webkitAudioContext),
analyser = context.createAnalyser(),
source = context.createMediaElementSource(player);
source.connect(analyser);
analyser.connect(context.destination);
analyser.fftSize = 256;
frequencyData = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteTimeDomainData(frequencyData);
}
这是我的顶部和底部平面代码。。。
function updateVertWave(){
for (var i = 0, len = waveBottom.geometry.vertices.length; i < len; i++) {
waveBottomVert[i].z = frequencyData[i]*6;
waveTopVert[i].z = frequencyData[i]*-6;
}
waveBottom.geometry.verticesNeedUpdate = true;
waveTop.geometry.verticesNeedUpdate = true;
}
被困在这里
function updateVertCylinder(){
for (var i = 0, len = cylinder.geometry.vertices.length; i < len; i++) {
(STUCK)
}
cylinder.geometry.verticesNeedUpdate = true;
cylinder.geometry.computeFaceNormals();
cylinder.geometry.computeVertexNormals();
scene.getObjectByName("cylinder").rotation.y += 0.004;
}
渲染
function render() {
renderFrame = requestAnimationFrame(render);
analyser.getByteFrequencyData(frequencyData);
if (planeViz) {
updateVertWave();
} else {
updateVertCylinder();
}
renderer.render(scene, camera);
};
我知道用着色器这样做更有意义,但我对此还不够了解。我想你会把频率数据作为一个统一的数据传入,但我现在回到了我最初的问题,即频率到矢量的操作。
在三个.js示例中找到了一个着色器示例。。。
https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes.html
相关文章:
- THRE.js编辑器中的鼠标问题
- 更改alphaMap不透明度不会更新(THRE.JS R76)
- 音频上下文的顶点置换(THRE.JS R76)
- THRE.JS中动画的最佳选项
- THRE.js如何停止在2D画布纹理中截断文本
- 如何在THRE.js上更改参数时自动更新网格
- 第一步's与THRE.js:试图将搅拌机模型添加到场景中的问题
- 从对象复制THRE.js矩阵
- Chrome上使用THRE.js的本地映像上的跨源映像加载被拒绝
- 如何在THRE.js中定位纹理图像
- 使用THRE.js通过坐标自定义三维对象
- UIWebView Javascript垃圾收集与THRE.js场景
- THRE.JS动态创建对象
- 使用THRE.js、physijs和Node.js的在线游戏
- 可以'我不明白为什么我的THRE.js对象是部分透明的
- 使用THRE.JS对象的全局数组的Javascript内存管理
- THRE.js-像轨迹球控件一样旋转相机
- 如何在THRE.js中检查场景中是否存在对象
- THRE.JS使面法线垂直于面和外部方向
- 如何使用带有THRE.js的javascript构建3D立方体(没有长方体/立方体几何体)