Question

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

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

现在，我想在此子窗口中显示球体的缩放视图，而不是使用带有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，谢谢，我做了你的修改（带有一个独特的场景），但插图的内容没有出现。

我认为这个问题来自于我不知道如何在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）

你有解决方法吗？

Answer 1

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

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

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

three.js r.75

three.js - 尝试将子窗口包含在主窗口中

1 个答案: