如何从 ArrayBuffer 构建 Float32Array答案

【问题标题】：How to build Float32Array from ArrayBuffer如何从 ArrayBuffer 构建 Float32Array
【发布时间】：2019-03-29 04:21:12
【问题描述】：

假设我有一个 ArrayBuffer，如下图所示）

//recompute object from vertices and normals
const verticesBuffer:ArrayBuffer = e.data.verticesBufferArray;
const normalsBuffer:ArrayBuffer = e.data.normalsBufferArray;

const vertices = new Float32Array(verticesBuffer);
const normals = new Float32Array(normalsBuffer);

但此时顶点和法线是未定义的。所以，变量 vertices 和 normals 是 undefined 而 verticesBuffer 和 normalBuffer 是好的。

在转换时出现以下错误

const vertices = new Float32Array(verticesBuffer);

未捕获的 RangeError：无效的类型化数组长度：39744

所以问题是如何从 verticesBuffer:ArrayBuffer 传递到 vertices:Float32Array ？

谢谢！

【问题讨论】：

如何将e.data.verticesBufferArray 和e.data.normalsBufferArray 设置为某个值？
@Pointy 它们是通过 WebWorker 发送的，我没有编写代码以避免过多的混乱。数据正确到达。
如果你说值是undefined而不是缓冲区，数据如何正确到达？
@AlbertoValero 你确定吗？ new 表达式永远不会产生 undefined。我们需要minimal reproducible example 来重现这种行为。
@Pointy 忘记转移。传输正确完成（已检查）。问题不在于传输，而在于从 ArrayBuffer 到 Float32Array 的转换。错误在这里： const vertices = new Float32Array(verticesBuffer);

标签： javascript typescript three.js web-worker

【解决方案1】：

  const vertexCount = verticesBuffer.byteLength / 4;
  const normalCount = normalsBuffer.byteLength / 4;

  const vertices = Float32Array.from(verticesBuffer, 0, vertexCount);
  const normals = Float32Array.from(normalsBuffer, 0, normalCount);

【讨论】：

虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高答案的长期价值。