三.js - 试图在主窗口中包含一个子窗口 [英] three.js - Trying to include a subwindow into main window

问题描述

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

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

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

来自 多个 WebGLRenderer 可以渲染同一个场景吗?，我们子窗口不能再次使用 THREE.WebGLRenderer().

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

我尝试在 render() 函数中做:

function render() {控制更新()；请求动画帧(渲染)；zoomCamera.position.copy(camera.position);zoomCamera.position.sub(controls.target);zoomCamera.position.setLength(500);zoomCamera.lookAt(zoomScene.position);//为 zoomScene 添加视口renderer.setViewport(0, 0, width, height);renderer.render(场景，相机)；zoomRenderer.setViewport(0, 0, 200, 200);zoomRenderer.render(zoomScene, zoomCamera);}

根据您的建议，技术上是否可以同时拥有 2 个对象(一个在主窗口上，另一个在右下子窗口上)?

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

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

提前致谢.

更新:

@WestLangley ，谢谢，我做了你的修改(有一个独特的场景)但插图的内容没有出现.

我认为这个问题来自于我不知道如何在inset的容器​​和这个inset的绘制之间建立链接.>

例如，进入上面的链接，我试过:

<代码>...//将球体添加到主场景场景添加(球体)；相机.位置.z = 10;var 控件 = 新的 THREE.TrackballControls(camera);//如果我在下面包含这两行，则不会出现任何内容//zoomContainer = document.getElementById('zoomContainer');//zoomContainer.appendChild(renderer.domElement);//缩放相机zoomCamera = new THREE.PerspectiveCamera(50, zoomWidth, zoomHeight, 1, 1000);zoomCamera.position.z = 20;zoomCamera.up = 相机.up;//重要的！//调用渲染函数使成为();函数渲染(){控制更新()；请求动画帧(渲染)；zoomCamera.position.copy(camera.position);zoomCamera.position.sub(controls.target);zoomCamera.position.setLength(camDistance);zoomCamera.lookAt(scene.position);//将 zoomCamera 添加到主场景场景.添加(变焦相机)；//渲染场景renderer.clear();renderer.setViewport(0, 0, width, height);renderer.render(场景，相机)；//渲染插图渲染器.clearDepth();//重要的！renderer.setViewport(10, height - zoomHeight - 10, zoomWidth, zoomHeight);renderer.render(场景，zoomCamera)；

}

鉴于我只有一个渲染器，我不知道如何将 "inset" 容器 分配给 Viewport 的渲染器(即使用好的 renderer.setViewport)

你有解决方法吗?

解决方案

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

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

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

renderer.autoClear = false;

然后，在你的渲染循环中，使用这个模式

//渲染场景renderer.clear();renderer.setViewport( 0, 0, window.innerWidth, window.innerHeight );renderer.render(场景，相机)；//渲染插图渲染器.clearDepth();//重要的！renderer.setViewport( 10, window.innerHeight - insetHeight - 10, insetWidth, insetHeight );renderer.render(场景，camera2)；

three.js r.75

I try to include, into a main window (representing sphere), a subwindow representing a zoomed view of this sphere.

For this moment, I can display a right-bottom subwindow containing the three axes of main scene. These axes are rotating the same way I make rotate the sphere with mouse.

Now, I would like to display, into this subwindow, a zoomed view of the sphere instead of having the subwindow with 3D axes.

From Can multiple WebGLRenderers render the same scene?, we can't use a second time the THREE.WebGLRenderer() for the subwindow.

From How to render the same scene with different cameras in three.js? ,a solution may be to use setViewport function but I don't know if I can display the zoom of sphere in this subwindow.

I tried to do in 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);

  }

From your advices, is it possible technically to have 2 object in the same time (one on main window and the other on right-bottom subwindow) ?

Can I solve my issue with setViewport ?

And if someone could give documentation on setViewport, this would be great.

Thanks in advance.

UPDATE :

@WestLangley , thanks, I did your modifications (with a unique scene) but the content of inset does not appear.

I think that issue comes from the fact that I don't know how to make the link between the container of inset and the drawing of this inset.

For example, into the link above, I tried :

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

}

Given that I have only one renderer, I don't knwo how to assign the "inset" container to the renderer of Viewport (i.e with the good renderer.setViewport)

Would you have got a workaround ?

解决方案

You want to render another view of your scene in an inset window.

Create one scene, and two cameras.

Make sure you set autoClear to false when you instantiate the renderer.

renderer.autoClear = false;

Then, in your render loop, use this pattern

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

这篇关于三.js - 试图在主窗口中包含一个子窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！