Javascript 如何逐列迭代数据，并将其提供给three.js 3D模型？_Javascript_Html_Excel_Three.js

Javascript 如何逐列迭代数据，并将其提供给three.js 3D模型？

javascript html excel three.js

Javascript 如何逐列迭代数据，并将其提供给three.js 3D模型？,javascript,html,excel,three.js,Javascript,Html,Excel,Three.js,我正在使用three.js开发一个3D模型，该模型使用加速度计和陀螺仪显示车辆的位置和方向。我有一个xlsx文件，其中包含x、y、z、横摇、偏航和俯仰的数据。到目前为止，我已经在随机生成的数据上运行了3D模型，另一方面，我开发了读取xlsx文件并显示数据的代码我的计划是，在读取xlsx文件后，我迭代x列、y列等，并在3D模型代码中使用它们（用真实数据替换随机生成的数据）我的xlsx数据格式如下：以下是文件：这是我从xlsx文件中读取的代码： var parser = new (re

我正在使用three.js开发一个3D模型，该模型使用加速度计和陀螺仪显示车辆的位置和方向。我有一个xlsx文件，其中包含x、y、z、横摇、偏航和俯仰的数据。到目前为止，我已经在随机生成的数据上运行了3D模型，另一方面，我开发了读取xlsx文件并显示数据的代码

我的计划是，在读取xlsx文件后，我迭代x列、y列等，并在3D模型代码中使用它们（用真实数据替换随机生成的数据）

我的xlsx数据格式如下：

以下是文件：

这是我从xlsx文件中读取的代码：

var parser = new (require('simple-excel-to-json').XlsParser)();
var doc = parser.parseXls2Json('data/TestingWithThresholdXLSX.xlsx');
// convert json to string
var docToString = JSON.stringify(doc)
// parsing the JSON string text into a javascript Object
var json = JSON.parse(docToString);
// Loop through the json string
var text;
for (i = 0; i < 100; i++) {
    text = json[0][i]["TimeId"];
    console.log(text)
  }

您可以找到工作代码

我试着将数据读取器代码放在3D模型的javascript代码中，特别是在objects.forEach（（obj）=>）之后，但它从来都不起作用，而且我是javascript的半初学者，因此我非常感谢您对这个问题的帮助

浏览器无法处理

.xlsx

文件。请事先将其解析为JSON文件（使用node.js）。
此脚本从同一目录中获取

data.xlsx

，并将其输出到

data.json

（您可以自由地提高文件大小的效率）

const fs=require（'fs'））
const path=require（'路径'）
const{XlsParser}=require（'simple-excel-to-json'）
常数秒/天=24*60*60
const json=（new XlsParser（））.parseXls2Json（path.resolve（u dirname，'data.xlsx'））；
const data=json[0]。映射（（项）=>({
时间：item.TimeId*每天秒数，
rotX:deg2Rad（陀螺X项），
rotY:deg2Rad（项目陀螺Y），
旋转：除2RAD（项目陀螺Z），
accX:item.Accelero_X，
附件：item.Accelero_Y，
accZ:item.Accelero_Z，
}))
writeFileSync（path.resolve（uu dirname，'data.json'），json.stringify（data））
功能deg2Rad（角度）{
返回角*Math.PI/180
}

渲染时，通过积分加速度计算当前位置

让currentIndex=0
让时间=数据[currentIndex]。时间
设速度=新的3.Vector3（）
请求动画帧（渲染）；
函数渲染（dt）{
dt*=0.001//以秒为单位
时间+=dt
document.querySelector（“#time”）.textContent=time.toFixed（2）
//查找与当前时间匹配的数据点
while（数据[currentIndex]。时间<时间）{
当前索引++
如果（currentIndex>=data.length）返回
}
const{rotX，rotY，rotZ，accX，accY，accZ}=data[currentIndex]
常数加速度=新的三个矢量3（accX、accY、accZ）
object.rotation.set（rotX，rotY，rotZ）
object.position.add（velocity.clone（）.multilyscalar（dt））.add（acceleration.clone（）.multilyscalar（0.5*dt**2））
velocity.add（加速度.clone（）.multilyscalar（dt））
resizeToClient（）；
渲染器。渲染（场景、摄影机）；
请求动画帧（渲染）；
}

