THREE.js 通过对象克隆对多个画布的多个视图。陷阱？答案

【问题标题】：THREE.js Multiple views to Multiple Canvasses by Object Cloning. Pitfalls?THREE.js 通过对象克隆对多个画布的多个视图。陷阱？
【发布时间】：2013-09-07 07:04:15
【问题描述】：

在object picking from small three.js viewport 中，我获得了一种从小（非全屏）画布上用鼠标选择对象的方法。
但现在我想显示同一场景的 N 个不同视图，并且还能够进行对象拾取。

为了避免复杂性：-
我不希望在一张画布上有 N 个视口（根据 http://webglsamples.googlecode.com/hg/multiple-views/multiple-views.html）
而且我不喜欢做画布复制（根据Display different scenes sharing resources on multiple canvases 中gman 的好方法）。

我正在考虑为每个世界对象创建多个三个网格对象（克隆），每个场景一个克隆：renderer:canvas。
然后我只需要保持同步克隆的属性。

其他人已经这样做了吗？我是否忽略了任何陷阱？

更新 20151202

克隆方法运行良好，但最终我使用了我的答案中提到的多视口多渲染器解决方案（如下）。

现在，我使用一个全屏渲染器，该渲染器具有由多个摄像机提供的多个视口，所有这些都在一个场景中。

【问题讨论】：

There's this solution you might find interesting
@gman。谢谢，看起来确实很有趣。我在回答中使用了多视口多渲染器解决方案，但我会注意您的技术以供将来使用。现在我使用一个具有多个视口的全屏渲染器。

标签： javascript html canvas three.js

【解决方案1】：

这在完全相同的情况下对我有用。你能检查一下吗？

var obj = new THREE.Object3D();
function traverseChild( elem ) {
    if(elem.children instanceof Array && elem.children.length > 0) {
        for(var k in elem.children) {
            traverseChild(elem.children[k]);
            }
        } 

        if (elem instanceof THREE.Mesh) {
            var mesh = new THREE.Mesh(elem.geometry.clone(), elem.material.clone());
            mesh.scale.copy(elem.scale);
            mesh.rotation.copy(elem.rotation);
            mesh.position.copy(elem.position);
            obj.add(mesh);
        }
    }

traverseChild(target);

scene.add(obj);

【讨论】：

这看起来很强大，但我可以在创建原件时克隆对象，因此目前不需要它。我也选择了多个视口解决方案。
你能分享你的多视口选择解决方案吗？
在我的回答中我添加了一个链接。

【解决方案2】：

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

最终我想出了如何从同一场景的不同视口中挑选对象。诀窍涉及一个场景、多个视口和渲染器

以下不断发展的 html 应用程序使用了该方法，但恐怕它与许多其他（混乱）代码混在一起：- http://www.zen226082.zen.co.uk/TRI_VP.html 使用 Chrome/Opera（在 Windows 7 上）或 Firefox（在 Android 上）观看效果最佳。

单击键或以启用左右视口。然后，当您在三个视口中的任何一个中单击对象时，文本字段将报告对象名称，并且可能会发生其他一些操作，例如声音或对象颜色的变化或跳转到不同的网页。

关键子程序是 SOW_MouseClick_Maybe_on_Object。

【讨论】：