Displaying a part of video texture

Questions
1

Hi,

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

image
image.jpg761×469 84.6 KB

image
image.png784×493 2.66 KB

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
2

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
3

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.

4

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

5

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

recomputeUVs
recomputeUVs.jpg765×465 58.6 KB

3 Likes
6

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

7

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

8

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
9

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

image
image.png944×461 6.05 KB

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.