Three.js控制物体朝向,旋转角度

在使用Three.js开发应用中,我们经常需要控制物体朝指定路径移动,那么怎样控制物体的朝向始终时朝着前方或者其他某个角度呢?

答案是使用四元数
var targetPos = new THREE.Vector3(10,10,10)   //目标位置点
var offsetAngle = Math.PI/2  //目标移动时的朝向偏移
var model =  你的三维模型(或者其他物体对象,object3D ,group ,或者mesh对象)

//以下代码在多段路径时可重复执行
var mtx = new THREE.Matrix4()  //创建一个4维矩阵
mtx.lookAt(model.position.clone() , targetPos , model.up) //设置朝向
mtx.multiply(new THREE.Matrix4().makeRotationFromEuler(new THREE.Euler(0 , offsetAngle , 0 )))
var toRot = new THREE.Quaternion().setFromRotationMatrix(mtx)  //计算出需要进行旋转的四元数值

//使用Tween线性改变model的position。此处的action方法Tween官方可能没有,你可以使用Tween的其他方法,只要能线性插值改变position就可以了。
Tween.action(model.position , 1000 , targetPos ,THREE.Tween.linear,function(){
//oncomplete
},function(){
   //onupdate
  model.quaternion.slerp(toRot , 0.2)  //应用旋转。0.2代表插值step。可以做到平滑旋转过渡
}
)


你可能感兴趣的:(Three.js控制物体朝向,旋转角度)