I am currently working on incorporating a zoomed view of a sphere into a main window that represents the sphere.
At this point, I have succeeded in displaying a subwindow at the bottom right corner that contains three axes of the main scene. These axes rotate in synchrony with the sphere when manipulated using the mouse.
Now, my goal is to show a zoomed view of the sphere in this subwindow instead of the 3D axes.
Based on input from Can multiple WebGLRenderers render the same scene?, it is not possible to utilize a second instance of THREE.WebGLRenderer() for the subwindow.
Regarding suggestions from How to render the same scene with different cameras in three.js?, one solution involves using the setViewport function, but I am unsure if it can be used to display the zoomed sphere in the subwindow.
In attempting to achieve this, I have made modifications within the render() function:
function render() {
controls.update();
requestAnimationFrame(render);
zoomCamera.position.copy(camera.position);
zoomCamera.position.sub(controls.target);
zoomCamera.position.setLength(500);
zoomCamera.lookAt(zoomScene.position );
// Add Viewport for zoomScene
renderer.setViewport(0, 0, width, height);
renderer.render(scene, camera);
zoomRenderer.setViewport(0, 0, 200 , 200);
zoomRenderer.render(zoomScene, zoomCamera);
}
Given your expertise, do you think it is technically feasible to simultaneously have two objects displayed (one in the main window and the other in the right-bottom subwindow)?
Could the use of setViewport help resolve my issue?
If anyone could provide documentation or guidance on utilizing setViewport, it would be greatly appreciated.
Thank you in advance.
UPDATE :
@WestLangley, thank you for your suggestions. After implementing your modifications by using a single scene, I encountered an issue where the content of the inset does not appear.
I suspect that the problem lies in my inability to establish a connection between "the container of the inset" and the rendering of this "inset".
As an example, referring back to the aforementioned link, I attempted the following:
...
// Add sphere to main scene
scene.add(sphere);
camera.position.z = 10;
var controls = new THREE.TrackballControls(camera);
// If I include these two lines below, nothing appears
// zoomContainer = document.getElementById('zoomContainer');
// zoomContainer.appendChild(renderer.domElement);
// Zoom camera
zoomCamera = new THREE.PerspectiveCamera(50, zoomWidth, zoomHeight, 1, 1000);
zoomCamera.position.z = 20;
zoomCamera.up = camera.up; // important!
// Call rendering function
render();
function render() {
controls.update();
requestAnimationFrame(render);
zoomCamera.position.copy(camera.position);
zoomCamera.position.sub(controls.target);
zoomCamera.position.setLength(camDistance);
zoomCamera.lookAt(scene.position);
// Add zoomCamera to main scene
scene.add(zoomCamera);
// render scene
renderer.clear();
renderer.setViewport(0, 0, width, height);
renderer.render(scene, camera);
// render inset
renderer.clearDepth(); // important!
renderer.setViewport(10, height - zoomHeight - 10, zoomWidth, zoomHeight);
renderer.render(scene, zoomCamera);
}
With only one renderer available, I am uncertain how to assign the "inset" container to the Viewport renderer correctly.
Do you have any suggestions or workarounds to address this challenge?