javascript - Three.js - 尝试将子窗口包含到主窗口中

Question

我尝试在主窗口(代表球体)中包含一个代表该球体的缩放 View 的子窗口。

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

现在，我想在该子窗口中显示球体的缩放 View ，而不是使用具有 3D 轴的子窗口。

来自Can multiple WebGLRenderers render the same scene? ，我们不能对子窗口再次使用 THREE.WebGLRenderer()。

来自How to render the same scene with different cameras in three.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，谢谢，我做了你的修改(使用独特的场景)，但插图的内容没有出现。

我认为这个问题来自于我不知道如何在插图容器和该插图的绘制之间建立链接。

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

...
 // 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”容器分配给Viewport的渲染器(即使用良好的 >renderer.setViewport)

你有解决办法吗？

Answer 1

您想要在嵌入窗口中渲染场景的另一个 View 。

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

在实例化渲染器时，请确保将 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