javascript - 如何从 .xls 文件中检索数据并在 three.js 3D 模型动画中使用它们？

Question

我使用three.js 开发了一个动态3D 立方体，它可以旋转和平移以可视化来自加速度计和陀螺仪的数据。我最初使用随机生成的数据使 3D 立方体旋转和平移。单击JSFiddle查看我创建的示例。

我有两个我正在努力解决的问题，我尝试了多种方法来解决，但它从未按预期工作：

问题1：

我想解析来自 .xls 的数据，其中包含来自加速度计和陀螺仪的样本数据并馈送到 3D 立方体，以便我可以根据给定的值移动。基本上替换下面的代码

objects.forEach((obj) => {
obj.rotation.x = speed+1;
obj.rotation.y = speed+2;
obj.rotation.z = speed+34;
obj.position.x = speed+1;
obj.position.y = speed+2;
obj.position.z = speed+2;
});

使用解析和迭代 .xls 数据中的实际 acc 和 gyro 数据的函数。像这样的东西：

objects.forEach((obj) => {
obj.rotation.x = Gyro_X;
obj.rotation.y = Gyro_Y;
obj.rotation.z = Gyro_Z;
obj.position.x = Accelero_X;
obj.position.y = Accelero_Y;
obj.position.z = Accelero_Z;
});

我尝试将 .xls 转换为 .json，但该过程需要解析文件中的所有数据，然后我可以在 3D 立方体中使用它。这是不可行的，因为在输入 3D 模型之前，我需要等待一段时间，直到获取所有文件。我希望能够依次循环遍历该值以查看 3D 立方体旋转并相应地平移。

数据结构如下图所示：

这就是我使用read-excel-file从 .xls 文件中解析数据的方式

<script>
            var input = document.getElementById('input')

            input.addEventListener('change', function() {
              readXlsxFile(input.files[0], { dateFormat: 'MM/DD/YY' }).then(function(data) {
                // `data` is an array of rows
                // each row being an array of cells.
                document.getElementById('result').innerText = JSON.stringify(data, null, 2)

              }, function (error) {
                console.error(error)
                alert("Error while parsing Excel file. See console output for the error stack trace.")
              })
            })
        </script>

问题2：

我想在画布上可视化加速度计和陀螺仪，如下所示：

我在之前发布的帖子中得到了我的问题的答案。但是当我尝试将解决方案集成到我的代码中时，如下所示，它不起作用，因为它没有按预期在画布上显示任何信息。我认为我没有将 .innerHtml 放在正确的位置，或者我可能错过了其他一些 curial 步骤。

objects.forEach((obj) => {
      obj.rotation.x = speed+1;
      obj.rotation.y = speed+2;
      obj.rotation.z = speed+34;
      obj.position.x = speed+1;
      obj.position.y = speed+2;
      obj.position.z = speed+2;
      
      console.log(obj.position.y);
    });
   
    accelPanel.innerHtml = "Accelerometer:<br>X: " + obj.rotation.x + "<br>Y: " + obj.rotation.y + "<br>Z: " + obj.rotation.z;

如果我的问题有解决方案，我将不胜感激，即使是提示也有助于解决这些问题。这将不胜感激，因为我在这些问题上停留了一段时间。

标签： javascript3dxls