1. 需求

在移動端通過雙指來控制物體的選擇和縮放。旋轉(zhuǎn)通過雙指旋轉(zhuǎn)操作，而縮放通過雙指距離實(shí)現(xiàn)。實(shí)現(xiàn)平臺是小程序基于three.js的AR版。

2. 實(shí)現(xiàn)思路

1. 旋轉(zhuǎn)：兩個手指產(chǎn)生的兩個點(diǎn)可以算出一個向量，那么我就通過程序前后兩幀計(jì)算兩個向量之間的夾角來判斷旋轉(zhuǎn)的角度信息。這里我通過Vector3.angleTo()去求得角度，這個是沒有夾角方向的，所以后面我將兩個向量進(jìn)行叉乘，獲得夾角的方向。

2. 縮放：通過雙指距離判斷縮放的比例。

3. 代碼

1.小程序注冊觸碰的事件 .wxml文件

<canvas
        bindtouchstart="bindtouchStart"
        bindtouchmove="bindtouchMove"    
</canvas>

2.腳本上實(shí)現(xiàn)邏輯 .js文件文章來源地址http://www.zghlxwxcb.cn/news/detail-719420.html

bindtouchStart(event)
  {
    //console.log("touchStart");
    if(event.touches.length===2)
    {
        //旋轉(zhuǎn)的開始觸碰參數(shù),獲取剛觸碰時(shí)的兩個點(diǎn)信息
        var client1X = event.touches[0].clientX;
        var client1Y = event.touches[0].clientY;
        this.start1X = client1X;
        this.start1Y = client1Y;
        var client2X = event.touches[1].clientX;
        var client2Y = event.touches[1].clientY;
        this.start2X = client2X;
        this.start2Y = client2Y;
        this.touchStartEvent = event.touches;

        //縮放的開始觸碰參數(shù)
        var xMove = event.touches[1].clientX-event.touches[0].clientX;
        var yMove = event.touches[1].clientY-event.touches[0].clientY;
        //初始時(shí)雙指距離.注:distance是全局變量，需要在前面聲明出來，我沒有貼這代碼
        distance = Math.sqrt(xMove*xMove+yMove*yMove);
    }
  },
  bindtouchMove(event)
  {
    if(event.touches.length===2)
    {
        //旋轉(zhuǎn)
        //獲取剛開始觸碰時(shí)生成的向量
        var v1=new THREE.Vector3(this.start2X-this.start1X,this.start2Y-this.start1Y,0);
        //獲取實(shí)時(shí)的兩點(diǎn)信息
        var client1X = event.touches[0].clientX;
        var client1Y = event.touches[0].clientY;
        var client2X = event.touches[1].clientX;
        var client2Y = event.touches[1].clientY;
        //獲取實(shí)時(shí)兩點(diǎn)生成的向量
        var v2 = new THREE.Vector3(client2X-client1X,client2Y-client1Y,0);
        //獲取兩個向量產(chǎn)生的夾角
        var angle = v2.angleTo(v1);
        //由于這個夾角只能是正的，所以要確定夾角的方向。使用叉乘來判斷
        v1.cross(v2);
        if(v1.z>0){
            //角度是逆時(shí)針方向的,朝向屏幕外
            angle=-angle;
        }else{
           //角度是順時(shí)針方向的

        }
        //傳遞給下一幀
        this.start1X = client1X;
        this.start1Y = client1Y;
        this.start2X = client2X;
        this.start2Y = client2Y;
        //執(zhí)行旋轉(zhuǎn)操作.獲得角度信息后可自由發(fā)揮
        cameraBusiness.rotaClick(angle);

        //縮放
        var xMove = event.touches[1].clientX-event.touches[0].clientX;
        var yMove = event.touches[1].clientY-event.touches[0].clientY;
        var curDistance = Math.sqrt(xMove*xMove+yMove*yMove);
        var distanceDiff = curDistance-distance;
        //執(zhí)行縮放操作.獲得距離信息后可自由發(fā)揮
        cameraBusiness.scaleClick(distanceDiff);
        distance = curDistance;
    }
  },