本文实现的效果是,模型渲染出来后,根据用户点击模型的某部分,将相机定位到鼠标点击的位置,并放大
监听模型点击事件
this.renderer.domElement.addEventListener('click', this.modelMouseClick, false)
点击事件
// 模型的点击事件
modelMouseClick( event ) {
var raycaster = new THREE.Raycaster();
var mouse = new THREE.Vector2();
// 将鼠标位置归一化为设备坐标。x 和 y 方向的取值范围是 (-1 to +1)
mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
raycaster.setFromCamera(mouse, this.camera);
const intersects = raycaster.intersectObjects(this.scene.children);
// 根据它来判断点击的什么,length为0即没有点击到模型
console.log(intersects.length ? intersects[0].object.name : intersects, 'intersects----->>>')
if(intersects.length){
this.handlePosition(intersects[0].object)
}
},
调整相机位置文章来源:https://www.toymoban.com/news/detail-759662.html
// 动态调整相机位置
handlePosition(obj){
let box3 = new THREE.Box3()
box3.expandByObject(obj) // 计算模型包围盒
let size = new THREE.Vector3()
box3.getSize(size) // 计算包围盒尺寸
let center = new THREE.Vector3()
box3.getCenter(center) // 计算一个层级模型对应包围盒的几何体中心坐标
function maxSize(vec3) {
let max
if (vec3.x > vec3.y) {
max = vec3.x
} else {
max = vec3.y
}
if (max > vec3.z) {
} else {
max = vec3.z
}
return max
}
let max = maxSize(size) //包围盒长宽高中最大的一个值,用来表征模型的尺寸
// 1.控制渲染范围,但是不要忘记相机位于模型包围盒之外
this.camera.position.copy(center.clone().addScalar(max))
// 2. 居中渲染:设置相机目标观察点,指向包围盒几何中心
this.camera.lookAt(center)
// 3.注意near和far尺寸控制
this.camera.near = max * 0.1//最好和相机位置或者说包围盒关联,别设置0.1 1之类看似小的值
this.camera.far = max * 300//根据相机位置和包围大小设置,把包围盒包含进去即可,宁可把偏大,不可偏小
this.camera.updateProjectionMatrix()//渲染范围改变,注意更新投影矩阵
this.controls.target.copy(center)
this.controls.update()
},
不过此文的相机调整比较快、生硬,没有那种渐进式的感觉,哪位博主有更好的方法了请在下面留言哦文章来源地址https://www.toymoban.com/news/detail-759662.html
到了这里,关于threejs动态调整相机位置的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!