Compare three.js scenes with overlay slider

Compare two three.js scenes with a slider to overlay one on top of the other. I’ve often seen this used to compare images, and wanted to see if it was possible to do the same with two canvas elements. Turns out it is!

5 Likes

Cool! Indeed, this can be very handy :+1:

1 Like

I had the idea to use this to make a construction with raycaster on the left side. On the right side the result should be displayed. For this I had planned to use two different cameras OrthographicCamera/PerspectiveCamera.

First I added a second PerspectiveCamera with another position and extended the code accordingly. Cameras for containerA and B, rendererA and B etc. Controls only for one container …

There is no error message, but the behavior is not as expected.
Is my wish at all achievable with this approach?

Could you provide a live example? Hard to know what’s going on without that.

While creating the live example I changed something and suddenly it worked.:slightly_smiling_face:

Probably one of my primitive mistakes again.:slightly_frowning_face:
Strangely enough, there was no error message. Otherwise I constantly get some.

http://threejs.hofk.de/SceneComparsionTest/11_SceneComparsionTest.html

But maybe I don’t have the best solution :question::question::question:

Could you please repost your codepen?

See copy
scene comparison

in the Collection of examples from discourse.threejs.org

extended usage see Construction of frames with contour/profile

1 Like