What impact does rotation have on an orthographic camera within the Three.js framework?

Question

What impact does rotation have on an orthographic camera within the Three.js framework?

I am working in Three.js with a scene that includes a plane and an orthographic camera.

Orthographic camera at -90deg:

When the camera is rotated to -90 deg on the x-axis (looking straight down from above), only the plane is visible in the view.

Scene setup:

https://i.sstatic.net/fsVQM.png

What the camera captures:

https://i.sstatic.net/bg8y9.png

Orthographic camera at -40deg:

However, when the camera is rotated to around -40 deg on the x-axis, more of the scene becomes visible along with the plane. The rotated angle expands the camera's field of view.

Scene setup:

https://i.sstatic.net/EW674.png

What the camera captures:

https://i.sstatic.net/dBAPC.png

My queries are:

How can I determine the degree of additional visibility achieved by the camera due to its rotation on the x axis?
How can I adjust the properties of left, right, top, bottom, and/or the y position of the camera to restrict its view to only the plane, excluding other elements? Vertically, I want the plane to fill the viewport entirely, even if parts extend beyond horizontally.

PS: It should be noted that this concerns an orthographic camera. The camera's parameters for left, right, top, and bottom are hardcoded considering the plane's height and screen aspect ratio. Both the camera and plane are positioned at (0,0,0).

camera = new THREE.OrthographicCamera(
    -planeZ * aspectRatio / 2;
    planeZ * aspectRatio / 2;
    planeZ / 2;
    -planeZ / 2;
    -100,
    100
);
camera.position.set(0,0,0);

Update

I've developed a code example inspired by @Trentium but with significant modifications including the removal of OrbitControls and utilizing angle calculations from @Marquizzo. Refer to https://plnkr.co/edit/UxO37ShEAiJNAK8H?preview

javascript vector three.js camera trigonometry

Answer 1

Answer №1

Exploring the Impact of Rotation on an Orthographic Camera in Three.js

When considering how rotation affects an orthographic camera in Three.js, it's important to note that the basic principles remain consistent. The rotation of a square, for example, follows familiar patterns within the framework of Three.js. As the square rotates from right angles (90°) to 45° angles, the dissecting plane transitions from being the width of the square to the diagonal, which is √2 times larger than the width. This change in perspective may create the illusion of covering a larger area.

Possible Solution Approach

To address scaling concerns related to the camera's top and bottom attributes, implementing a simple sine function could be effective. By utilizing this function, the camera's height can vary based on its rotation angle. For instance, at 90° rotation, the camera reaches maximum height, but as it approaches 0°, it becomes increasingly thin.

const maxSide = planeZ / 2;

// Define camera rotation
const angle = THREE.MathUtils.degToRad(90);
camera.rotation.x = angle;

// Adjust frustum scaling
camera.top = maxSide * sin(angle);
camera.bottom = -maxSide * sin(angle);
camera.updateProjecionMatrix();

Answer 2

Exploring the Impact of Rotation on an Orthographic Camera in Three.js

When considering how rotation affects an orthographic camera in Three.js, it's important to note that the basic principles remain consistent. The rotation of a square, for example, follows familiar patterns within the framework of Three.js. As the square rotates from right angles (90°) to 45° angles, the dissecting plane transitions from being the width of the square to the diagonal, which is √2 times larger than the width. This change in perspective may create the illusion of covering a larger area.

Possible Solution Approach

To address scaling concerns related to the camera's top and bottom attributes, implementing a simple sine function could be effective. By utilizing this function, the camera's height can vary based on its rotation angle. For instance, at 90° rotation, the camera reaches maximum height, but as it approaches 0°, it becomes increasingly thin.

const maxSide = planeZ / 2;

// Define camera rotation
const angle = THREE.MathUtils.degToRad(90);
camera.rotation.x = angle;

// Adjust frustum scaling
camera.top = maxSide * sin(angle);
camera.bottom = -maxSide * sin(angle);
camera.updateProjecionMatrix();

Answer 3

Answer №2

Here is a modified version of @Marquizzo's response (please acknowledge him if this solves the issue), with a few tweaks:

