Creating an overlay-section in three.js with orbit-controls that dynamically responds to the main view's movement

Question

Creating an overlay-section in three.js with orbit-controls that dynamically responds to the main view's movement

I'm looking to incorporate a section in the corner of my main view that displays a miniature version of the main view.

Currently, I am developing a webpage using JavaScript with three.js. The main view window showcases various geometries that can be rotated and moved using OrbitControls.

My goal is to have a separate section in the corner of the main view where a small cube can be displayed, rotating in sync with the main view without zooming in or out when the main view is zoomed.

var orientationGeometry = new THREE.Mesh( geometry, material );
camera.add( orientationGeometry );

// in animate function:
orientationCube.rotation.x = controls.getPolarAngle();
orientationCube.rotation.y = controls.getAzimuthalAngle();

While this code successfully rotates the small cube and keeps it fixed on the screen by adding it as a child to the camera, zooming in or out causes the cube to move away from the camera.

Is there a method to create an additional section as depicted in the following image?

https://i.sstatic.net/56Zp0.png

javascript three.js overlay visualization

Answer 1

Answer №1

If you want to display a second viewport on the screen, you can achieve this by enabling WebGLRenderer.ScissorTest, setting the desired scissor, adjusting the viewport, and rendering the scene again. Make sure to remember to call clearDepth() or else nothing will be rendered.

To have a different camera behavior, simply add a second camera to the scene and update it based on your requirements. To have it rotate and move in sync with the full-screen camera, update the necessary parameters accordingly.

If you wish to maintain a fixed zoom state, calculate the normalized position of the camera and multiply it by the predetermined distance.

function animate() {

    // rendering the full scene.
    // ...

    // setting up the scissor viewport.
    renderer.clearDepth(); // essential!
    renderer.setScissorTest( true );
    renderer.setScissor( 20, 20, insetWidth, insetHeight );
    renderer.setViewport( 20, 20, insetWidth, insetHeight );

    // updating the second camera.
    camera2.position.copy( camera.position );
    camera2.position.normalize().multiplyScalar( distance );
    camera2.quaternion.copy( camera.quaternion );

    // rendering the small scene.
    renderer.render( scene, camera2 );

    renderer.setScissorTest( false );

}

Here is a functional example https://jsfiddle.net/qwb39spx/

Answer 2

If you want to display a second viewport on the screen, you can achieve this by enabling WebGLRenderer.ScissorTest, setting the desired scissor, adjusting the viewport, and rendering the scene again. Make sure to remember to call clearDepth() or else nothing will be rendered.

To have a different camera behavior, simply add a second camera to the scene and update it based on your requirements. To have it rotate and move in sync with the full-screen camera, update the necessary parameters accordingly.

If you wish to maintain a fixed zoom state, calculate the normalized position of the camera and multiply it by the predetermined distance.

function animate() {

    // rendering the full scene.
    // ...

    // setting up the scissor viewport.
    renderer.clearDepth(); // essential!
    renderer.setScissorTest( true );
    renderer.setScissor( 20, 20, insetWidth, insetHeight );
    renderer.setViewport( 20, 20, insetWidth, insetHeight );

    // updating the second camera.
    camera2.position.copy( camera.position );
    camera2.position.normalize().multiplyScalar( distance );
    camera2.quaternion.copy( camera.quaternion );

    // rendering the small scene.
    renderer.render( scene, camera2 );

    renderer.setScissorTest( false );

}

Here is a functional example https://jsfiddle.net/qwb39spx/

Creating an overlay-section in three.js with orbit-controls that dynamically responds to the main view's movement

Answer №1

Similar questions

What is the method for determining the actual line width from 2D geometry?

Having trouble getting a constructor to function properly when passing a parameter in

JavaScript library error: "Uncaught ReferenceError: numjs is undefined"

Use the map function to find the highest number within each array

Swagger is unable to locate a user schema when utilizing Yaml files

JavaScript / Ajax / PHP - A Minor Bug That's Bugging Me

Tips for validating date input in a TextBox using JQuery on an ASP.NET platform:

What is the best way to access all of the "a" elements contained within this specific div?

JavaScript Loading Screen - Issues with window.onload functionality

How to clear a particular select option in react-bootstrap

Angular confirmation page following successful HTTP POST request to Web API

Sharing data between ReactJS components: Passing variables between components

Is it advisable to clear the bootstrap tooltips array in order to conserve browser memory once I have finished rendering new tooltips?

Unable to access Session state in Web Service through ajax on the client side

Tips for automatically filling out a div class form:

Toggle the availability of links based on the presence of route parameters

Encountered an issue while installing the "sharp" module on MAC M1

Utilizing useEffect Hooks to Filter Local JSON Data in React Applications

Utilizing additional PHP files to handle the AJAX post request and subsequently execute the PHP script

Enhance the lighting effects in Three.js with the implementation of shadows for area lights through Deferred