three.js dev template - module

CSS

body {
	background-color: #000;
	margin: 0px;
	overflow: hidden;
}

JavaScript

import * as THREE from "https://cdn.jsdelivr.net/npm/three@0.117.1/build/three.module.js";
import { OrbitControls } from "https://cdn.jsdelivr.net/npm/three@0.117.1/examples/jsm/controls/OrbitControls.js";

var scene, camera, renderer;

init();
animate();

function init() {

	scene = new THREE.Scene();

	//

	camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 1000 );
	camera.position.set( 25, 25, 50 );

	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: 2,
		depth: 16,
		bevelEnabled: false
	};

	var geometry = new THREE.ExtrudeBufferGeometry( shape, extrudeSettings );
	geometry.center();
	var mesh = new THREE.Mesh( geometry, [
		new THREE.MeshBasicMaterial( { color: 0x00ff00 } ),
		new THREE.MeshBasicMaterial( { color: 0xffff00 } )
	] ) ;
	scene.add( mesh );

	//

	renderer = new THREE.WebGLRenderer( { antialias: true } );
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	document.body.appendChild( renderer.domElement );
	
	var controls = new OrbitControls( camera, renderer.domElement );

	//

	window.addEventListener( 'resize', onWindowResize, false );

}

function onWindowResize() {

	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();

	renderer.setSize( window.innerWidth, window.innerHeight );

}

function animate() {

	requestAnimationFrame( animate );

	render();

}

function render() {

	renderer.render( scene, camera );

}