threejs解决相机位置与target距离非常小时滚轮好像滚不动了的现象(同步修改相机target位置)

threejs解决相机位置与target距离非常小时滚轮好像滚不动了的现象(修改target位置)

修改 OrbitControls 源码:

    // 是否允许 滚轮放大查看模型时,自动修改target和相机位置使得相机可以越过模型
    this.enableZoomOver = false;
 
	function handleMouseWheel( event ) {//原代码
      /**
       * 问题:threejs计算缩放量通常与当前相机位置与target距离成比例,当相机位置与target距离小于1时,由于会出现滚轮好像滚不动了的现象 
       * 调整:当相机位置与target距离小于 1 时,同时沿着相机视线方向移动相机和target,保持其相对位置保证能一直滚轮放大查看,缩小恢复正常
       */

      if (scope.enableZoomOver) {
        if (scope.getDistance() < 1) {
          // console.warn('距离小于1了!', scope.target);
          _zoomAtZeroDistance(event.deltaY)
          // console.warn('距离小于1了!新的distance', scope.getDistance());
          return
        }
      }

      //......原代码
}
    /**
     * 零距离缩放逻辑
     */
    function _zoomAtZeroDistance (deltaY) {
      const direction = new Vector3()
      scope.object.getWorldDirection(direction)

      // 计算移动量(反向处理滚轮方向)
      const speed = 0.001 * Math.abs(scope.domElement.clientHeight)
      const moveDelta = deltaY > 0 ? -speed : speed
      // 沿视线方向移动相机
      scope.object.position.addScaledVector(direction, moveDelta)
      scope.target.addScaledVector(direction, moveDelta)
      // 触发更新
      scope.update()
    }

解决zoomIn过近时pan平移移不动:

- let targetDistance = offset.length();
+ // 过近时保证最小平移距离
+ let targetDistance = Math.max(offset.length(), 0.5);
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值