当前位置: 代码迷 >> 综合 >> Three Js 疑难问题 之 防止选择的3D Object,视角一直变化的问题
  详细解决方案

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

热度:28   发布时间:2024-02-10 15:52:52.0

在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.materialthis.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.boundingBoxconst 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.centerconst 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。方便查找熟悉的。

  相关解决方案