尝试将 GTA V 坐标转换为 CEF 三个.js 坐标

问题描述

我正在使用经过修改的 GTA V，它允许我创建多人服务器。此修改在游戏前显示 CEF 并让我能够为使用铬的玩家显示信息。

我的目标是制作一个可以使用 GTA V 引擎创建的对象的编辑器。为此，我想使用 TransformControl，它是在 Three.js 库中构建的。为此，我需要将来自 GTA V 的坐标转换为three.js。不幸的是，我迷路了，目前不知道这有什么问题。

根据我的研究，我注意到 GTA 5 中的坐标轴基于 +X+Y+Z 模式，而three.js 中的答案是 +X+Z-Y。我试图通过这样做来翻译这些坐标：

// GTA CODE
function toEditorVector(vector: Vector3): Vector3 {
    const xV = 1,yV = -1,zV = 1;
    return new Vector3(vector.x * xV,vector.z * zV,vector.y * yV);
}

这样做的效果如下： https://streamable.com/72qrui

GTA 系统以度为单位返回相机和对象旋转。在将它们传递给three.js之前，我将它们转换为弧度。

在three.js中构建场景：

// CEF code
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 5 发送到 CEF：

// CEF code
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();
}

谁能帮我确定问题的原因？我认为这是相机旋转变换的问题，但我不知道正确的应该是什么样子。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

chromium-embedded grand-theft-auto javascript three.js