JSFiddle - React, Tailwind, and code Playground

by Thanos Saringelos

HTML

<script src="//cdn.rawgit.com/mrdoob/three.js/master/build/three.min.js"></script>
<script>

function ExtrudeBufferGeometry( shapes, options ) {

	THREE.BufferGeometry.call( this );

	this.type = 'ExtrudeBufferGeometry';

	this.parameters = {
		shapes: shapes,
		options: options
	};

	shapes = Array.isArray( shapes ) ? shapes : [ shapes ];

	var scope = this;

	var verticesArray = [];
	var uvArray = [];

	for ( var i = 0, l = shapes.length; i < l; i ++ ) {

		var shape = shapes[ i ];
		addShape( shape );

	}

	// build geometry

	this.addAttribute( 'position', new THREE.Float32BufferAttribute( verticesArray, 3 ) );
	this.addAttribute( 'uv', new THREE.Float32BufferAttribute( uvArray, 2 ) );

	this.computeVertexNormals();

	// functions

	function addShape( shape ) {

		var placeholder = [];

		// options

		var curveSegments = options.curveSegments !== undefined ? options.curveSegments : 12;
		var steps = options.steps !== undefined ? options.steps : 1;
		var depth = options.depth !== undefined ? options.depth : 100;

		var bevelEnabled = options.bevelEnabled !== undefined ? options.bevelEnabled : true;
		var bevelThickness = options.bevelThickness !== undefined ? options.bevelThickness : 6;
		var bevelSize = options.bevelSize !== undefined ? options.bevelSize : bevelThickness - 2;
		var bevelSegments = options.bevelSegments !== undefined ? options.bevelSegments : 3;

		var extrudePath = options.extrudePath;

		var uvgen = options.UVGenerator !== undefined ? options.UVGenerator : WorldUVGenerator;

		// deprecated options

		if ( options.amount !== undefined ) {

			console.warn( 'THREE.ExtrudeBufferGeometry: amount has been renamed to depth.' );
			depth = options.amount;

		}

		//

		var extrudePts, extrudeByPath = false;
		var splineTube, binormal, normal, position2;

		if ( extrudePath ) {

			extrudePts = extrudePath.getSpacedPoints( steps );

			extrudeByPath = true;
			bevelEnabled = false; // bevels not supported for path extrusion

			// SETUP TNB...

CSS

body {
	  margin: 0;
}

JavaScript

var camera, scene, renderer;
var mesh;

init();
animate();

function init() {

    camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 100 );
    camera.position.z = 30;

    scene = new THREE.Scene();

    var length = 12, width = 8;

		var shape = new THREE.Shape();
		shape.moveTo( 0,0 );
		shape.lineTo( 0, width );
		shape.lineTo( length, width );
		shape.lineTo( length, 0 );
		shape.lineTo( 0, 0 );

		var extrudeSettings = {
			steps: 1,
			depth: 2,
			bevelEnabled: true,
			bevelThickness: 2,
			bevelSize: 1,
			bevelSegments: 1
		};
		
		var geometry = new ExtrudeBufferGeometry( shape, extrudeSettings );
		geometry.center();
		var material = new THREE.MeshNormalMaterial( { wireframe:true,side: THREE.DoubleSide } );
		
		mesh = new THREE.Mesh( geometry, material ) ;
		scene.add( mesh );

    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    document.body.appendChild( renderer.domElement );

}

function animate() {

    requestAnimationFrame( animate );

    mesh.rotation.x += 0.0003;
    mesh.rotation.y += 0.0005;

    renderer.render( scene, camera );

}