Question

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

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

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

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

更新20151202

克隆方法运行正常但最终我使用了我的答案（下面）中提到的多视口多重渲染器解决方案。

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

Answer 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);

Answer 2

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

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

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

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

关键子例程是SOW_MouseClick_Maybe_on_Object。

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

2 个答案: