three.js dev template - module

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three@0.162/build/three.module.js",
      "three/addons/": "https://unpkg.com/three@0.162/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from 'three';
import { OrbitControls } from 'three/addons/controls/OrbitControls.js';

let renderer, scene, camera;

const data =   {
	"points": [
		{
			"x": 0,
			"y": 0,
			"z": 0
		},
		{
			"x": 0,
			"y": -1,
			"z": 0
		},
		{
			"x": 1,
			"y": -1,
			"z": 0
		},
    {
			"x": 1,
			"y": 0,
			"z": 0
		},
	]
};

init();
animate();

function init() {

		scene = new THREE.Scene();
    
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 0.1, 100 );
    camera.position.set( 5, 2, 5 );
    
    const shape = new THREE.Shape();
    
    shape.moveTo( 0, 0 ); // first point
    
    for ( let i = 1, l = data.points.length; i < l; i ++ ) {
    
    	const point = data.points[ i ];
      shape.lineTo( point.x, point.y );
    
    }
    
    const geometry = new THREE.ExtrudeGeometry( shape, { depth: 1, bevelEnabled: false } );
    geometry.center(); // optional
    const material = new THREE.MeshNormalMaterial();
 
    // mesh
    const mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );
    
    renderer = new THREE.WebGLRenderer( { antialias: true } );
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.setPixelRatio( window.devicePixelRatio );
    document.body.appendChild( renderer.domElement );

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

function animate() {

    requestAnimationFrame( animate );
    
    renderer.render( scene, camera );

}