How To Iterate Through Data Column By Column And Feed Them To A Three.js 3d Model?

I am developing a 3D model using three.js which show the position and orientation of a vehicle using accelerometer and gyroscope. I have an xlsx file containing the data for x, y,

Solution 1:

1. The browser can't handle .xlsx files. Parse it to a JSON file (with node.js) beforehand.
   This script takes data.xlsx from the same directory and outputs it to data.json (you're free to make it more efficient in terms of file size).

const fs = require('fs')
const path = require('path')
const { XlsParser } = require('simple-excel-to-json')

const SECONDS_PER_DAY = 24 * 60 * 60

const json = (new XlsParser()).parseXls2Json(path.resolve(__dirname, 'data.xlsx'));
const data = json[0].map((item) => ({
    time: item.TimeId * SECONDS_PER_DAY,
    rotX: deg2Rad(item.Gyro_X),
    rotY: deg2Rad(item.Gyro_Y),
    rotZ: deg2Rad(item.Gyro_Z),
    accX: item.Accelero_X,
    accY: item.Accelero_Y,
    accZ: item.Accelero_Z,
}))
fs.writeFileSync(path.resolve(__dirname, 'data.json'), JSON.stringify(data))

function deg2Rad(angle) {
    return angle * Math.PI / 180
}

2. When rendering compute the current position by integrating acceleration.

let currentIndex = 0
let time = data[currentIndex].time
let velocity = new THREE.Vector3()
requestAnimationFrame(render);

function render(dt) {
    dt *= 0.001 // in seconds
    time += dt
    document.querySelector("#time").textContent = time.toFixed(2)

    // Find datapoint matching current time
    while (data[currentIndex].time < time) {
        currentIndex++
        if (currentIndex >= data.length) return
    }
    const { rotX, rotY, rotZ, accX, accY, accZ } = data[currentIndex]
    const acceleration = new THREE.Vector3(accX, accY, accZ)
    object.rotation.set(rotX, rotY, rotZ)
    object.position.add(velocity.clone().multiplyScalar(dt)).add(acceleration.clone().multiplyScalar(0.5 * dt ** 2))
    velocity.add(acceleration.clone().multiplyScalar(dt))

    resizeToClient();
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}

You can find everything in a GitHub repo I created: https://github.com/Josef37/threejs-from-xlsx