The code example has been adapted from the three.js orthographic example, with slight adjustments to ensure the 300x300 plane intersects the XYZ origin.
The main changes required to incorporate @Marquizzo's solution are located towards the end of the Snippet in the animate() function.
To determine the camera angle concerning the primary 300x300 XZ plane centered on the XYZ origin, it entails calculating the distance between the camera and the XYZ origin, followed by determining the angle between the camera's Y coordinate and the XZ plane. (Mathematically, this involves taking the arcsine of the camera's Y position divided by the radius, which in this case is the distance to the origin.)
It should be noted that as sin is used to calculate the final frustums, there is no need to perform the arcsin and then reapply sin; rather, simply use camera.position.y / r directly in the frustum calculations. For transparency purposes, I retained the trigonometric functions...
Furthermore, the constraints of the XZ plane (e.g., 150) have been hardcoded for better comprehension, and a minor adjustment of 10% (i.e., * 1.10) has been applied to each frustum to add a border to the 300x300 plane, enhancing visibility of the frustum modifications while rotating the scene.

For optimal viewing experience, switch to "Full page" mode after running the code snippet...

<!DOCTYPE html>
<html>

    <body>
    

    <script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
    <script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
    <script src="https://rawgit.com/mrdoob/three.js/master/examples/js/renderers/CSS3DRenderer.js"></script>

        <script>

            let camera, scene, renderer, controls;

            let scene2, renderer2;

            const frustumSize = 500;

            init();
            animate();

            function init() {

                const aspect = window.innerWidth / window.innerHeight;
                camera = new THREE.OrthographicCamera( frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 1, 1000 );

                camera.position.set( - 200, 200, 200 );

                scene = new THREE.Scene();
                //scene.background = new THREE.Color( 0xf0f0f0 );
        scene.background = new THREE.Color( 0x000000 );

                scene2 = new THREE.Scene();

                //const material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
        const material = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide} );

                // left
                createPlane(
                    100, 100,
                    'chocolate',
                    new THREE.Vector3( - 50, 0, 0 ),
                    new THREE.Euler( 0, - 90 * THREE.MathUtils.DEG2RAD, 0 )
                );
                // right
                createPlane(
                    100, 100,
                    'saddlebrown',
                    new THREE.Vector3( 0, 0, 50 ),
                    new THREE.Euler( 0, 0, 0 )
                );
                // top
                createPlane(
                    100, 100,
                    'yellowgreen',
                    new THREE.Vector3( 0, 50, 0 ),
                    new THREE.Euler( - 90 * THREE.MathUtils.DEG2RAD, 0, 0 )
                );
                // bottom
                createPlane(
                    300, 300,
                    'seagreen',
                    new THREE.Vector3( 0, - 0, 0 ),
                    new THREE.Euler( - 90 * THREE.MathUtils.DEG2RAD, 0, 0 )
                );

                //

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                renderer2 = new THREE.CSS3DRenderer();
                renderer2.setSize( window.innerWidth, window.innerHeight );
                renderer2.domElement.style.position = 'absolute';
                renderer2.domElement.style.top = 0;
                document.body.appendChild( renderer2.domElement );

                controls = new THREE.OrbitControls( camera, renderer2.domElement );
                controls.minZoom = 0.5;
                controls.maxZoom = 2;

                function createPlane( width, height, cssColor, pos, rot ) {

                    const element = document.createElement( 'div' );
                    element.style.width = width + 'px';
                    element.style.height = height + 'px';
                    element.style.opacity = 0.75;
                    element.style.background = cssColor;


                    const object = new THREE.CSS3DObject( element );
                    object.position.copy( pos );
                    object.rotation.copy( rot );
                    scene2.add( object );

                    const geometry = new THREE.PlaneGeometry( width, height );
                    const mesh = new THREE.Mesh( geometry, material );
                    mesh.position.copy( object.position );
                    mesh.rotation.copy( object.rotation );
          
                    scene.add( mesh );

                }

                window.addEventListener( 'resize', onWindowResize );

            }

            function onWindowResize() {

                const aspect = window.innerWidth / window.innerHeight;

                camera.left = - frustumSize * aspect / 2;
                camera.right = frustumSize * aspect / 2;
                camera.top = frustumSize / 2;
                camera.bottom = - frustumSize / 2;

                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

                renderer2.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {

                requestAnimationFrame( animate );
        
        
        
        /**********************************************************/
        // 
        // Code added to adjust frustum...
        //
        
        function distanceToOrigin( p ) {
          return Math.sqrt( p.x * p.x + p.y * p.y + p.z * p.z );
        }

        camera.position.z = 0;
      
        let r = distanceToOrigin( camera.position );
        let angle = Math.asin( camera.position.y / r );
        
        camera.left = -150 * Math.sin( angle ) * 1.10;
        camera.right = 150 * Math.sin( angle ) * 1.10;
        camera.top = 150 * Math.sin( angle ) * 1.10;
        camera.bottom = -150 * Math.sin( angle ) * 1.10;
        camera.updateProjectionMatrix();

        controls.update();
        
        //
        /**********************************************************/



                renderer.render( scene, camera );
                renderer2.render( scene2, camera );

            }
      
      

      
      
        </script>
    </body>
</html>

Answer 4

Here is a modified version of @Marquizzo's response (please acknowledge him if this solves the issue), with a few tweaks:

The code example has been adapted from the three.js orthographic example, with slight adjustments to ensure the 300x300 plane intersects the XYZ origin.
The main changes required to incorporate @Marquizzo's solution are located towards the end of the Snippet in the animate() function.
To determine the camera angle concerning the primary 300x300 XZ plane centered on the XYZ origin, it entails calculating the distance between the camera and the XYZ origin, followed by determining the angle between the camera's Y coordinate and the XZ plane. (Mathematically, this involves taking the arcsine of the camera's Y position divided by the radius, which in this case is the distance to the origin.)
It should be noted that as sin is used to calculate the final frustums, there is no need to perform the arcsin and then reapply sin; rather, simply use camera.position.y / r directly in the frustum calculations. For transparency purposes, I retained the trigonometric functions...
Furthermore, the constraints of the XZ plane (e.g., 150) have been hardcoded for better comprehension, and a minor adjustment of 10% (i.e., * 1.10) has been applied to each frustum to add a border to the 300x300 plane, enhancing visibility of the frustum modifications while rotating the scene.

