I'm using GTA V with modification which allows me to create multiplayer server. This modification displaying CEF in front of the game and gives me ability to show information for player using chromium.
My goal was to make an editor of objects that can be created with the GTA V engine. For this purpose I wanted to use TransformControl, built in the library three.js. To do this, I need to transform the coordinates coming from GTA V into three.js. Unfortunately, I got lost and currently don't know what's wrong with this.
Based on my research, I noticed that the axes in GTAV are based on the +X+Y+Z pattern, for which the answer in three.js is +X+Z-Y. I tried to translate these coordinates by doing this:
// 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);
}
The effect of this is as follows: https://streamable.com/72qrui
The GTA system returns camera and object rotation in degrees. I convert them to radians before passing them to three.js.
Building a scene in 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);
}
and when the camera is updating, an event is send from GTAV to 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();
}
Can anyone help me determine the cause of the problem? I think it's a problem with the camera rotation transformation, but I don't know what the correct one should look like.