搞懂 Cocos Creator 3.0 坐标之间的转换

前言：2D和3D开发中必然涉及坐标的转换,对于2D坐标无非就本地和世界坐标进行转换,但对于3D来讲多了几个概念。

1、UI坐标系
2、屏幕坐标系
3、3D世界坐标系
我们要探究的就是这三种内部各自和之间的坐标是如何转换的。

纯干货！一文搞懂 Cocos Creator 3.0 坐标转换原理：
https://mp.weixin.qq.com/s/mV5EY4NMrpgCP9XFocrcGA

这篇文章非常的干货，读完后我整理验证了一下关于坐标的转换；研究解决了一个疑惑问题（UI坐标和屏幕坐标计算为何不同）。

一、对应的坐标转换验证

场景结构和验证代码如下：

    //两种相机
    private cameraUI: Camera | null = null;
    private camera3D: Camera | null = null;

    //UI节点和3D节点
    private btnNode: Node | null = null;
    private cube: Node | null = null;

    //用于测试3D之间坐标转换
    private cubeA: Node | null = null;
    private cubeB: Node | null = null;

    //用于测试UI节点下的坐标系转换
    private Test1: Node | null = null;
    private label: Node | null = null;
    private Test2: Node | null = null;
    
    onLoad() {
        this.cameraUI = find('Camera', this.node).getComponent(Camera) as Camera;
        this.camera3D = find('Main Camera', this.node.parent).getComponent(Camera) as Camera;

        this.btnNode = find('Button', this.node);
        this.cube = find('Cube', this.node.parent);

        this.cubeA = find('Transformation/CubeA', this.node.parent);
        this.cubeB = find('Transformation/CubeB', this.node.parent);

        this.Test1 = find('Test1', this.node);
        this.label = find('Test1/Label', this.node);
        this.Test2 = find('Test2', this.node);
    }
    
    start() {
        input.on(Input.EventType.TOUCH_START, this.onTouchStart, this);
    }

    onTouchStart(event: EventTouch) {
        // ==屏幕坐标获取==     2D当中代表UI坐标(自动转换成UI坐标的)3D中代表屏幕坐标
        let sceenPos: Vec2 = event.getLocation();
        // ==UI坐标获取==
        let uiPos: Vec2 = event.getUILocation();
        console.error('sceenPos', sceenPos.x, sceenPos.y)
        console.error('uiPos', uiPos.x, uiPos.y)

        //一、<屏幕 => UI>: 点击屏幕让UI上的btnNode节点设置到点击位置上,两种方式
        /**
         * 1、屏幕 - UI坐标转换
         *  let uiPoint = this.cameraUI.screenToWorld(new Vec3(sceenPos.x, sceenPos.y ,0));
         *  this.btnNode.setWorldPosition(uiPoint);
         * 2、直接使用UI坐标
         * this.btnNode.setWorldPosition(new Vec3(uiPos.x, uiPos.y, 0));
         */

        //二、<UI => 屏幕>比如当从摄像机道某个UI位置打一条射线，需要UI到屏幕的坐标转换。
        /**
         * let sceenPoint = this.cameraUI.worldToScreen(new Vec3(uiPos.x, uiPos.y ,0));
         * 转换后的屏幕坐标验证近似相等
         * console.error(sceenPoint.x, sceenPos.x)
         * console.error(sceenPoint.y, sceenPos.y)
         */

        //三、<屏幕 => 3D世界>点击屏幕的位置,设置3D物体世界坐标的位置。
        /**
         * let c_z = this.camera3D.node.worldPosition.z / 1000;
         * let worldPoint = this.camera3D.screenToWorld(new Vec3(sceenPos.x, sceenPos.y ,c_z));
         * this.cube.setWorldPosition(worldPoint);
         */

        //四、<3D世界 -> 屏幕 -> UI>修改一下cube的位置，运行时候自动将UI上的btnNode节点设置在cube上
        /**
         * let sceenPoint = this.camera3D.worldToScreen(this.cube.worldPosition);
         * let uiPoint = this.cameraUI.screenToWorld(sceenPoint);
         * this.btnNode.setWorldPosition(uiPoint);
         */

        //五、<3D世界 -> UI>(上面已经提到，我们可以世界-屏幕-UI, 也可以直接转到UI上)
        /**
         * let out = new Vec3();
         * this.camera3D.convertToUINode(this.cube.worldPosition, this.node, out); //这里的this.node是Canvas
         * this.btnNode.parent = this.node;
         * this.btnNode.position = out;
         */

        //六、<UI坐标系的内部转换>UI不同节点之间的转换 比如：将label节点转换到Test2下面。
        /**
         * let pos = new Vec3();
         * let test2UITrans = this.Test2.getComponent(UITransform)!;
         * test2UITrans.convertToNodeSpaceAR(this.label.worldPosition, pos);
         * this.label.parent = this.Test2;
         * this.label.position = pos;
         * console.error('*****************', pos)
         */

        //七、<3D世界坐标系内部转换> 比如：3D节点cubeB本地坐标转换到 3D节点cubeA本地坐标系下
        /**
         * let tempPos = new Vec3();
         * let tempMat4 = new Mat4();
         * Mat4.invert(tempMat4, this.cubeA.getWorldMatrix());
         * Vec3.transformMat4(tempPos, this.cubeB.worldPosition, tempMat4);
         * console.error("__-----", tempPos)
         */
    }

二、UI坐标和屏幕坐标计算为何不同

如下图，使用的是iPhone 6s进行的截图,参数如下所示：
屏幕分辨率：1334 * 750；
设计分辨率：1280 * 720 ；
适配方式：按照高度适配。

如上图进行适配后结果：ABEF = 1334 * 750也就是设备的屏幕分辨率

1、通过点击事件获取的分辨率来自如下区域：
CDEF区域 = 1206 * 750。适配后可通过view.getCanvasSize()获取。
2、UI分辨率：
CDEF区域 = 1280* 796.0199004975125。适配后可通过view.getVisibleSize()。
同一片区域的分辨率尺寸是不同的，所以UI和屏幕坐标的的值肯定不同

如果以上结果看的不是很明白的话：建议浏览一下我之前分享适配原文：https://blog.csdn.net/weixin_41997753/article/details/118120557

手指点击一下截图的右上角输出的结果进行验证如下：

另外：3D场景很多情况我们在搞透视摄像机和模型的旋转。可以了看一下这边文章希望对你有所启发：
https://forum.cocos.org/t/topic/133354