For optimal viewing experience, switch to "Full page" mode after running the code snippet...

<!DOCTYPE html>
<html>

    <body>
    

    <script src="https://rawgit.com/mrdoob/three.js/master/build/three.js"></script>
    <script src="https://rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js"></script>
    <script src="https://rawgit.com/mrdoob/three.js/master/examples/js/renderers/CSS3DRenderer.js"></script>

        <script>

            let camera, scene, renderer, controls;

            let scene2, renderer2;

            const frustumSize = 500;

            init();
            animate();

            function init() {

                const aspect = window.innerWidth / window.innerHeight;
                camera = new THREE.OrthographicCamera( frustumSize * aspect / -2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / -2, 1, 1000 );

                camera.position.set( - 200, 200, 200 );

                scene = new THREE.Scene();
                //scene.background = new THREE.Color( 0xf0f0f0 );
        scene.background = new THREE.Color( 0x000000 );

                scene2 = new THREE.Scene();

                //const material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
        const material = new THREE.MeshBasicMaterial( { color: 0x000000, side: THREE.DoubleSide} );

                // left
                createPlane(
                    100, 100,
                    'chocolate',
                    new THREE.Vector3( - 50, 0, 0 ),
                    new THREE.Euler( 0, - 90 * THREE.MathUtils.DEG2RAD, 0 )
                );
                // right
                createPlane(
                    100, 100,
                    'saddlebrown',
                    new THREE.Vector3( 0, 0, 50 ),
                    new THREE.Euler( 0, 0, 0 )
                );
                // top
                createPlane(
                    100, 100,
                    'yellowgreen',
                    new THREE.Vector3( 0, 50, 0 ),
                    new THREE.Euler( - 90 * THREE.MathUtils.DEG2RAD, 0, 0 )
                );
                // bottom
                createPlane(
                    300, 300,
                    'seagreen',
                    new THREE.Vector3( 0, - 0, 0 ),
                    new THREE.Euler( - 90 * THREE.MathUtils.DEG2RAD, 0, 0 )
                );

                //

                renderer = new THREE.WebGLRenderer();
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                document.body.appendChild( renderer.domElement );

                renderer2 = new THREE.CSS3DRenderer();
                renderer2.setSize( window.innerWidth, window.innerHeight );
                renderer2.domElement.style.position = 'absolute';
                renderer2.domElement.style.top = 0;
                document.body.appendChild( renderer2.domElement );

                controls = new THREE.OrbitControls( camera, renderer2.domElement );
                controls.minZoom = 0.5;
                controls.maxZoom = 2;

                function createPlane( width, height, cssColor, pos, rot ) {

                    const element = document.createElement( 'div' );
                    element.style.width = width + 'px';
                    element.style.height = height + 'px';
                    element.style.opacity = 0.75;
                    element.style.background = cssColor;


                    const object = new THREE.CSS3DObject( element );
                    object.position.copy( pos );
                    object.rotation.copy( rot );
                    scene2.add( object );

                    const geometry = new THREE.PlaneGeometry( width, height );
                    const mesh = new THREE.Mesh( geometry, material );
                    mesh.position.copy( object.position );
                    mesh.rotation.copy( object.rotation );
          
                    scene.add( mesh );

                }

                window.addEventListener( 'resize', onWindowResize );

            }

            function onWindowResize() {

                const aspect = window.innerWidth / window.innerHeight;

                camera.left = - frustumSize * aspect / 2;
                camera.right = frustumSize * aspect / 2;
                camera.top = frustumSize / 2;
                camera.bottom = - frustumSize / 2;

                camera.updateProjectionMatrix();

                renderer.setSize( window.innerWidth, window.innerHeight );

                renderer2.setSize( window.innerWidth, window.innerHeight );

            }

            function animate() {

                requestAnimationFrame( animate );
        
        
        
        /**********************************************************/
        // 
        // Code added to adjust frustum...
        //
        
        function distanceToOrigin( p ) {
          return Math.sqrt( p.x * p.x + p.y * p.y + p.z * p.z );
        }

        camera.position.z = 0;
      
        let r = distanceToOrigin( camera.position );
        let angle = Math.asin( camera.position.y / r );
        
        camera.left = -150 * Math.sin( angle ) * 1.10;
        camera.right = 150 * Math.sin( angle ) * 1.10;
        camera.top = 150 * Math.sin( angle ) * 1.10;
        camera.bottom = -150 * Math.sin( angle ) * 1.10;
        camera.updateProjectionMatrix();

        controls.update();
        
        //
        /**********************************************************/



                renderer.render( scene, camera );
                renderer2.render( scene2, camera );

            }
      
      

      
      
        </script>
    </body>
