THREE.js Multiple views to Multiple Canvasses by Object Cloning. Pitfalls?

Question

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.

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

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?

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

[There's this solution you might find interesting](http://stackoverflow.com/questions/30608723/is-it-possible-to-enable-unbounded-number-of-renderers-in-three-js/30633132#30633132) — gman, Nov 29 '15 at 04:13
@gman. Thanks that does look interesting. I went with the multi-viewport multi-renderer solution in my answer, but I will note your technique for future use. Nowadays I use one full-screen renderer with multiple viewports. — steveOw, Dec 02 '15 at 14:13

hawaii · Answer 1 · 2013-12-25T19:26:02.557

0

This worked for me in the exact same situation. Could you check it out?

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

edited Dec 25 '13 at 19:26

answered Dec 25 '13 at 19:10

hawaii

328
4
12

That looks powerful but I can clone objects when I create the originals so dont currently need it. Also I went with multiple viewports solution. – steveOw Jan 06 '14 at 14:29
Could you share your multiple viewport pick solution? – hawaii Jan 07 '14 at 23:31
In my answer I have added a link. – steveOw Jan 08 '14 at 16:32

steveOw · Accepted Answer · 2014-01-08T14:53:47.833

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

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

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.

The key subroutine is SOW_MouseClick_Maybe_on_Object.

THREE.js Multiple views to Multiple Canvasses by Object Cloning. Pitfalls?

2 Answers2

Linked