Simple Three.js Template

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>

CSS

body {
  margin: 0;
}
canvas {
  display: block;
}

JavaScript

/*
*    Simple Three.js Template 
*    @author mand http://mandemeskel.wordpress.com/
*/
var WIDTH = window.innerWidth,
    HEIGHT = window.innerHeight,
    ASPECT = WIDTH / HEIGHT,
    VIEW_ANGLE = 45, NEAR = 0.1, FAR = 10000;

let renderer, camera, scene;

const RED = false;  // draw red spheres on the left
const GREEN = true; // draw green spheres on the right

// when both are turned on green spheres are drawn on the left.

function init() {
    var directionalLight;

    //div element that will hold renderer
    const container = document.createElement('div');
    document.body.appendChild(container);

    //renderer
    renderer = new THREE.WebGLRenderer();
    renderer.setSize(WIDTH, HEIGHT);
    container.appendChild(renderer.domElement);
    scene = new THREE.Scene();

    //camera
    camera = new THREE.PerspectiveCamera(VIEW_ANGLE, ASPECT, NEAR, FAR);
    camera.position.z = 300;
    scene.add(camera);

    //set up sphere object, just for testing
    const redMaterial = new THREE.MeshBasicMaterial({  color: 0xff0000 });
       const geometry = new THREE.SphereBufferGeometry(20, 16, 16);
    
   const redSpheres = new THREE.InstancedMesh(geometry, redMaterial, 2);
   redSpheres.setMatrixAt(0, new THREE.Matrix4().makeTranslation(-80, -80, 0));
   window.setTimeout(() => {
   	redSpheres.setMatrixAt(1, new THREE.Matrix4().makeTranslation(-80,  80, 0));
    redSpheres.instanceMatrix.needsUpdate = true;
   }, 1000);
   scene.add(redSpheres);
}

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

init();
animate();