three.js手机端的4种旋转方式

一、前提介绍：

1、我使用three.js开发了一个webgl程序，在手机端的chrome上运行

2、要求是单指移动、双指缩放。我通过下述代码实现

controls.touches = {
	ONE: THREE.TOUCH.PAN,//单指平移
	TWO: THREE.TOUCH.DOLLY_ROTATE//双指旋转和缩放
};

3、下面说的4种旋转方式，都是three.js自带的，只是通过上述代码，变成了双指旋转

二、旋转方式概述

|----------|-------------------|-----------------|----------------------------------------------|
| 方案序号 | 交互 方式 | 交互 是否正常 | 存在问题 |
| 1 | 双手各出1个手指 | 正常 | |
| 2 | 一个手出2个手指，同时左右移动 | 正常 | |
| 3 | 一个手出2个手指，一个动，一个不动 | 50%正常 | 有个小bug： 屏幕下方的指头不动，屏幕上方的指头动 会出现旋转方向与拨动方向相反的问题 |
| 4 | 一个手出2个手指，2个手指都动 | 不正常 | 不跟手，操作费劲，旋转的角度很小 |

三、四种旋转方式的图解

1、双手各出1个手指（ok）

2、一个手出2个手指，同时左右移动（ok）

3、一个手出2个手指，一个动，一个不动（半ok）

正常操作：

屏幕上方 的指头不动，屏幕下方的指头动

异常操作：会导致一个bug：

屏幕下方 的指头不动，屏幕上方的指头动

会出现旋转方向与拨动方向相反的问题

4、一个手出2个手指，2个手指都动（不ok）

有下面一些问题

a、这个手势操作，感觉费了很大的劲，但是旋转角度却比较小

b、有时候操作的时候，却变成了反方向旋转

c、经常会触发放大操作，形成旋转、放大同时起作用。

四、改进方式

1、熟悉three.js的源码

在现有源码基础上改进

2、自己写手势的旋转功能

上面几种情况，都是2个手指的行为，却被逻辑的分为不同操作行为。

自己写的话，需要写很多手势的定义和判断

3、寻找第3方库来引入

现在的很多操作是依赖于three.js的OrbitControls类来实现。

这个类也是实现手势操作的类。

引入新的第3方库，需要考虑和原有功能的兼容性。