# Three js video with rounded corners

**URL:** <https://discourse.threejs.org/t/three-js-video-with-rounded-corners/28543>\
**Category:** Questions\
**Tags:** threejs, geometry\
**Created:** [July 31, 2021, 10:33am UTC](https://discourse.threejs.org/t/three-js-video-with-rounded-corners/28543 "2021-07-31T10:33:41Z")\
**Posts on this page:** 1\
**Showing post:** 13

<div class="post-metadata">

**Author:** ![hofk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hofk/32/44944_2.png) [@hofk](https://discourse.threejs.org/u/hofk)\
**Post date:** [August 2, 2021, 7:49pm UTC](https://discourse.threejs.org/t/three-js-video-with-rounded-corners/28543/13 "2021-08-02T19:49:34Z")

</div>

Nce solution, I thought of a special geometry.

![RoundedRectangle - Mozilla Firefox 2021-08-02 21.4](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/3/33bfc68982847daa48d105751985c0e8125f9b34.png)

_The uv’s still need to be edited - soon._

```javascript
<!DOCTYPE html>
<!--https://discourse.threejs.org/t/three-js-video-with-rounded-corners/28543/10--> 
<head>
	<title> RoundedRectangle </title>
	<meta charset="utf-8" />
	<style>	
	body { margin: 0; }
	</style>
</head>
<body>

</body>
 
 <script type="module">
 
// @author hofk
 
import * as THREE from "../jsm/three.module.130.js";
import { OrbitControls } from "../jsm/OrbitControls.130.js";

const scene = new THREE.Scene( );
const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.01, 10000 );
camera.position.set( 0, 6, 40 );
const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor( 0xdedede, 1 );	
const container = document.createElement( 'div' );
document.body.appendChild( container );
container.appendChild( renderer.domElement );

const controls = new OrbitControls( camera, renderer.domElement );

let s = 12; // smoothness
const w = 16;
const h = 9;
const r = 2;

// helper const's
const wi = w / 2 - r;
const hi = h / 2 - r;
const w2 = w / 2;
const h2 = h / 2;
const ul = r / w;
const ur = ( w - r ) / w;
const vl = r / h;
const vh = ( h - r ) / h;

let positions = [

	-wi, -h2, 0, wi, -h2, 0, wi, h2, 0,
	-wi, -h2, 0, wi, h2, 0, -wi, h2, 0,	
	-w2, -hi, 0, -wi, -hi, 0, -wi, hi, 0,
	-w2, -hi, 0, -wi, hi, 0, -w2, hi, 0,	
	 wi, -hi, 0, w2, -hi, 0, w2, hi, 0,
	 wi, -hi, 0, w2, hi, 0, wi, hi, 0
	 
];
/*
let uvs = [
	
	ul, 0, ur, 0, ur, 1,
	ul, 0, ur, 1, ul, 1,
	 0, vl, ul, vl, ul, vh,
	 0, vl, ul, vh, 0, vh,
	ur, vl, 1, vl, 1, vh,
	ur, vl, 1, vh,	ur, vh 
	
];
*/
let phia = 0; 
let phib, xc, yc;

for ( let i = 0; i < s * 4; i ++ ) {
	
	xc = i < s || i >= 3 * s ? wi : - wi;
	yc = i < 2 * s ? hi : -hi;
	phib = Math.PI * 2 * ( i + 1 ) / ( 4 * s ); 
	positions.push( xc, yc, 0, xc + r * Math.cos( phia ), yc + r * Math.sin( phia ), 0, xc + r * Math.cos( phib ), yc + r * Math.sin( phib ), 0 );
	phia = phib;
	
	// still without uvs ... 
	
}

const material = new THREE.MeshBasicMaterial( { color: 0xff0000 , side: THREE.DoubleSide, wireframe: true } );
const geometry = new THREE.BufferGeometry( );
geometry.setAttribute( 'position', new THREE.BufferAttribute( new Float32Array( positions ), 3 ) );
//geometry.setAttribute( 'uv', new THREE.BufferAttribute( new Float32Array( uvs ), 2 ) );
const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
 
animate( );  

function animate( ) {
	
	requestAnimationFrame( animate );
	renderer.render( scene, camera );
		
} 
 
</script>

</html>

```

---

_[View the full topic](https://discourse.threejs.org/t/three-js-video-with-rounded-corners/28543)._
