Calculate the ratio of 1 unit to how many pixels?

[dytmh]

I need to use pixels to set the radius of the circle, no matter how the camera moves, the screen will remain 5 pixels in size, similar to webgl_lines_fat.html, but its width calculation is in clip space and screen space, I need 1 pixel to unit ratio or 1 unit to pixel ratio to calculate the offset distance. It’s a perspective camera.

Like this.
vec3 offset = positions * project_pixel_size(radiusPixels);
gl_Position = projectionMatrix * modelViewMatrix * vec4(instancePositions * offset, 1.0);

[amitlzkpa]

I am guessing you are trying to create some sort of overlaid map.
If that’s the case I did something similar previously (not in threejs) and turned out it was much easier to manage things if I projected the relevant points to the camera near plane and updating those assets there.
Became easier to swap in new graphics(easier to size raster images in other applications and simply import) and managing maps for multiple cameras in the same scene.

[looeee]

You might find my functions from this post useful:

Functions to calculate the visible width / height at a given z-depth from a perspective camera

These two functions will give you the visible height and width in your scene at a given distance from a PerspectiveCamera. It’s useful if you want to create an object that is the full width / height of the scene, or want to place objects at screen edges etc. Here’s the code (ES6): const visibleHeightAtZDepth = ( depth, camera ) => { // compensate for cameras not positioned at z=0 const cameraOffset = camera.position.z; if ( depth < cameraOffset ) depth -= cameraOffset; else depth += c…

They’ll give you the full width of the screen in three.js units at a given z-depth. You can then use that to create objects that are a given percentage width, or do some more calculations to make them a particular amount of pixels wide. However, it’s probably best not to size things in pixels since on HDPI screens they will get very tiny.

[LeenAlfalah]

@looeee

They’ll give you the full width of the screen in three.js units at a given z-depth. You can then use that to create objects that are a given percentage width, or do some more calculations to make them a particular amount of pixels wide. However, it’s probably best not to size things in pixels since on HDPI screens they will get very tiny.

Hi, what do you mean by depth in your functions is it the camera z position ?

then if i get the offest of the div that i want to fill it in 3d object so i get the number in px so i set

    var viewportOffset = firstShape!.getBoundingClientRect();
    mesh1.position.y=-viewportOffset.top/(window.innerHeight)

is that make sense ??