基于WebGL的音频空间化

我目前正在做一个小项目，我用WebGL渲染一个立方体贴图，然后用“web音频API”应用一些声音

编辑：

由于这个项目非常大，我只想解释一下我在寻找什么。当我加载一个音频文件时，声音就会可视化（看起来像一个立方体）。音频侦听器位置始终处于位置0,0,0。到目前为止，我所做的是，我已经创建了带有

lookAt

和

perspective

的“Camera”（）并且当我将相机从音频发射立方体旋转开时，播放的音频听起来应该不同

我是怎么做到的

每一帧我都将PannerNode（）的方向设置为相机的

上方向向量。以下是“每帧更新”方法（用于声音）：

下面是我的Camera类中的
updateViewProjectionMethod
-方法，在这里我更新了
侦听器的方向：

  updateViewProjMatrix() {
    let gl = Core.mGetGL();
    this._frontVector[0] = Math.cos(this._yaw) * Math.cos(this._pitch);
    this._frontVector[1] = Math.sin(this._pitch);
    this._frontVector[2] = Math.sin(this._yaw) * Math.cos(this._pitch);

    vec3.normalize(this._lookAtVector, this._frontVector);
    vec3.add(this._lookAtVector, this._lookAtVector, this._positionVector);

    mat4.lookAt(this._viewMatrix, this._positionVector, this._lookAtVector, this._upVector);
    mat4.perspective(this._projMatrix, this._fov * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, this._nearPlane, this._farPlane);
    mat4.multiply(this._vpMatrix, this._projMatrix, this._viewMatrix);
    Core.getAudioContext().listener.setOrientation(this._lookAtVector[0], this._lookAtVector[1], this._lookAtVector[2], 0, 1, 0);
}

这条路对吗？我可以听到声音是不同的，如果我旋转相机，但我不确定。我是否必须将得到的
upVector
与当前的
viewProjectionMatrix
相乘？
当前生成的实例：
503服务不可用：没有健康的端点来处理请求。
  updateViewProjMatrix() {
    let gl = Core.mGetGL();
    this._frontVector[0] = Math.cos(this._yaw) * Math.cos(this._pitch);
    this._frontVector[1] = Math.sin(this._pitch);
    this._frontVector[2] = Math.sin(this._yaw) * Math.cos(this._pitch);

    vec3.normalize(this._lookAtVector, this._frontVector);
    vec3.add(this._lookAtVector, this._lookAtVector, this._positionVector);

    mat4.lookAt(this._viewMatrix, this._positionVector, this._lookAtVector, this._upVector);
    mat4.perspective(this._projMatrix, this._fov * Math.PI / 180, gl.canvas.clientWidth / gl.canvas.clientHeight, this._nearPlane, this._farPlane);
    mat4.multiply(this._vpMatrix, this._projMatrix, this._viewMatrix);
    Core.getAudioContext().listener.setOrientation(this._lookAtVector[0], this._lookAtVector[1], this._lookAtVector[2], 0, 1, 0);
}