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