title: how to integrate acceleration and velocity in Three.JS
body: <p>I have acceleration data which I used to retrieve the velocity and displacement as shown below:</p>
  <p><a href="https://i.stack.imgur.com/7FcXY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7FcXY.png" alt="AccVelDisp" /></a></p>
  <p>Assuming Vo = 10 m/s and Xo = 5m</p>
  <p>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.</p>
  <p>Below is how my dataset looks like:</p>
  <p><a href="https://i.stack.imgur.com/76FAx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/76FAx.png" alt="DatasetSample" /></a></p>
  <p><a href="https://drive.google.com/file/d/1aoy6CPyYcuo3eX-gqrO3OPqaYK8P9Imw/view?usp=sharing" rel="nofollow noreferrer">Link for the dataset</a> in JSON format</p>
  <p>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.</p>
  <p>Below is the current code:</p>
  <pre><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 &lt; lo) return lo;
      if (x &gt; hi) return hi;
      return x;
  }
  
  function update()
  {
      //controls.update();
      keyboard.update();         
      // if ( keyboard.pressed(&quot;left&quot;) )   
      //  angle += 0.01;               
      // if ( keyboard.pressed(&quot;right&quot;) )  
      //  angle -= 0.01;               
      if ( keyboard.pressed(&quot;up&quot;) )  
          speed += 1;        
      if ( keyboard.pressed(&quot;down&quot;) )  
          speed -= 1;        
      speed = myclamp (speed, 0, 100.0);      
  }
  </code></pre>
  <p><a href="https://i.stack.imgur.com/RIHcY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RIHcY.png" alt="carMeshModel" /></a></p>
  <p>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.</p>