Compare models in realtime

(Amadeus) #1

There is a example in the docs for the viewer ( how to sync the lookat of two views when you click on control buttons.

I'm sure, there is a way to do this in "realtime" on mousemove but my javascript skills aren't good enough to get that working. Does someone know how to do that?

(I guess a combination with that other example is the solution?)


This should be possible by frequently polling the camera and lookat positions of both viewers, and setting the other viewer to match. Check out our Viewer Sharing experiment: (and the source code: )

I haven't tried it myself, but you basically want to do a bunch of getCameraLookAt() and setCameraLookAt() between the two viewers.

Maybe @mauricesvay has some tips?

(Amadeus) #3

Thanks for your reply. I will try that. Maybe I should increase my javascript skills wink

(Mauricesvay) #4

Nothing to add smile

Polling the camera is the only way to get the camera position regularly at the moment. The "Viewer sharing" experiment is definitely the code you should be looking at, as it basically does what you want to, over the Internet.

(Migenius) #5

Basically this strategy works but I am running up against a problem with it (aside from being a bit clunky unless you run a very tight loop). You can't really set the camera of 'the other' view since there is know way to know which view the user is manipulating at the time you update the camera.

I have tried various strategies to find out which iframe has focus but most people seem to indicate this is difficult or impossible to do consistently. Can you think of anyway in which we can detect which of multiple iframes using Sketchfab is actually active in terms of user input at a given point in time?

To work usefully the sync needs to be from which ever viewer the user is navigating on to all other viewers on the page. Without knowing which viewer is active I am not sure how this can be done. Any ideas? Would be great if there was an event in the API which told us when a viewer got focus. Of course an oncamerachange event would be even better still.

Definitely looking for any creative ideas of how to do this, I think there is something I just haven't thought of.

(Mauricesvay) #6

The easiest is to avoid bidirectional communication, and allow only one iframe to change the other's camera.

(Mauricesvay) #7

Here's an example of comparing 2 models:

This one should allow you move the camera in any of the two viewers.

The corresponding code is available here:

So basically, there's a lock that allows only one viewer to change the camera on the other. As soon as the camera stops moving, the lock is released, so that eventually the other viewer can have it.

Hope that helps.

(Mauricesvay) #8

@migenius let me know if this works for you smile

(Migenius) #9

Thanks for the pointer, looks good. I need to finish another part of the application before testing in detail but reading the code I don't see any reason we couldn't use that. I will probably want to poll a bit tighter, since we are not allowing look navigation and only orbit, zoom and pan I am wondering if I can omit the check on the target point since the navigation modes we use can't change that without changing the camera position.

(Amadeus) #10

Seems my JS skills aren't good enough to get it working, I placed a request on the jobboard:
Maybe someone here is interested in it.

(Gary M Rowe) #11

I've just come across this and the Labs example of comparing two models. I've changed the Sketchfab model source of two models that should be very very similar but the position of the camera is not correct. I can't for the life of me figure out which value to change to adjust the right hand side model position.