Calcs for dynamic positioning of 3Dobjects based on h / w + scrH / scrW

D13 · October 19, 2021, 6:05pm

So… let me try and explain this best I can.

I have a grid of instances. They are scaled to… whatever size they are scaled to. Scale can change. I need to find out how many of the objects can fit within the viewport / screen based on their current scale. However, I am having a problem determining what the rendered height/width of each object is. Of course, how many of the objects can fit within the screen is also affected by their distance from the camera, which will be fixed in this case.

Q1: What is the best way to determine how many rendered objects, at current scale, can fit into the screen ( in a grid ) at a given distance from the camera? Is there a function for this? I think I am trying to convert rendered widths to pixel widths… ?

Q2: Is it best to even assume the camera distance first? Or should I assume objects are at z:0 and then adjust camera to fit objects?

Thanks in advance!

drcmda · October 19, 2021, 9:28pm

github.com

pmndrs/react-three-fiber/blob/e317f4801f40084423ad6be53c52307d097a61c3/packages/fiber/src/core/store.ts#L198-L216

    
      
          function getCurrentViewport(
            camera: Camera = get().camera,
            target: THREE.Vector3 | Parameters<THREE.Vector3['set']> = defaultTarget,
            size: Size = get().size,
          ) {
            const { width, height } = size
            const aspect = width / height
            if (target instanceof THREE.Vector3) tempTarget.copy(target)
            else tempTarget.set(...target)
            const distance = camera.getWorldPosition(position).distanceTo(tempTarget)
            if (isOrthographicCamera(camera)) {
              return { width: width / camera.zoom, height: height / camera.zoom, factor: 1, distance, aspect }
            } else {
              const fov = (camera.fov * Math.PI) / 180 // convert vertical fov to radians
              const h = 2 * Math.tan(fov / 2) * distance // visible height
              const w = h * (width / height)
              return { width: w, height: h, factor: width / w, distance, aspect }
            }
          }

gives you the viewport width/height, also allows for a target vector. if you have that you can divide it with the width or height of the object.

in the off-chance you’re using react and three then you wouldn’t have to worry about any of it, because you can use flex-box and form real grids that are responsive and can overlap. GitHub - pmndrs/react-three-flex: 💪📦 Flexbox for react-three-fiber

D13 · October 19, 2021, 9:46pm

Boom. @drcmda Thank you!

Topic		Replies	Views
Responsive object position/scale Questions models , object3d , positioning , scaling , scale , responsive , 3d-model , position	2	32	September 27, 2024
[React-Three-Fiber] Size planeGeometry in relation to image texture Questions react-three-fiber	4	4393	July 8, 2021
Positioning camera according to size of the object Questions camera , bounding-box , gltf , threejs	7	2333	August 12, 2024
How to dynamically adjust the camera for different models? Questions camera , react-three-fiber	3	1569	April 25, 2022
How do I scale a 2D React image to match Three.js Object on window resize? Questions loaders , animation , particles	3	290	February 29, 2024

Calcs for dynamic positioning of 3Dobjects based on h / w + scrH / scrW

Related topics