THREE.js通过对象克隆的多个视图的多个视图。陷阱？ [英] THREE.js Multiple views to Multiple Canvasses by Object Cloning. Pitfalls?

问题描述

在从small three.js视口进行对象撷取中，我给定一种方式来从一个小的（不是全屏）画布中选择对象。

但是现在我想显示同一个场景的N个不同的视图，也可以做对象选择。

In object picking from small three.js viewport I was given a way to mouse-pick objects from a small (not fullscreen) canvas.
But now I want to display N different views of the same scene and also be able to do object picking.

为避免复杂性： -

我不想在一个画布上有N个视口（如 http://webglsamples.googlecode.com/hg/multiple-views/multiple-views.html ）< br>
和我不喜欢做画布复制（根据gman的好方法在显示在多个画布上共享资源的不同场景）。

To avoid complexity:-
I prefer not to have N viewports on one canvas (as per http://webglsamples.googlecode.com/hg/multiple-views/multiple-views.html)
and I prefer not to do canvas copying (as per gman's nice method in Display different scenes sharing resources on multiple canvases).

我想为每个世界对象创建多个THREE网格物体（克隆），每个场景一个克隆：渲染器：画布。

然后我只需要保持同步的克隆的属性。

I am thinking to create, for each world object, multiple THREE mesh objects (clones), one clone for each scene:renderer:canvas.
Then I just need to keep-in-synch the properties of the clones.

有没有人这样做？我忽略了任何陷阱？

Has anybody else done this already? Have I overlooked any pitfalls?

更新20151202

克隆方法运作良好，但最终我多视口多渲染器解决方案在我的答案（下面）。

The cloning method worked OK but eventually I went with the multi-viewport multi-renderer solution mentioned in my answer (below).

现在，我使用一个全屏渲染器，多个摄像机在一个场景内提供多个视口。

Nowadays I use one full-screen renderer with multiple viewports fed by multiple cameras all within one scene.

推荐答案

对于我来说，克隆对象并不优雅。

For me cloning objects was not elegant.

最终我想出了如何从同一个场景的不同视口中选择对象。
该技巧涉及一个场景，多个视口和渲染器

Eventually I figured out how to pick objects from different viewports of the same scene. The trick involves one scene, multiple viewports and renderers

以下演变的html应用程序使用该方法，但恐怕它与很多其他（乱码）代码： -
http://www.zen226082.zen.co .uk / TRI_VP.html
使用Chrome / Opera（在Windows 7上）或Firefox（在Android上）最佳浏览。

The following evolving html app utilizes the method but I am afraid it is mixed up with a lot of other (messy) code:- http://www.zen226082.zen.co.uk/TRI_VP.html Best viewed with Chrome/Opera (on Windows 7) or Firefox (on Android).

点击键; 1>或<3>以启用左视口和右视口。
然后，当您在三个视口中的任一个中单击对象时，文本字段将报告对象名称，并且可能发生一些其他操作，例如声音或对象颜色的更改或跳转到其他网页。

Click keys <1> or <3> to enable the left and right viewports. Then when you click on an object in any of the three viewports a text field will report the object name and some other action may occur such as a sound or a change in object color or a jump to a different web-page.

关键子程序是SOW_MouseClick_Maybe_on_Object。

The key subroutine is SOW_MouseClick_Maybe_on_Object.

这篇关于THREE.js通过对象克隆的多个视图的多个视图。陷阱？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！