微信小程序中实现对3D模型的单指旋转双指缩放移动

最新推荐文章于 2024-10-15 12:53:08 发布

废柴小z

最新推荐文章于 2024-10-15 12:53:08 发布

阅读量1.3k

点赞数 1

分类专栏：微信小程序&公众号文章标签：微信小程序 javascript 小程序

本文链接：https://blog.csdn.net/qq_34568700/article/details/126407799

版权

微信小程序&公众号专栏收录该内容

34 篇文章 3 订阅

订阅专栏

<canvas id="webgl" canvas-id="webgl" class="webgl" type="webgl" disable-scroll="{{true}}" bindtouchmove='ontouchmove' bindtouchend="ontouchend"></canvas>

let first = true,
    isTwoTouch = false,
    twoFirst = true,
    lastPositon = {},
    lastDistance,
    lastPoint = {},
    steps = 1;
ontouchmove(e) {
        // console.log("e", e);
        let touches = e.touches;
        if (touches.length === 1) {
            if (isTwoTouch) {
                return;
            }
            if (first) {
                lastPositon.x = touches[0].x;
                lastPositon.y = touches[0].y;
                first = false;
            } else {
                let deltaY = (touches[0].y - lastPositon.y) / 100;
                let deltaX = (touches[0].x - lastPositon.x) / 100;
                lastPositon.x = touches[0].x;
                lastPositon.y = touches[0].y;
                currModel.rotation.x += deltaY;
                currModel.rotation.y += deltaX;
            }
        } else if (touches.length === 2) {
            isTwoTouch = true;
            let t1 = touches[0],
                t2 = touches[1];
            if (twoFirst) {
                lastDistance = this.calDistance(t1, t2);
                lastPoint = t1;
                twoFirst = false;
            } else {
                let currDistance = this.calDistance(t1, t2);
                let factor = 0.001 * (currDistance - lastDistance);
                if (Math.abs(factor) < 0.001) {
                    // 移动
                    var disX = (touches[0].x - lastPoint.x) * 0.01;
                    var disY = -(touches[0].y - lastPoint.y) * 0.01;
                    currModel.position.x += disX;
                    currModel.position.y += disY;
                } else {
                    currModel.scale.x += factor;
                    currModel.scale.y += factor;
                    currModel.scale.z += factor;
                }
                lastDistance = currDistance;
                lastPoint.x = touches[0].x;
                lastPoint.y = touches[0].y;
            }
        }
    },
    calDistance(t1, t2) {
        let v1 = new THREE.Vector2(t1.x, t1.y);
        let v2 = new THREE.Vector2(t2.x, t2.y);
        return v1.distanceTo(v2);
    },
    ontouchend() {
        first = true;
        twoFirst = true;
        lastPositon.x = 0;
        lastPositon.y = 0;
        lastPoint.x = 0;
        lastPoint.y = 0;
        isTwoTouch = false;
    },