three.js

Question

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

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

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

从 Can multiple WebGLRenderers render the same scene? 开始，我们不能再次使用 THREE.WebGLRenderer() 作为子 window。

从How to render the same scene with different cameras in three.js?开始，一个解决方案可能是使用setViewport功能，但我不知道我是否可以在这个subwindow.[=26中显示球体的缩放=]

我尝试在 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 个对象（一个在主 window 上，另一个在右下角的子 window 上）？

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

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

提前致谢。

更新：

@WestLangley，谢谢，我做了你的修改（有一个独特的场景）但是插图的内容没有出现。

我认为这个问题是因为我不知道如何在 the container of inset 和这张 inset 的绘图之间制作 link。

比如上面的link，我试过：

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

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

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

确保在实例化渲染器时将 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 - 尝试将子window包含到主window中

three.js - Trying to include a subwindow into main window

javascript

zooming