Displaying a part of video texture

Hi,

I’m tying to create multiple draggable windows that display a part of video depending on the position.


I’m having problems finding the right solution.
The windows-cubes are displayed in a 3D space. I considered using transparency or using canvas. Is there a way to do this elegantly. Thanks in advance.

1 Like

It depends, do you want it to look like your first image, or being only seamless when the cubes are at the same height?

Using screen coordinates would make any overlapping front faces show a seamless part of the video at the same size like in your first image. Using world coordinates would look like screen pieces showing a part of the video.

1 Like

The windows/boxes are on a variying “z” axis; in front or back of each other. The display should not be seemless but more like multiple screens displaying the video partly. The first picture is just a sketch, not showing the desired end result.
Thanks for the reply.

I’ll make a pen later, i’m currently not home.

Hi!
Just an option, not the ultimate solution: https://codepen.io/prisoner849/pen/rEWOrV?editors=0010
with re-computing of UVs.

3 Likes

that is it mate, will test it with video. Thanks.

I would wait for @Fyrestar’s solution :slight_smile:

I see you already did :smile: @hulf i guess you wanted one with screenspace coordinates then, this is a naive example for a world position one.

3 Likes

Thanks Fyestar, I will need some time to process it :).
I can’t get the code to work, could be my Firefox/system:

Using another video:
Loading failed for the with source “”. vqyOwX:1

The resource at was blocked because tracking protection is enabled.[Learn More] [)

Loading failed for the with source “”. vqyOwX:1

TypeError: n is null[Learn More] FooterAd.js:34:16

unreachable code after return statement [7a8a9fca-36bc-4208-ad82-269e57706b2a:82:4]

unreachable code after return statement [7a8a9fca-36bc-4208-ad82-269e57706b2a:91:4]

This site appears to use a scroll-linked positioning effect. This may not work well with asynchronous panning; see ScrollLinkedEffects for further details and to join the discussion on related tools and features! )

THREE.WebGLRenderer 105

will try it on another PC with windows.