GTA V模组CEF下three.js坐标、相机旋转转换及TransformControl适配求助

• 基于支持多人联机的GTA V模组开展二次开发，该模组支持在游戏画面前置渲染CEF（Chromium嵌入式框架）内容，可通过Chromium向玩家展示交互信息。
• 开发目标是实现GTA V引擎原生生成对象的可视化编辑器，计划借助three.js内置的TransformControl组件完成对象变换交互，核心需求是完成GTA V坐标系到three.js坐标系的映射，当前转换效果未达预期，暂未定位到问题根因。

• 坐标规则调研结论：GTA V采用+X+Y+Z坐标系，对应到three.js的坐标轴映射关系为**+X → +X、+Z → +Y、-Y → +Z**。
• 已编写初步坐标转换函数：

// GTA 世界坐标转编辑器坐标系
function toEditorVector(vector: Vector3): Vector3 {
    const xV = 1, yV = -1, zV = 1;
    return new Vector3(vector.x * xV, vector.z * zV, vector.y * yV);
}

• 旋转参数预处理：已知GTA V返回的相机、对象旋转参数为角度制，已将参数转换为弧度后传入three.js场景。

• 场景初始化逻辑：

// CEF 侧场景初始化代码
public startScene(fov: any, camPos: any, camRot: any, objPos: any): void {
    this.stopScene();
    this.objData.pos = objPos;

    this.transform.renderer = new WebGLRenderer({
        canvas: this.$refs.editorCanvas as HTMLCanvasElement,
        alpha: true,
        depth: true
    });
    this.transform.renderer.setPixelRatio(window.devicePixelRatio);
    this.transform.renderer.setSize(window.innerWidth, window.innerHeight);

    const aspect = window.innerWidth / window.innerHeight;
    // 初始化透视相机，直接传入转换后的相机位置与旋转值
    this.transform.cameraPerspective = new PerspectiveCamera(fov, aspect, 0.01, 50000);
    this.transform.cameraPerspective.position.set(camPos.x, camPos.y, camPos.z);
    this.transform.cameraPerspective.rotation.set(camRot.x, camRot.y, camRot.z);

    this.transform.scene = new Scene();
    // 初始化待编辑的对象网格，直接传入转换后的对象位置
    this.transform.mesh = new Mesh();
    this.transform.mesh.position.set(objPos.x, objPos.y, objPos.z);

    // 绑定变换控制器
    this.transform.transformControls = new TransformControls(this.transform.cameraPerspective, this.transform.renderer.domElement);
    const helper = new CameraHelper(this.transform.cameraPerspective);

    this.transform.scene.add(this.transform.mesh);
    this.transform.scene.add(helper);
    this.transform.transformControls.attach(this.transform.mesh);
    this.transform.scene.add(this.transform.transformControls);

    this.renderTransform()
    this.transform.transformControls.addEventListener("change", this.renderTransform);
}

• 相机参数实时更新逻辑：当GTA V侧相机状态变化时，会推送事件触发CEF侧的相机参数同步：

// CEF 侧相机实时同步代码
public updateCamera(data: any): void {
    this.camData = JSON.parse(data.detail);
    if (this.transform.cameraPerspective) {
        this.transform.cameraPerspective.position.set(this.camData.pos.x, this.camData.pos.y, this.camData.pos.z);
        this.transform.cameraPerspective.rotation.set(this.camData.rot.x, this.camData.rot.y, this.camData.rot.z);
    }
    this.renderTransform();
}

• 实际运行效果和预期存在偏差，目前初步怀疑问题出在相机旋转的转换逻辑上，但暂未验证该猜想，也找不到正确的旋转参数转换规则，需要协助定位问题根因。

内容的提问来源于stack exchange，提问作者Jakub Skakuj