Hello. Faced the task of making a video with rounded corners. I tried to make 2 options. Shape. created a shape and added a video to it. But for some reason the video is not displayed as required. Apparently it is stretched. https://jsfiddle.net/lighty1235/baeyv0km/8/ Clip. created a plane an…

Yup that’s why its i said its an dirty alternative solution which gives the intended visual result . Alpha test value can also help make the edges crisp. if you want rounded geometry then try this here a code block which will map the uv map to 0 to 1 range, use it on your shape geometry var uvA…

you could use css3d or html in general. with a video element. i had this usecase once: Mixing HTML and WebGL w/ occlusion - CodeSandbox not a video in this case but an interactive html view, and it has rounded corners with overflow: hidden, so that would work for sure. other than that, a clipping ma…

In the BeginnerExample of the Collection of examples from discourse.threejs.org I have a working video. Different forms are possible. <body>  <video id="video" loop crossOrigin="anonymous" playsinline style="disp…

this is the usual shape that a square that a circle is the same, the task is to make the desired shape using a vector.

I would code a rectangle with rounded corners as a self-defined geometry. Thereby you have to generate the uv-values as well.

that’s exactly what I did. But it doesn’t work as expected

new THREE.ShapeBufferGeometry( shape ); is not a geometry defined with attributes (position, uv). I mean something like this, only much simpler SphereWithoutTrigonometry

Dirty alternative : Add normal rectangle plane matching video aspect use same aspect html canvas to draw white color rounded rectangle make a texture from the canvas and use it as opacity map on the rectangle plane

if we add a texture from the canvas, the shape of the rectangle itself does not change.

thanks it’s great! I do not quite understand. Have we calculated the height and width of the shape here?

In the fiddle its set to 90 by 50 meters let x = 1; let y = 1; let width = 90; let height = 50; let radius = 10; the above width and height ratio needs to match the video aspect and everything should look fine

Three js video with rounded corners

Questions

hofk August 3, 2021, 10:25am 14

Soon is now.

The video on rounded rectangle.

RoundedRectangle Click to start video.

RoundedRectangleVideo - Mozilla Firefox 2021-08-03

RoundedRectangle + Squircle

Topic		Replies	Views
How to make rounded edge in plane geometry? Questions	3	2480	April 14, 2024
Using Three.js ShaderMaterial to Round Corners of a Texture and Change its Aspect Ratio Questions shaders	1	1657	July 10, 2023
Plane mesh with rounded corners that can have an image texture Questions textures , geometry , threejs	2	5182	January 15, 2023
VideoTexture on 3D Object - Problem Appear Transparent Questions materials , video-texture , geometry	15	2838	December 6, 2021
How do I keep texture size and aspect ratio while applying rounded corners? Questions shaders	5	991	November 18, 2023

Three js video with rounded corners

Related topics