javascript - 试图将 GTA V 坐标转换为 CEF three.js 坐标
问题描述
我正在使用经过修改的 GTA V,它允许我创建多人服务器。此修改在游戏前显示 CEF,使我能够使用铬为玩家显示信息。
我的目标是制作可以使用 GTA V 引擎创建的对象的编辑器。为此,我想使用库three.js 中内置的TransformControl。为此,我需要将来自 GTA V 的坐标转换为 three.js。不幸的是,我迷路了,目前不知道这有什么问题。
根据我的研究,我注意到 GTA 5 中的坐标轴是基于 +X+Y+Z 模式的,因此 three.js 中的答案是 +X+ZY。我试图通过这样做来翻译这些坐标:
// 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();
}
谁能帮我确定问题的原因?我认为这是相机旋转变换的问题,但我不知道正确的应该是什么样子。
解决方案
推荐阅读
- pytorch - 用于训练 PyTorch CNN 模型的更好的 GPU,但结果更慢
- javascript - 是否有任何可能的方式(或功能)在 MediaElement 播放器中向视频添加多种音频语言
- javascript - 在反应表中选择行时使按钮可点击
- javascript - 将旧的 VB.Net Web 项目转换为新的响应式项目
- node.js - 代理中间件的可变身份验证参数
- c++ - 如何使用 find_if 在给定的对向量中查找元素
- javascript - Javascript将变量放入正则表达式?
- debugging - 调查大型日志文件中的错误的好方法/技术是什么?
- heroku - 运行时如何解决 SHA 不匹配问题:heroku update?
- html - 右侧边距未知