threejs---tween补间动画插件--前端接收物体位置信息进行顺滑动画

• 从后端接收新的位置（newPosition）和四元数旋转（newQuaternion）数据。
• 使用 TWEEN 创建两个补间动画：一个针对位置（positionTween）和另一个针对旋转（rotationTween）。
• 在渲染循环中调用 TWEEN.update() 来更新补间动画。
• 渲染更新后的场景。

// 假设 `object` 是你要移动的 Three.js 物体，
// `newPosition` 是后端发来的新位置信息，
// `newQuaternion` 是后端发来的新四元数旋转信息

const targetPosition = new THREE.Vector3(
                        newPosition.x, 
                        newPosition.y, 
                        newPosition.z
                        );
const targetQuaternion = new THREE.Quaternion(
                         newQuaternion.x, 
                         newQuaternion.y, 
                         newQuaternion.z, 
                         newQuaternion.w
                         );

// 创建位置动画
new TWEEN.Tween(object.position)
  .to({ 
      x: targetPosition.x, 
      y: targetPosition.y, 
      z: targetPosition.z }, 1000)
  .easing(TWEEN.Easing.Quadratic.InOut)
  .start();

// 创建旋转动画
new TWEEN.Tween(object.quaternion)
  .to({
    x: targetQuaternion.x,
    y: targetQuaternion.y,
    z: targetQuaternion.z,
    w: targetQuaternion.w
  }, 1000)
  .easing(TWEEN.Easing.Quadratic.InOut)
  .start();

// 渲染循环
function animate(time) {
  requestAnimationFrame(animate);
  
  // 这里更新 TWEEN 动画
  TWEEN.update(time);
  
  // 然后渲染场景
  renderer.render(scene, camera);
}

// 启动动画循环
animate();