Hey everyone,
Was hoping somebody could shed some light with this problem I have.
I have 2 cameras 1 is perspective and the 2nd one is orthographic
The reason for this is to have 3d objects as menus (irregular shapes etc) which cannot be handled in a 2D screen, because it does not ignore transparency when clicking (clicking on transparent area fire the click event).
I have a right click menu I want to position on top of an object in the perspective camera.
I have used this code in the past and it works:
this.mainCamera.worldToScreen(entityPosition, screenPos);
const pixelRatio = this.app.graphicsDevice.maxPixelRatio;
screenPos.x *= pixelRatio;
screenPos.y *= pixelRatio;
const screenEntity = this.app.root.findByName(‘UI’) as pc.Entity;
const scale = screenEntity.screen.scale;
const device = this.app.graphicsDevice;
this.uiRightClickMenu.setLocalPosition(screenPos.x / scale, (device.height - screenPos.y) / scale, -10);
How do I translate the position relative to the perspective camera into the orthographic camera?
in order to position my 3d/orthographically rendered objects in the correct position beside the object I clicked in my perspective camera?
Edit:
if anybody is interested this is how I did it:
const mainCameraFinalPosition = new pc.Vec3();
this.mainCamera.worldToScreen(this.TargetPosition, mainCameraFinalPosition);const finalPosition = new pc.Vec3();
this.uiCamera.screenToWorld(mainCameraFinalPosition.x, mainCameraFinalPosition.y, -10, finalPosition);
finalPosition.z = -10;
this.entity.setLocalPosition(finalPosition);