<!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>