0

I'm am searching for how WebGL / Three.js in general sets their heights and widths.

As in what numbers systems do they use to set x,y,z.

For the Example below, the arrow it pointing straight up with the Y being set to 1 but in pixels it looks like 15- - 200 pixels.

Is there a helper function that i can write that I could pass in 100 for the pixels and it would return me the correct number to float number to use with THREE.js.

Excuse me if I am not talking in correct terms when it comes to number system but this is he only way i know how to reference it at this point.

The only thing i am missing below is creating the scene. but the rest is there, the image shows what it looks lik.

Once again is there a helper function that i can pass pixels to and in return get back the correct number in float for use with THREE.js?

Here is my arrow:

//scene.remove(cube); scene.remove(group);

// create a new one
var sphere = createMesh(new THREE.SphereGeometry(5, 10, 10));
var cube = createMesh(new THREE.BoxGeometry(6, 6, 6));

sphere.position.set(controls.spherePosX, controls.spherePosY, controls.spherePosZ);
cube.position.set(controls.cubePosX, controls.cubePosY, controls.cubePosZ);
// add it to the scene.

// also create a group, only used for rotating
var group = new THREE.Group();
group.add(sphere);
group.add(cube);

scene.add(group);
controls.positionBoundingBox();

var arrow = new THREE.ArrowHelper(new THREE.Vector3(0, 1, 0), 0, 10, 0x0000ff);
scene.add(arrow);

Here is the Arrow I am talking about

I receive these JS objects with the Pixels then write to screen, but how do i convert the pixels down to usable units in 3D? How to Convert Pixels to 3D Units

Filling The Stack is What I DO
  • 6,553
  • 14
  • 54
  • 86
  • I written about screen space to world space conversion and vice versa here: http://stackoverflow.com/questions/35583808/3d-math-screen-space-to-world-space/35590403#35590403. Three.js also have its built in functions. – WacławJasper Aug 11 '16 at 05:54

1 Answers1

0

The lengths in 3D do not translate to lengths in 2D uniformly. Especially when perspective projection is employed.

Let's consider your example: Two arrows of the same 3D length and the same orientation would render to different 2D lengths depending on their distance from the camera. The arrow that is closer to camera will be rendered longer than the arrow farther from camera.

In order to maintain a certain pixel length for a certain arrow, you'd have to adjust the 3D length of the arrow every time some parameters of the camera change (e.g. position, orientation, FOV). And also every time the position or orientation of the arrow changes. This is possible (see comment by @WacławJasper ) but rather complicated.

If you could explain the bigger picture of what you wish to achieve there might be a simpler solution to your problem.

Matey
  • 1,190
  • 5
  • 7
  • I am turning a 2D project into 3D and I totally get what you're saying about the camera it make sense. When the user turns to add another elevation the first own needs to be in Perspective View, Looking Future away. In my solution i have access to each object as it changes. So If the user creates an elevation 300px in height and 200 in width how do i transform this to 3D units? I've updated My First Post to show the 2d elevation. Overlook everything but the rectangles. thank you so much! – Filling The Stack is What I DO Aug 11 '16 at 15:02
  • If I understood you correctly, your users specify some lengths in 2D, like for example the height of the door in your example picture. And then you want to convert this 2D height to a 3D height. Am i right? In that case the conversion is completely arbitrary and it's your choice. You could e.g. say that 10 pixels in 2D screen = 1.0 in 3D world. – Matey Aug 12 '16 at 11:27
  • Thank you very much – Filling The Stack is What I DO Aug 12 '16 at 15:11