three.js dev template - module

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/es-module-shims@1.3.6/dist/es-module-shims.js"></script>
    
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
      "three/addons/": "https://unpkg.com/three/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

// Simple three.js example

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

let mesh, renderer, scene, camera, controls;

init();
animate();

function init() {

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

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(0, 20, 100);

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

  // ambient
  scene.add(new THREE.AmbientLight(0xffffff));

  // light
  const light = new THREE.DirectionalLight(0xffffff, 3);
  light.position.set(20, 20, 0);
  scene.add(light);

  // axes
  scene.add(new THREE.AxesHelper(20));

  const shape = new THREE.Shape();
  shape.moveTo(-5, 5);
  shape.lineTo(5, 5);
  shape.lineTo(10, -5);
  shape.lineTo(-10, -5);
  shape.lineTo(-5, 5);

const points = [
	new THREE.Vector3(0, 0, 0),
	new THREE.Vector3(20, 0, 10),
	new THREE.Vector3(40, 0, 15),
	new THREE.Vector3(60, 0, 25),
	new THREE.Vector3(80, 0, 40),
	new THREE.Vector3(100, 0, 60),
];
  const path = new THREE.CatmullRomCurve3(points);

  const geo = new THREE.ExtrudeGeometry(shape, {
    extrudePath: path,
    steps: 10,
    bevelEnabled: false,
  });
 

  const mat = new THREE.MeshPhongMaterial({
    color: 0x00ffff
  });
  const mesh = new THREE.Mesh(geo, mat);
  
  mesh.rotateOnWorldAxis( new THREE.Vector3( 2, 0, 1 ).normalize(), Math.PI * 0.5 );

  scene.add(mesh);

}

function animate() {

  requestAnimationFrame(animate);

  //controls.update();

  renderer.render(scene, camera);

}