来自ThreeJS的OrbitControl中的惯性

2 回答

• 0

  这是在OrbitControls.js中添加惯性的一种非常简单的方法：

  在更新函数结束时（当前第271-272行），您将看到以下两个变量设置为零：

  thetaDelta = 0;
  phiDelta = 0;
  

  改变这一点，以便它们不会立即变为零，而是随着时间的推移变小：

  thetaDelta /= 1.5;
  phiDelta /= 1.5;
  

  而已！

  回复于 2024-05-18T23:42:13+08:00
• 5

  我使用了一种快速而肮脏的方法来编写这种效果 -

  在 OrbitControls.js 中，将此函数添加到主声明中（或任何地方） -

  this.inertiaFunction = function()
  {
      scope.rotateLeft( ( 2 * Math.PI * rotateDelta.x / PIXELS_PER_ROUND * scope.userRotateSpeed )/dividingFactor);
  scope.rotateUp( ( 2 * Math.PI * rotateDelta.y / PIXELS_PER_ROUND * scope.userRotateSpeed )/dividingFactor);
  dividingFactor+=0.5;
  }
  

  在 onMouseDown(event) 函数中，在第一行添加 -

  dividingFactor = 1;
  

  （这样每次点击都会重置因子）

  在 onMouseUp(event) 函数中，在开头添加了这些行 -

  dragging2=false;
  timer = setTimeout(function(){dragging=false;}, 500);
  

  dragging 和 dragging2 是我们在requestAnimFrame函数中使用的两个标志，用于确定鼠标是否已被抬起且500毫秒尚未通过 .

  在主animate（）或requestAnimationFrame（）函数中添加它 -

  if(dragging && !dragging2){ controls.inertiaFunction(); }
  

  这将检查是否（鼠标已被抬起）和（500毫秒尚未通过） -
  调用controls对象的inertiaFunction（）（这是 THREE.OrbitControls 的一个实例）
  对于用户在提升鼠标的500ms内单击的情况，我们使用 timer 对象取消setTimeOut .
  在你的onMouseDown函数中，添加这个 -

  if(dragging)
  {
      clearTimeout(timer);
  }
  

  不要忘记将 dragging ， timer 和 dragging2 以及 dividingFactor 声明为全局变量 . 使用 dividingFactor 和 setTimeout() 中的500ms来改变行进距离和惯性运动的持续时间 .

  回复于 2024-05-18T23:42:13+08:00