当前位置:网站首页>threejs 动态调整相机位置,使相机正好能看到对象
threejs 动态调整相机位置,使相机正好能看到对象
2022-08-02 22:01:00 【K歌、之王】
核心代码
obj为目标对象\ controls 为OrbitControls
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()
边栏推荐
猜你喜欢
随机推荐
IP Protocol (Internet Protocol)
饥荒联机版Mod开发——制作简单的物品(三)
wallys/new product/WiFi6 MiniPCIe Module 2T2R 2×2.4GHz 2x5GHz MT7915 MT7975
MYSQL查看表结构
go rand 包
Yocto系列讲解[实战篇]85 - 制作ubi镜像和自动挂载ubifs文件系统
双轴晶体中的锥形折射
What is the core business model of the "advertising e-commerce" that has recently become popular in the circle of friends, and is the advertising revenue really reliable?
H5网页播放器EasyPlayer.js播放器界面的加载效果无法消失是什么原因?
Byte's internal technical map is amazing and practical
成功解决TypeError: can‘t multiply sequence by non-int of type ‘float‘
牛客刷题:数组排序
【Unity】Unity开发进阶(六)UnityEvent使用与源码解析
【TypeScript】深入学习TypeScript类(下)
SRv6网络演进面临的挑战
You and I will meet the needs of: how to export the data in a MySQL simple ~!Practical!
centos7安装mysql5.7步骤(图解版)
若依如何实现添加水印功能
了解 NFT 质押:Web3 中赚取被动收益的另一种方式
[TypeScript] Deep Learning of TypeScript Classes (Part 1)