[SOLVED] How to get top vec3 point and bottom vec3 point of user's screen?

[Ketan_ATA]

How i can get top point and bottom point of world space according to User’s screen?

[Leonidas]

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.

[LeXXik]

If mean the top and bottom of camera frustum, then you can find those planes in myCameraEntity.camera.frustum.

[Ketan_ATA]

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?

[Leonidas]

Hi @Ketan_ATA,

Can you share a project url to take a look?

[Ketan_ATA]

Yea sure here is Link:
https://playcanvas.com/project/714760/overview/top-point-and-bottom-point

[Leonidas]

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);
};

[Ketan_ATA]

@LeXXik

If mean the top and bottom of camera frustum, then you can find those planes in myCameraEntity.camera.frustum .

@LeXXik Thanks for trying to help

@Leonidas

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.

@Leonidas Thank you very much for very well explanation and solution.