Three Js 疑难问题 之 防止选择的3D Object,视角一直变化的问题

在3D可视化视图中,选择3D对象,查看3D对象是很常见的功能。

同时,双击查3D对象,让其高亮也是很常见的功能。但是在这个过程,如果不断选择同一3D 对象,摄像机跟3D对象的视角一直发生变化。如此,这样的摄像机的效果就很差。

下面解决3D 视角在双击情况下,不去变化视角的方案:

selectObject = objId => {
    this._clearSelection()
    this._setSelectMaterial(objId)

    if (this.systemObj) {
      this.systemObj.material = this.systemobjMaterial
    }

    this.objects.forEach(o => {
      if (o.name === objId.toString()) {
        this.systemObj = o
      }
    })
    this.systemobjMaterial = this.systemObj.material
    this.systemObj.material = this.selectMaterial
    // // 计算相机据计算所有元素的中心的距离
    // let offset =
    //   this.systemObj.geometry.boundingSphere.radius /
    //   Math.sin((Math.PI / 180.0) * this.camera.fov * 0.5)

    // 计算相机的位置
    // let vector = this.camera.position.clone()
    // let dir = vector.normalize()
    // dir.multiplyScalar(offset)
    // let newPos = new Vector3()
    // newPos.addVectors(this.systemObj.geometry.boundingSphere.center, dir)

    let vector = this.camera.position.clone()
    const boundingBox = this.systemObj.geometry.boundingBox
    const center = boundingBox.getCenter(new Vector3())
    const size = boundingBox.getSize(new Vector3)
    const radius = .5 * Math.sqrt(size.x * size.x + size.y * size.y + size.z * size.z)

    const oldcoi = this.systemObj.geometry.boundingSphere.center
    const eye = vector.clone().sub(oldcoi).normalize()
    const fitToViewDistance = radius / Math.tan(MathUtils.degToRad(.5 * this.camera.fov))
    eye.multiplyScalar(fitToViewDistance)
    const position = center.clone().add(eye)
    const target = center

    //设置相机的位置
    this.camera.position.set(position.x, position.y, position.z)
    this.camera.up = new Vector3(0, 1, 0)
    this.camera.lookAt(target)
    this.controls.target = target // 保证相机对准中心后,鼠标的控制点也对应着中心
  }

objId,是网格的ID。方便查找熟悉的。

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值