Three js video with rounded corners

Questions
,
13

Nce solution, I thought of a special geometry.

RoundedRectangle - Mozilla Firefox 2021-08-02 21.4

The uv’s still need to be edited - soon.

<!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>
2 Likes