尝试在主窗口中包含子窗口

Trying to include a subwindow into main window

本文关键字：窗口 包含      更新时间：2023-09-26

我尝试在主窗口（表示球体）中包含一个代表该球体缩放视图的子窗口。

此时，我可以显示一个包含主场景三个轴的右下角子窗口。这些轴的旋转方式与我用鼠标旋转球体的方式相同。

现在，我想在这个子窗口中显示球体的缩放视图，而不是让子窗口具有 3D 轴。

从多个WebGLRender渲染相同的场景吗？，我们不能再次使用子窗口的THREE.WebGLRenderer()。

从 如何在三个.js中用不同的摄像机渲染相同的场景，解决方案可能是使用setViewport函数，但我不知道我是否可以在这个子窗口中显示球体的缩放。

我试图在render()函数中做： 

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);
  }

根据您的建议，技术上是否可以同时拥有 2 个对象（一个在主窗口上，另一个在右下角子窗口中）？

我可以用setViewport解决我的问题吗？

如果有人可以提供关于setViewport的文档，那就太好了。

提前谢谢。

更新：

@WestLangley ，谢谢，我做了您的修改（具有独特的场景），但没有显示插图的内容。

我认为这个问题来自这样一个事实，即我不知道如何在the container of inset和这inset的图纸之间建立联系。

例如，在上面的链接中，我尝试：

...
 // 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);

}

鉴于我只有一个渲染器，我不知道如何将"inset" container分配给Viewport的渲染器（即具有良好的renderer.setViewport）

你会有解决方法吗？

您希望在插图窗口中渲染场景的另一个视图。

创建一个场景和两个摄像机。

确保在实例化渲染器时将autoClear设置为 false。

renderer.autoClear = false;

然后，在渲染循环中，使用此模式

// render scene
renderer.clear();
renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );
renderer.render( scene, camera );
// render inset
renderer.clearDepth(); // important!
renderer.setViewport( 10, window.innerHeight - insetHeight - 10, insetWidth, insetHeight );
renderer.render( scene, camera2 );

三.js R.75

相关文章：