Sphere coordinates display discontinuous images

As the title says, the program uses threejs
code below:

  const mouse = new THREE.Vector2();
  const pointer = new THREE.Vector2();
  window.addEventListener( 'mousemove', onMouseMove );
  function onMouseMove(ev) {
    mouse.x = ev.clientX / window.innerWidth;
    mouse.y = ev.clientY / window.innerHeight;
    ev.preventDefault();
    pointer.x = (ev.clientX / window.innerWidth) * 2 - 1;
    pointer.y = -(ev.clientY / window.innerHeight) * 2 + 1;
  }

  function animate() {
    requestAnimationFrame(animate)
    lightHandle()
    operate()
    render()
    stats.update()
  }

  function render() {
    camera.position.x = observer.x + v.x
    camera.position.y = observer.y + v.y
    camera.position.z = observer.z + v.z
    camera.lookAt(observer)
    renderer.render(scene, camera)
  }

  function operate() {
    omega.x = .5 * Math.PI * (-mouse.x + .5)
    omega.y = .5 * Math.PI * (mouse.y - .5)
    omega.z = .5 * Math.PI * (mouse.x - .5)
    v.x = Math.cos(theta.y + omega.y) * Math.sin(theta.x + omega.x) * .5
    v.y = Math.sin(theta.y + omega.y) * .5
    v.z = Math.cos(theta.y + omega.y) * Math.cos(theta.x + omega.x) * .5
  }

  function motion() { 
    theta.x = (theta.x + omega.x * .1) % (2 * Math.PI)
    theta.y = (theta.y + omega.y * .1) % (2 * Math.PI)
    theta.z = (theta.z + omega.z * .1) % (2 * Math.PI)
  }

  init()
  animate()

Mouse movement animation will jump unnaturally like below

The animation in the video is not continuous

The following video :

https://drive.google.com/file/d/1fpFu89KlFGR-9zxzq1iqYdk60JPJKkxX/view?usp=sharing

animation display smooth and natural.