three.js实现拖拽

要想实现拖拽功能需要用到两个库文件

//THREE.TrackballControls()轨迹球控件,最常用的控件,可以使用鼠标轻松的移动、平移,缩放场景。
TrackballControls.js
//DragControls包含两个事件:dragstart、dragend。
DragControls.js

创建TrackballControls 实例并创建控件并绑定到相机上:

/* 轨迹球控件 */
controls = new THREE.TrackballControls( camera );

TrackballControls 有以下几个属性:

/* 属性参数 */
controls.rotateSpeed = 0.2;// 旋转速度
controls.zoomSpeed = 0.2;// 缩放速度
controls.panSpeed = 0.1;// 平controls


controls.staticMoving = false;// 静止移动,为 true 则没有惯性
controls.dynamicDampingFactor = 0.2;// 阻尼系数 越小 则滑动越大

controls.minDistance = 50; // 最小视角
controls.maxDistance = 350;// 最大视角 Infinity 无穷大

最后在循环函数中加入TrackballControls的更新方法

/* 数据更新 */
 function update() {
     controls.update();
 }

操作方法:

你可能感兴趣的:(three.js)