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

Leonidas · August 28, 2020, 3:41pm

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