parse(convert)toVector3 ( by reference to canvas or viewport. )

Questions
1

I hope the following.
I want to know each location my app’s screen(viewport or canvas).
example…

let screenRightTop = new Vector2 (screen.width, screen.height);
let worldRightTop : Vector3 = ParseVector3( screenRightTop);

I do not understand the following.

http://jsfiddle.net/gwenaelhagenmuller/fwd5Y/

plz another example or tutorial… :-:clap:

2

Hey! I’m not entirely sure I understand the need but if you want to get world coordinates of screen coordinates, you should just do the following:

var engine = scene.getEngine();
var globalViewport= scene.activeCamera.toGlobal(engine.getRenderWidth(), engine.getRenderHeight());
var projectedPosition = BABYLON.Vector3.Project(screenPosition, BABYLON.Matrix.Identity(), scene.getTransformMatrix(), globalViewport);
3

Thank you.
i’m copy that your code.

let engine = scene.getEngine();
let globalViewport= scene.cameras[0].viewport.toGlobal(
    engine.getRenderWidth(),
    engine.getRenderHeight()
);

let projectedPosition:BABYLON.Vector3 = BABYLON.Vector3.Project(
    new BABYLON.Vector3(1,2,3), 
    BABYLON.Matrix.Identity(), 
    scene.getTransformMatrix(), 
    globalViewport
);

console.log(projectedPosition);

Returned vector value was (nan, nan, nan). And ‘isNonUniform: true’.
When I copied that, what is my mistake?

The following is examples I want.

apple.position = (screen.rightSide - x, y, z );
orange.position = (screen.leftSide + x, screen.topSide - y, z );

If that ‘A’ position is vector2(2000,800), what converted vector3(?,?,?) of ‘A’ position.

Somebody help me! ( I do not want to say “No~!” Like in the Game ‘Vercure Cap’. Sorry… :sweat_smile:)

4

This code should work pretty well: https://playground.babylonjs.com/#JQJ8UM#1

So smthg is different in your utilisation, could you repro in the playground ?

5

yes different, but thank you.
i wanna convert that case 'Vector2 -> Vector3 '.

question. line 18 in next example.
https://www.babylonjs-playground.com/#U9AC0N#84

6

I want set ball(mesh) at conner of canvas or camera view.
plz help me~!

7

I am trying to understand what you need. Is the following getting close?

image
image.png830×737 10.1 KB

In the image above the sphere is positioned (after trial and error) in the viewport exactly where I want it in the top left corner.

I have achieved this for

  1. A particular camera
  2. in a set position
  3. with a set target
  4. a given viewport size

Changing any of these repositions the sphere (check https://playground.babylonjs.com/#JQJ8UM#2)

The Question
Is it possible to position the sphere at a precise location (X, Y) in the 2D viewport given
the camera, the camera position, the camera target, the viewport size?

8

yes, and it’s not that complex (not the time now to make a PG). Just search the forum (or the older one) for :
getAspectRatio(), camera.fov and Math.tan

Shortly, from my memory (haven’t been playing with BJS for a while) :
the camera.fov is half the vertical angle of view, from 0 to the maximum visible y in the screen at a given distance.
So if you want to set a ball in the viewport corner, assuming it’s located at the distance d from the camera, then :
y / d = tan(fov / 2) => y = d * tan(fov / 2)
The aspectRatio is the correction factor between the viewport width and height
x = y * aspectRatio
z = d

Set your ball at (x, y ,z), it should be exactly in the viewport corner.
This is simple when the camera looks toward Z, of course.

If the camera rotates/moves, then you have to use the camera viewMatrix… what is a bit more complex

1 Like
9

A little bit closer using @jerome’s idea https://playground.babylonjs.com/#JQJ8UM#3 but only for the case when the direction from the camera position to camera target is (0, 0, 1)

Click on scene and press a key (this ensures calculations are done after scene is rendered)

Next is the complicated bit with camera.viewMatrix

1 Like
10

Thank you everyone.
And, i’m sorry. upgraded the question.
camera’s mode is BABYLON.Camera.ORTHOGRAPHIC_CAMERA. ( Mo$@#% F!%&!$!@! ).

Add simple camera code at @jerome & @JohnK’s ref in playground.

https://playground.babylonjs.com/#JQJ8UM#4

This is reason to try that convert V2 to V3.

I hope to help and advice continue…:pray:

11

Try playing with the value on line 28 https://playground.babylonjs.com/#JQJ8UM#5

1 Like
12

I’m clear!
I used camera’s properties (orthoRight, Left, Top, Bottom).

Anyway thank you!
And i’ll use your idea when implement it at perspectiveView.

https://playground.babylonjs.com/#JQJ8UM#6

2 Likes