JSFiddle - React, Tailwind, and code Playground

by Colmea

CSS

<html>
	<head>
		<title>My first Three.js app</title>
		<style>canvas { width: 100%; height: 100% }</style>
	</head>
	<body>

	</body>
</html>

JavaScript

// INIT SCENE
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
camera.position.z = 300;
camera.position.y += 30;
camera.position.x += 200;

var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 0, 1, 1 ).normalize();
scene.add(light);


var measures = {
    width: 400,
    thickness: 20,
    height: 150,
};

var hole = {
    top: 0,
    left: 100,
    width: 80,
    height: 40
};

// Create shape
var pts = [];
pts.push( new THREE.Vector2(0, 0) );
pts.push( new THREE.Vector2(measures.width, 0) );
pts.push( new THREE.Vector2(measures.width, measures.height) );
pts.push( new THREE.Vector2(0, measures.height) );

var shape = new THREE.Shape(pts);

// aAdd hole
var holePath = new THREE.Path();
holePath.moveTo(hole.left, hole.top + hole.height);
holePath.lineTo(hole.left + hole.width, hole.top + hole.height);
holePath.lineTo(hole.left + hole.width, hole.top);
holePath.lineTo(hole.left, hole.top);

shape.holes.push(holePath);
          
// Set extrude settings
var extrudeSettings = {
    amount			: measures.thickness,
    steps			: 1,
    bevelEnabled	: false
};

var geometry = new THREE.ExtrudeGeometry( shape, extrudeSettings);
var material = new THREE.MeshPhongMaterial( { ambient: 0x050505, color: 0x0033ff, specular: 0x555555, shininess: 30 } );
var mesh = new THREE.Mesh( geometry, material);

//mesh.rotation.y += 10 * (Math.PI/180);
//mesh.rotation.x += 5 * (Math.PI/180);

scene.add(mesh);

function render() {
	requestAnimationFrame(render);
	renderer.render(scene, camera);
}
render();