Threejs模型:调整模型的视角

 x、y、z轴的位置

创建盒子 

modelBounds = new THREE.Box3() // 创建一个盒子
// 赋值为每一个模型的构件的盒子 data
if (modelBounds.isEmpty()) {
  modleBounds = data
} else {
  modelBounds.union(data) // 在 box 参数的上边界和已有box对象的上边界之间取较大者,而对两者的下边界取较小者,这样获得一个新的较大的联合盒子
}

 思路是:假设相机位于模型的正上方,那么相机相对于模型的两边的夹角相同,设定一个夹角为60度,那么可以知道相机此时的位置坐标

var size = modelBounds.getSize() // 获取到盒子的宽度,高度,深度
var center = modelBounds.getCenter() // 获取到盒子的中心点位置
var max = modelBounds.max // 获取盒子的最大的位置
var x = center.x
var y = center.y
var z = center.z + size.z / 2 // 使得到的点位置盒子的顶部
var zDis = Math.tan(60 * Math.PI / 180) * (Math.sqrt(Math.pow(max.x - x, 2) + Math.pow(max.y - y, 2) + Math.pow(max.z - z, 2))) // 根据三角公式去获取相机位的z轴相对于盒子的距离
z += zDis // 我们想要俯视模型,那么z轴的值应大于原来的
// 此时获取到的(x, y, z)是俯视模型的位置,且位于模型正上方

想要设置俯仰角,也就是相机的位置与模型的中点'(此时z轴是位于盒子顶部)的夹角为所设置的角度

var theta = (180 - pitch) / 2 // pitch是所设置的俯仰角,因为相机位与模型构成等腰三角形,换算出其他的两个角度
var dis = zDis * Math.cos(theta * Math.PI / 180) * 2 // 根据三角公式换算出第三边
var yDelta = dis * Math.sin(theta * Math.PI / 180)
var zDelta = dis * Math.cos(theta * Math.PI / 180)
y += yDelta
z -= zDelta
// 此时只有y和z轴变化了,x轴不变

想要设置旋转角度,此时只有z轴不变化,只改变x和y轴

var r = Math.sqrt(Math.pow(z - (center.z + size.z / 2), 2) + Math.pow(y - center.y, 2) + Math.pow(x - center.x, 2)) // 这是旋转的园的半径
var alpha = (180 - bearing) / 2 // 顺时针旋转的角度
var dis1 = r * Math.cos(alpha * Math.PI / 180) * 2
var yDelta1 = dis1 * Math.cos(alpha * Math.PI / 180)
var xDelta = dis1 * Math.sin(alpha * Math.PI / 180)
if (self.bearing <= 90) {
  x += xDelta
} else {
  x -= xDelta
}
y -= yDelta1
发布了51 篇原创文章 · 获赞 33 · 访问量 9万+

猜你喜欢

转载自blog.csdn.net/shelbyandfxj/article/details/102474619
今日推荐