I'm trying to understand how WebGL / Three.js determines the heights and widths of objects.
What numerical systems are used to set x, y, z coordinates?
For example, when the arrow is pointing straight up with Y set to 1, it appears as 15-200 pixels. Is there a way to convert pixel values into the correct float numbers for THREE.js using a helper function?
Apologies if I am not using the correct terminology regarding numerical systems, this is my current frame of reference.
The only thing missing below is creating the scene, but everything else is there, as shown in the image.
Is there a helper function that can take pixel values and return the appropriate float number for use with THREE.js?
This is the code for my arrow:
//scene.remove(cube); scene.remove(group);
// create a new object
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 objects to the scene.
// create a group for rotation
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); //arrow pointing up
scene.add(arrow);
https://i.sstatic.net/Fc1eV.jpg
I have JavaScript objects with dimensions in pixels, but how do I convert these to usable units in 3D space? https://i.sstatic.net/DyL29.jpg