updated three js template

public/js/main.js

@@ -0,0 +1,87 @@
+import * as THREE from 'three'
+import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js'
+import { Vector3 } from 'three'
+import { randFloat, randInt } from 'three/src/math/MathUtils.js'
+
+let scene, camera, renderer
+let aspect, frustumSize
+let mesh
+let delta
+let controls
+var clock = new THREE.Clock()
+
+function init(){
+	SetupRenderer()
+	scene = new THREE.Scene()
+	scene.background = new THREE.Color('white')
+	SetupCamera()
+	SetupControls()
+	SetupObjects()
+	animate()
+}
+
+function SetupRenderer(){
+	renderer = new THREE.WebGLRenderer({ antialias: true })
+	renderer.setSize(window.innerWidth, window.innerHeight)
+	document.getElementById('container').appendChild(renderer.domElement)
+}
+
+function SetupCamera(){
+	aspect = window.innerWidth / window.innerHeight
+	frustumSize = 10
+	camera = new THREE.OrthographicCamera(
+		frustumSize * aspect / -2,
+		frustumSize * aspect / 2,
+		frustumSize / 2,
+		frustumSize / -2,
+		0.01,
+		5000
+	)
+
+	camera.position.z = 20
+}
+
+function SetupControls(){
+	controls = new OrbitControls(camera, renderer.domElement)
+	controls.enableRotate = false;
+	controls.enablePan = true
+	controls.zoomToCursor = true;
+	controls.mouseButtons = {
+		RIGHT: THREE.MOUSE.ROTATE,
+		MIDDLE: THREE.MOUSE.DOLLY,
+		LEFT: THREE.MOUSE.PAN
+	}
+	camera.position.set(0, 0, 20)
+	controls.update()
+}
+
+function SetupObjects() {
+	let geo = new THREE.BoxGeometry(1, 1, 1)
+	let mat = new THREE.MeshNormalMaterial()
+	mesh = new THREE.Mesh(geo, mat)
+	scene.add(mesh)
+}
+
+function animate(){
+	requestAnimationFrame(animate)
+	controls.update()
+	delta = clock.getDelta() / 10
+	mesh.rotation.x += delta
+	mesh.rotation.z += delta
+	renderer.render(scene, camera)
+}
+
+window.addEventListener('resize', () => {
+	aspect = window.innerWidth / window.innerHeight
+	camera.left = -frustumSize * aspect / 2
+	camera.right = frustumSize * aspect / 2
+	camera.top = frustumSize / 2
+	camera.bottom = -frustumSize / 2
+	camera.updateProjectionMatrix()
+	renderer.setPixelRatio(window.devicePixelRatio)
+	renderer.setSize(window.innerWidth, window.innerHeight)
+})
+
+
+init()
+