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

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:


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.


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


But then output is this

Is there anything i missed? :thinking:

Hi @Ketan_ATA,

Can you share a project url to take a look?

Yea sure here is Link:

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) {

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


@LeXXik Thanks for trying to help :slightly_smiling_face:

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