How i can get top point and bottom point of world space according to User’s screen?
Hi @Ketan_ATA,
You can use the screen to world method for this:
https://developer.playcanvas.com/en/api/pc.CameraComponent.html#screenToWorld
var top = entity.camera.screenToWorld(window.innerWidth / 2, 0, distanceFromCamera);
var bottom = entity.camera.screenToWorld(window.innerWidth / 2, window.innerHeight, distanceFromCamera);
distanceFromCamera is the distance from the camera in world space to find the 3D point.
1 Like
If mean the top and bottom of camera frustum, then you can find those planes in myCameraEntity.camera.frustum
.
2 Likes
So this is my 2d screen and Orthographic camera
Current output without code…
And after adding this code:
var top = this._camera.screenToWorld(window.innerWidth / 2, 0, this._camera.nearClip);
var bottom = this._camera.screenToWorld(window.innerWidth / 2, window.innerHeight, this._camera.farClip);
this.spr1.setPosition(top);
this.spr2.setPosition(bottom);
But then output is this
Is there anything i missed?
So, a couple of fixes there:
- You need to add a distance from the camera, where you would like to place the 3D points. Definitely not at the near / far clipping plane.
- Let’s use the canvas width/height instead of the window, since you are using a fixed canvas here.
- There is an issue trying to run and calculate positions on initialize, most likely because the spheres are positioned at a later point. I’ve added the calc method inside the update method and now it works.
Full code:
var GamePlayManagerScript = pc.createScript('gamePlayManagerScript');
GamePlayManagerScript.attributes.add('bgBoardAreaEntity', {type:'entity'});
GamePlayManagerScript.attributes.add('cameraEntity', {type:'entity'});
GamePlayManagerScript.attributes.add('width', {type:'number',default: 0});
GamePlayManagerScript.attributes.add('height', {type:'number',default: 0});
GamePlayManagerScript.attributes.add('startPointImgComp', {type:'entity'});
GamePlayManagerScript.attributes.add('endPointImgComp', {type:'entity'});
GamePlayManagerScript.attributes.add('spr1', {type:'entity'});
GamePlayManagerScript.attributes.add('spr2', {type:'entity'});
// initialize code called once per entity
GamePlayManagerScript.prototype.initialize = function() {
this._camera = this.cameraEntity.camera;
this.startScreenPointVec3 = new pc.Vec3();
this.endcreenPointVec3 = new pc.Vec3();
};
// update code called every frame
GamePlayManagerScript.prototype.update = function(dt) {
this.initBoard();
};
GamePlayManagerScript.prototype.initBoard = function() {
var top = this._camera.screenToWorld(this.app.graphicsDevice.width / 2, 0, 10);
var bottom = this._camera.screenToWorld(this.app.graphicsDevice.width / 2, this.app.graphicsDevice.height, 10);
this.spr1.setPosition(top.x, top.y, top.z);
this.spr2.setPosition(bottom.x, bottom.y, bottom.z);
};
3 Likes