</html>

What impact does rotation have on an orthographic camera within the Three.js framework?

Answer №1

Exploring the Impact of Rotation on an Orthographic Camera in Three.js

Possible Solution Approach

Answer №2

Similar questions

AngularFire Google OAuth failing to retrieve the user's email address

What is the best way to retrieve a value from an asynchronous function in Node.js?

How can I activate a function or pass a selected value to a different scope variable using AngularUI Bootstrap Datepicker?

Leverage angular-translate to establish placeholder text upon blurring

Selecting HTML5 data attributes using jQuery

Need assistance with jQuery AJAX?

Unable to receive URL parameters using JavaScript on a mobile device

Infinite loop using jQuery function endlessly

Displaying PDF content in a new browser tab by utilizing JavaScript

Understanding the fundamental concepts of callbacks with Backbone.js

Multiple Button Triggered jQuery Ajax Function

Using StencilJs/Jsx: Displaying nested components with rendered HTMLElements

The UseEffect function ceases to function properly upon refreshing the website

Combining the power of Angular with a Vanilla JS web application

The callback for closing the $uibModal with a value will consistently result in undefined

Transitioning JavaScript plugins to Vue framework

Angular is reporting that the check-in component is nonexistent

How can I close a dialog within an iframe in jQuery?

Postman seems to be functioning correctly while AXIOS is encountering issues

Acknowledging client after client to server POST request has been successfully processed in Node.JS