【Sceneform-EQR】(手势控制器实现)通过手势事件实现在AR/VR等三维场景中的控制模型旋转、平移与缩放

在Sceneform-EQR中实现旋转平移缩放手势

实现在AR/VR等三维场景,通过手势控制模型节点的缩放、平移和旋转。

实现思路

实现模型旋转

Sceneform-EQR(filament\opengl)中采用右手坐标系。通过欧拉角进行旋转采用Z->Y->X的顺序,在这里,我们不采用欧拉角控制旋转,而是采用四元数进行操作。因为四元数可进行插值,也方便后续对旋转操作做手势惯性。

采用四元数表示旋转
  • 实现思路:采用四元数的定义,通过旋转轴和旋转角度去构建四元数

旋转四元数相关定义可参考下面这个链接

链接:四元数:优雅而高效的空间旋转表示方法

实现思路

采样四元数表示旋转 -> 通过旋转轴与旋转角度构造四元数

现已将问题转化为,通过安卓中的MotionEvent事件,构造旋转轴和旋转角度。

  • 示意图:
  • 说明:

记:当前MotionEvent事件的触摸位置为B,上一MotionEvent事件的触摸位置为A。

那么,旋转轴与AB连线垂直,考虑AB的前进方向和右手坐标系,得出旋转轴的方向向量在AB前进方向的左侧。

因此这里,可以直接将AB向量绕点B逆时针旋转90度,得到的新向量即可表示旋转轴。

平面中,一个点(x,y)绕任意点(dx,dy)逆时针旋转a度后的坐标

xx= (x - dx)*cos(a) - (y - dy)*sin(a) + dx ;

yy= (x - dx)*sin(a) + (y - dy)*cos(a) +dy ;

这里,代入a=PI/2,dx = 向量AB的x,dy = 向量AB的y。x = 点B坐标的X,y = 点B坐标的Y。

此外,由于手机设备采用NDC坐标系,而当前渲染器采用同OpenGL的右手坐标系。

NDC坐标系的X方向 = GL的右手系的X方向

NDC坐标系的Y方向 = GL的右手系的-Y方向

因此,得出旋转轴为

复制代码
//e1为点A对应的MotionEvent事件,e2为点B对应的MotionEvent事件
 x = 0 - (e1.y - e2.y),
 y = -/*取负是由于NDC坐标系和GL坐标系的Y轴正方向相反*/(e1.x - e2.x),
 z = 0f

最后说明,安卓的GestureDetector类提供了onScroll方法,通过重写onScroll方法即可。且由于onScroll方法提供了distanceX和distanceY。

因此,最后我们可以简化成如下的样子。

复制代码
        lastRotationAxis.x = -distanceY;
        lastRotationAxis.y = -distanceX;
        lastRotationAxis.z = 0f;
源码定位

参考源码第137行

Commit记录

java 复制代码
    private void onOneFingerScroll(float distanceX, float distanceY) {
        if (isScaling || isDoubleFingerScroll)return;
        //单指实现旋转
        double distance = Math.sqrt(distanceX * distanceX + distanceY * distanceY);
        //原理:
        // 求AB两点(当前时刻的位置为B,上一时刻的位置为A)的垂线(这里是求旋转平面的法向量),
        // (将垂线的一个方向作为正方向,这里当作旋转平面的法向量)再将这个方向向量作为旋转轴。
        // 根据绕轴旋转定义四元数。
        // 这里将求垂线 => 简化成绕点旋转90度。因为求垂线后仍然需要考虑方向,而绕B点逆时针旋转90度即可得到B2。'AB2'则是目标向量
        //注意:安卓设备坐标系与OpenGL右手坐标系的XY方向。
//            dev.romainguy.kotlin.math.Float3(
//                x = 0 - (e1.y - e2.y)/* + e2.x*/,
//                y = -/*取负是由于NDC坐标系和GL坐标系的Y轴正方向相反*/(e1.x - e2.x)/* + e2.y*/,
//                z = 0f
//            )
        //改成使用distanceX/Y,简化后如下:
        lastRotationAxis.x = -distanceY;
        lastRotationAxis.y = -distanceX;
        lastRotationAxis.z = 0f;
        //todo 这里后续修改,为改用射线检测实现精准控制
        Quaternion rotation = Quaternion.axisAngle(lastRotationAxis, (float) Math.toRadians(distance * 0.168f));
        Quaternion localRotation = target.getLocalRotation();
        target.setLocalRotation(Quaternion.multiply(rotation,localRotation));
    }

实现模型缩放

模型缩放较为简单,借助安卓提供的ScaleGestureDetector即可检测到scale值

源码定位
java 复制代码
    @Override
    public boolean onScale(ScaleGestureDetector detector) {
        isScaling = true;
        if (target == null)return false;
        float scaleFactor = detector.getScaleFactor();
        target.setLocalScale(scaleTmp.scaled(scaleFactor));
        return false;
    }

    @Override
    public boolean onScaleBegin(ScaleGestureDetector detector) {
        if (target == null)return false;
        scaleTmp = target.getLocalScale();
        return true;
    }

    @Override
    public void onScaleEnd(ScaleGestureDetector detector) {
        isScaling = false;
    }

实现模型平移

最容易想到的是,通过手势的Move事件的distanceX\Y,直接去修改所渲染的模型节点的position。

这种实现思路有两个弊端,一个是由于不同设备的屏幕密度不同会导致每台设备的平移效果不一致,二是无法精准控制平移的位置。

下一篇将介绍采用射线检测的方式去做平移。



链接:【Sceneform-EQR】(手势优化)通过手势事件实现在AR/VR等三维场景中的控制模型旋转、平移与缩放

相关推荐
佩京科技VR1 天前
VR防溺水模拟体验系统,让危险“看得见“
vr·vr校园学习机·vr防溺水·vr校园安全教育
患得患失9491 天前
【ThreeJs】【伪VR】用 Three.js 实现伪 VR 全景看房系统:低成本实现 3D 级交互体验
javascript·3d·vr
EQ-雪梨蛋花汤1 天前
【Unity笔记】Unity Lighting Settings 全解析:一文读懂烘焙光照的每个参数(VR项目Lighting优化)
笔记·unity·vr
我的20091 天前
VR全景园区完整实现方案
vr
爱看科技2 天前
智能眼镜行业腾飞在即,苹果/微美全息锚定“AR+AI眼镜融合”之路抢滩市场!
人工智能·ar
道可云2 天前
道可云人工智能每日资讯|2025世界智能网联汽车大会将在北京举办
人工智能·百度·汽车·ar·xr·deepseek
奶糖 肥晨2 天前
Rokid JSAR 技术开发全指南:基于 Web 技术栈的 AR 开发实战
前端·ar·restful
图扑数字孪生3 天前
图扑 HT 架构下 AR 应用开发与行业解决方案实现
ar·数字孪生·三维可视化·增强现实·智慧机房
Romance_Code3 天前
【征文计划】从实践到原理:Rokid JSAR AR 钢琴音按钮项目技术解析
ar
虹科数字化与AR4 天前
安宝特方案丨软硬件双升级的AR智能仓储物流解决方案
ar·ar眼镜·仓储物流·工业ar·vuzix·智能仓储·ar仓储物流