Get camera rotation and map it to a number range

Questions
1

I have a cube and a camera with orbit controls.

I want that when the camera rotates above the cube that the cubes scale grows.

means when the camera is on the side view (doesn’t matter which side) the cubes scale is 1 and when I start to rotate the camera to see the top-view of the cube, the cube should grow slowly till cameras rotation reached 90°.

Here a screenshot for better understanding:

image
image1977×1336 191 KB

I try to understand what exactly happens when I rotate the camera (with the orbit controls)

controls.addEventListener("change",(x)=>{
    console.log(camera.rotation._y*180/Math.PI)
})

I understand now which axis I need to have an eye on:

 camera.rotation.set(-90 * Math.PI/180,0,anyNumber);
        //_y = 0 => topview  90 => sideview!
        //_x = 0 => sideview -90 => topview

So I know _y = 90 and _x = -90 to have a topview. But how do I map these two numbers 0 till 90 (0 till -90) to a range of lets say 1 - 5; Cubes scale should be 1 if sideview and scale should be 5 if topview.

And also does this approch make sense when I have like 1000 cubes which I need to iterate on camera_rotation change?

Any suggestion is welcome!

2

OrbitControls (three.js docs) has two methods you can call to get angles in radians from the target.

controls.getPolarAngle()

and

controls.getAzimuthalAngle()

I use these in this demo (Globe - Three.js Tutorials) to draw the latitude and longitude on the screen.
See the controls change event handler for example usage in the code in the demo link.

image
image745×451 117 KB

3

wow amazing! thank you so much seanwasere! maybe I should read more in the documentation… I was there but didn’t expect to have this helper-function :slight_smile:

the other open question is how to apply it efficiently to my 1000 BoxGeometry Meshes:

        allBlockGroup.children.forEach(b=>{
            b.scale.x =2-controls.getPolarAngle();
            b.scale.z =2-controls.getPolarAngle();
        })

When I do this, it is quite slow and hacky, fps goes down to the cellar. What is the way to get best performance doing this? The BoxGeometries have differet geometry (only the height (_y) of the boxes are different, maybe could be done with scale, so the geometry is the same), and different material colors.