您可以在我创建的GitHub repo中找到所有内容：

读取的数据是否正常？数据中的值准确表示什么？gyro_xyz是旋转的euler角，单位为度吗？当加速度未标准化时，为什么会有加速度大小？为了确定位置，必须对加速度进行两次积分才能得到位置。这是完全可能的，我只是不这么认为er如何解释这些值。@atomh33ls是的，它正在工作fine@JosefWittmann是的，陀螺仪xyz是角度（横摇、偏航和俯仰），我应该给它们起个更好的名字。加速计的大小不会被使用，它只是用来提供额外的信息。加速计XYZ是来自传感器的行数据，我没有对其进行任何标准化或预处理。所以加速计XYZ显示加速度的方向和大小（我假设为m/s^2）？

<!DOCTYPE html>
<html>
 <head>
   <meta charset="UTF-8">
   <link rel="stylesheet" type="css" href="css/style.css">
   <script src="https://threejs.org/build/three.min.js"></script>
   <script src= "https://threejs.org/examples/js/controls/OrbitControls.js"></script>
   <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
   <script src="https://requirejs.org/docs/release/2.3.6/comments/require.js" type="text/javascript"></script>
   <script type="module"> import * as THREE from "https://threejsfundamentals.org/threejs/resources/threejs/r122/build/three.module.js"</script>
  </head>

<h1 style="color:red">3D Model Rotation and Translation</h1>
<body>
 <canvas id="canvas" width="1500" height="800" style="border:1px solid #000000;"></canvas>
 <div id="accelPanel"></div>
</body>
<script src="js/index.js"></script>
</html>

function main() {
  const canvas = document.querySelector('#canvas');
  const accelPanel = document.querySelector('#accelPanel');
  const renderer = new THREE.WebGLRenderer({canvas});
  var context = canvas.getContext("2d");
  
  const fov = 60;
  const aspect = 2;  // the canvas default
  const near = 0.1;
  const far = 2000;
  const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
  camera.position.set(0, 50, 1.5);
  camera.up.set(0, 0, 1);
  camera.lookAt(0, 0, 0);
  
  const scene = new THREE.Scene();
  {
    const color = 0xFFFFFF;
    const intensity = 1;
    const light = new THREE.PointLight(color, intensity);
    scene.add(light);
  }
  // an array of objects who's rotation to update
  const objects = [];
  const radius = 3;
  const widthSegments = 3;
  const heightSegments = 3;
  const sphereGeometry = new THREE.BoxGeometry(radius, widthSegments, heightSegments);
  const sunMaterial = new THREE.MeshBasicMaterial({color: "green",wireframe: false}); 
  const sunMesh = new THREE.Mesh(sphereGeometry, sunMaterial);

  var cubeAxis = new THREE.AxesHelper(10);
    sunMesh.add(cubeAxis);

  sunMesh.scale.set(2, 2, 2);
  scene.add(sunMesh);
  objects.push(sunMesh);

  function resizeRendererToDisplaySize(renderer) {
    const canvas = renderer.domElement;
    const width = canvas.clientWidth;
    const height = canvas.clientHeight;
    const needResize = canvas.width !== width || canvas.height !== height;
    if (needResize) {
      renderer.setSize(width, height, false);
    }
    return needResize;
  }
  
  function render(speed) {
    speed *= 0.001;

    if (resizeRendererToDisplaySize(renderer)) {
      const canvas = renderer.domElement;
      camera.aspect = canvas.clientWidth / canvas.clientHeight;
      camera.updateProjectionMatrix();
    }

    /* This is where I assume the data should be placed*/
    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);
    });   
    renderer.render(scene, camera);
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}
main();