box: box.html

<!DOCTYPE html>

<html>
<head>

<title>Comp 86 example: Box</title>

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

<script type="module">

/*
 * Our own stuff goes here: Create our scene graph 
 */
class SceneGraph extends THREE.Scene { //*1 This creates our scene graph, other classes are boilerplate
    constructor () {
	// Call the superclass' constructor
	super()

	this.add (//*3 Add our stuff to our scene graph
		new THREE.Mesh( //*2 Create box 
			new THREE.BoxGeometry( 1, 1, 1 ), //*2 
			new THREE.MeshBasicMaterial())) //*2
    }
}

/*
 * The rest of this is boilerplate
 */

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

class Main {
	constructor () {
		// Set up window for 3D
		this.renderer = new THREE.WebGLRenderer( { antialias: true } );
		this.renderer.setClearColor( new THREE.Color ("lightgrey"))
		this.renderer.setSize( window.innerWidth, window.innerHeight );
		document.body.appendChild( this.renderer.domElement );

		// Create our scene
		this.scene = new SceneGraph();

		// Create the camera
		this.camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
		this.camera.position.z = 5; //*4 Boilerplate: Move camera +5 Z (toward user)

		// Create a camera contol
		new OrbitControls( this.camera, this.renderer.domElement );

		// Start animation loop
		this.animate()

		// In case window is resized
		// use () form of function definition cause need "this"
		// but don't need "event" arg
		window.onresize = () => this.onResize()
	}

	/*
	 * Render the scene
	 */
	render() { //*5 Boilerplate: Use javascript animation callback
		this.renderer.render( this.scene, this.camera ); //*5
	}

	/*
	 * Animation loop
	 */
	animate () { //*5
		requestAnimationFrame (() => {this.animate()}); //*5
		this.render() //*5
	}

	// In case window is resized
	onResize () {
		this.renderer.setSize( window.innerWidth, window.innerHeight );

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

		this.render()
	}
}

window.onload = () => new Main ()

</script>
</head>
</html>
[download file]