three.js dev template - module

HTML

<div id="three-container"></div>

CSS

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

JavaScript

// Simple three.js example

import * as THREE from "https://threejs.org/build/three.module.js";
import { OrbitControls } from "https://threejs.org/examples/jsm/controls/OrbitControls.js";

let scene, camera, renderer, controls, threeContainer;

function init() {
	threeContainer = document.querySelector("#three-container");
	
	scene = new THREE.Scene();
	scene.background = new THREE.Color(0xdddddd);

	createCamera()
	createLights();
	createMeshes()
	createRenderer();
	createControls();

	renderer.setAnimationLoop( () => {

		update();
		render();

	});
	
}

function createCamera(){
	camera = new THREE.PerspectiveCamera(40,window.innerWidth/window.innerHeight,1,5000);
	
	camera.rotation.y = 45/180*Math.PI;
	camera.position.x = 10;
	camera.position.y = 10;
	camera.position.z = 10;
}

function createLights(){
	const ambientLight = new THREE.HemisphereLight(
	    0xddeeff, // sky color
	    0x202020, // ground color
	    5, // intensity
	  );

  const mainLight = new THREE.DirectionalLight( 0xffffff, 5 );
  mainLight.position.set( 10, 10, 10 );

  scene.add( ambientLight, mainLight );
}

function createMeshes(){
	const geometry = new THREE.BoxGeometry(1,1,1);
	const mat = new THREE.MeshNormalMaterial();
	const cube = new THREE.Mesh(geometry,mat);
	scene.add(cube);

	cube.position.x = 5;
	cube.position.z = -5;

}

function createRenderer(){

	renderer = new THREE.WebGLRenderer({antialias:true});
	renderer.setClearColor(0xdddddd)
	renderer.setSize(window.innerWidth,window.innerHeight);

	document.body.appendChild(renderer.domElement);

	renderer.gammaFactor = 2.2;
	renderer.gammaOutput = true;

	renderer.physicallyCorrectLights = true;

	threeContainer.appendChild( renderer.domElement );
}

function createControls() {
	controls = new OrbitControls( camera, threeContainer );
	controls.addEventListener('change', render);
}

function update() {
	// update elements in this function
}

// render, or 'draw a still image', of the scene
function render() {
  renderer.render(...