transformControls.js 配合three.js使

1. 适用需求

在three.js当中,如果需要使用鼠标移动模型的部件,网格,那么可以考虑使用该控制器.

2. 主要功能

移动,旋转,缩放,取消

3. 具体

一般来讲,你需要自定义一个控制阀来定义是否处于当前的移动模式,当然根据自身考虑,只是从代码可读性来讲,搞一个好一点,比如: isOptionMode

let transformControls = new THREE.TransformControls(camera,render,domElement); // 初始化,并传入参数,render.domElement,对于多数控制器来说,就是将控制对象限制在当前操作的canvas中,而不是document.

transformControls.setSpace("world");

if(isOptionMode){

    transformControls.attach(要变换的对象)// 这里一般需要配合raycaster使用,当同时选中多个目标,可以使用mutilAttach

}

function render (){

    ............

    transformControls.update();

}

当你结束了操作,要取消模式的时候,记得detach,使得页面恢复正常的情况