在threejs开发中,不可避免的需要对三维场景进行交互,例如对模型进行旋转,缩放,平移等操作。接下来,我们就聊一聊如何进行三维场景的交互。
控制的对象是谁?
在三维的世界中,如果想达到场景的TRS(translate、rotate、scale)操作,我们其实有两种办法来做到。一种是对模型本身进行TRS操作,通过改变模型的属性,达到视觉上的效果。第二种是对相机进行操作,把相机拉远模型自然缩小了,把相机移动,模型自然就向相反方向移动了。
两种方式各自有各自的特点和使用场景。操作模型,我们可以控制每个模型的TRS,比如在一个家装场景中,我们要对某个家具进行拖动,缩放。操作相机,我们可以对整个场景进行操作,比如拉远相机,查看场景全局外观。两种方式经常也会配合在一起使用。
操作模型
操作模型,首先,选中需要操作的模型。这部分需要,用到我们之前介绍过的拾取操作,首先拾取都某个三维模型,作为选中对象。然后我们才能对选中对象进行操作。第二部分是鼠标及手势的输入及判断。例如我们需要使用鼠标的滚轮触发缩放操作,或者触屏双指进行缩放操作。最后,就是进行模型的属性修改,在threejs中一般使用position,rotate,scale来达到修改模型外观的目的。
我们从最简单的模型缩放来具体讲讲如何实现。
缩放
renderer.domElement.addEventListener("mousewheel", (event) => {
var scaleFactor= 0.001; //鼠标滚轮控制的缩放强度系数
v