0

I have acceleration data which I used to retrieve the velocity and displacement as shown below:

AccVelDisp

Assuming Vo = 10 m/s and Xo = 5m

I am using three.JS to render a car mesh on the browser that simulates the movement of a vehicle in real-time. According to the acceleration values, the displacement will change and the car will move accordingly.

Below is how my dataset looks like:

DatasetSample

Link for the dataset in JSON format

I built the car mesh model on three.JS and used the keyboard for now to make the mesh accelerate and decelerate. But I would like to know how to integrate the acceleration information to move the car in a smooth motion.

Below is the current code:

var clock = new THREE.Clock();
var scene, renderer, camera;
var controls, keyboard = new KeyboardState();

var toycar;

// state variable of toycar
var pos = new THREE.Vector3(1,0,0);
var angle = 0.9;
var speed = 1;
var planeSize = 100000;
init();
animate();

function init()
{
    var width = window.innerWidth;
    var height = window.innerHeight;

    renderer = new THREE.WebGLRenderer({antialias: true, alpha: true});
    renderer.setClearColor(0x626d73, 1);
    renderer.setSize (width, height);
    document.body.appendChild (renderer.domElement);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera (10, width/height, 1, 5000);
    // camera.position.y = 1;
    // camera.position.z = 1;

    camera.lookAt (new THREE.Vector3(1,0,0));

    var loader = new THREE.OBJMTLLoader();
    loader.load ('https://jyunming-chen.github.io/tutsplus/models/toycar.obj', 'https://jyunming-chen.github.io/tutsplus/models/toycar.mtl', 
       function (object) {
         toycar = object;
         toycar.rotateY(-10.99)
         toycar.rotateZ(-6); //toycar.rotateZ(-10.99);
         // toycar.rotateX(-10);
         scene.add(toycar);
       } );
    
    // add control here (after the camera is defined)
    //controls = new THREE.OrbitControls (camera, render.domElement);
    var gridXZ = new THREE.GridHelper(planeSize, 10);
    gridXZ.setColors( new THREE.Color(0xff0000), new THREE.Color(0xffffff) );
    scene.add(gridXZ);

    var pointLight = new THREE.PointLight (0xffffff);
    pointLight.position.set (10,500,100);
    scene.add (pointLight);

    var ambientLight = new THREE.AmbientLight (0x111111);
    scene.add(ambientLight);
}

function animate()
{
    var dt = clock.getDelta();
    var dir = new THREE.Vector3(1,0,0); // (1,0,0 to move the car right/left)
    dir.multiplyScalar (dt*speed*50);   //dir *= dt*speed;
    dir.applyAxisAngle (new THREE.Vector3(0,0,0), -10);
    pos.add (dir);  //pos = pos + dir;
    
    if (toycar != undefined) { 
        toycar.scale.set (0.1,0.1,0.1);
        toycar.position.set (pos.x, 0, 0);
        toycar.rotation.x = (angle+Math.PI);
        var relativeCameraOffset = new THREE.Vector3 (2500,-90,-10);
        var cameraOffset = relativeCameraOffset.applyMatrix4( toycar.matrixWorld );
        camera.position.x = cameraOffset.x;
        camera.position.y = cameraOffset.y;
        camera.position.z = cameraOffset.z;
        camera.lookAt( toycar.position );
    }

    requestAnimationFrame ( animate );
    update();
    renderer.render (scene, camera);
}

function myclamp(x,lo,hi)
{
    if (x < lo) return lo;
    if (x > hi) return hi;
    return x;
}

function update()
{
    //controls.update();
    keyboard.update();         
    // if ( keyboard.pressed("left") )   
    //  angle += 0.01;               
    // if ( keyboard.pressed("right") )  
    //  angle -= 0.01;               
    if ( keyboard.pressed("up") )  
        speed += 1;        
    if ( keyboard.pressed("down") )  
        speed -= 1;        
    speed = myclamp (speed, 0, 100.0);      
}

carMeshModel

I understand that I need to read the data from the JSON string, but I would like to know an efficient way ofreading the acceleration data and actually make the car in a smooth motion.

Sami
  • 341
  • 7
  • 22
  • What is the unit of time in your JSON? Also, it looks like all of the acceleration values are zero? You might also want to browse [this answer](https://stackoverflow.com/questions/66959776/simple-3d-cube-roll-animations-not-working-with-threejs/66962847#66962847) where I describe tweening position updates over a fixed time period, just as a starting point. – TheJim01 Apr 07 '21 at 20:46
  • time is in ms multiplied by 24*60*60. Not all there, the velocity was constant the majority of the time and the acceleration increased and decreased a little overtime – Sami Apr 08 '21 at 03:20

0 Answers0