Google maps three js overlay view

Questions
, ,
1

image

I am running animation on google maps ThreeJSOverlayView

As the image, the car flips in a specific vector direction

I think I understood it is the problem with the axis. But not sure

async function animationOriginal(index) {
  var obj = originalBusArray[index];
  
  const BUS_BACK = new THREE.Vector3(0,0,1);
  const BUS_FRONT = new THREE.Vector3(0,0,1);

  curve4Line.getPointAt(obj.boxTime, BUS_BACK);
  curve4Line.getPointAt(obj.boxTime + 0.0003, BUS_FRONT);
  
  // moveCamera(BUS_BACK, 0, index);
  
  scene.remove(obj.prevPath);
  var norm = 10
  var tan = curve4Line.getTangent(norm);
  const bus = originalBus.clone();
  bus.position.copy(BUS_BACK);
  bus.lookAt(tan.add(BUS_FRONT));
  bus.position.z = -50;
  scene.add(bus);
  obj.prevPath = bus;

  if (range(points4O[obj.currentStop], BUS_BACK, 30) && !obj.arrival) {
    await sleep(2000);
    obj.arrival = true;
  } else {
    if (obj.arrival === true) {
      obj.currentStop++;
      console.log(obj.currentStop);
    }
    if (range(points4O[obj.currentStop], BUS_BACK, 35)) {
      obj.boxTime += 0.00005;
    } else {
      obj.boxTime += 0.000075;
    }
    obj.arrival = false;
  }
  
  if (obj.boxTime >= 0.9995) {
    window.cancelAnimationFrame(obj.animationRef);
  }
  
  obj.animationRef = window.requestAnimationFrame(
    animationOriginal.bind(animationOriginal, index)
  );
}

This is my code for animation

Thank you