使用Audio Context对顶点进行位移（THREE.JS R76）

Question

我正在尝试在Three.js中映射AudioContext api的顶点。

现在，我已经成功地使用平面（非着色器）完成了这个过程，但是在尝试将其应用于圆柱体时遇到了问题。由于圆柱体顶点是完整的矢量，而不是平面的0，我不知道如何将它们映射到频率数据上。

我包含了一些额外的功能，供未来查看Audio Context的观众使用。

音频上下文

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);
};

我知道用着色器来实现可能更加合理，但我还不够了解它。我猜你可以把频率数据作为一个统一变量传递进去，但是这样我就又回到了最初的问题，即如何将频率转换为向量。

- Michael Paccione

---

有趣。所以你根据频率数据改变每个顶点的z值。为什么不只依赖于平面的顺序（你可以计算圆柱体），而是依赖于x，y位置来查找频率数据呢？类似这样：Math.floor(cylinderVerts[i].x/cylinderLengthInX * numOfFrequencyDatums) - user01

我不是很理解你的提议，但是单独更改任何 vert.x、vert.y 或 vert.z 都会导致圆柱体消失，这就是为什么我需要更改整个 vector3 的原因。我曾尝试过乘以标量和加上标量，但并没有按照我需要的方式工作。 - Michael Paccione

抱歉如果我表达不清楚。我的意思是让你保留x，y的值，然后更新每个顶点的z值。这将在某种程度上扭曲圆柱体，但可能并不是有用或期望的方式。能否在blo.ocks.org或其他地方发布演示场景？ - user01

相关代码在这里，我很快会回复您一些URL链接，以便实时查看。我尝试过了...... cylinderVert [i] = cylinderVertArray[i].multiplyScalar(frequencyData[i]); .......cylinderVert [i].z = cylinderVert [i].z * frequencyData[i])...... 等等，但它没有按照我的意图进行可视化。我对向量知之甚少，不知道在这里应该做什么。 - Michael Paccione

你没有描述你想让圆柱体的顶点如何行为？在平面上，你将z分量设置为频率*6。我理解这看起来像一个波浪。但对于一个圆柱体，我猜你希望它向外扩展，随着频率增加半径也增加？ - micnil

本质上是随着频率增加位移的振幅增加。不过我现在已经用着色器实现了这个功能。它被深深地隐藏在这里的three.js示例中：http://threejs.org/examples/#webgl_custom_attributes - Michael Paccione

Answer 1

在three.js的示例中发现了一个着色器示例...

https://github.com/mrdoob/three.js/blob/master/examples/webgl_custom_attributes.html

- Michael Paccione