Better three.js setup

src/main.js

@@ -0,0 +1,34 @@
+import './style.css';
+import * as THREE from 'three';
+import WebGL from 'three/addons/capabilities/WebGL.js';
+
+const scene = new THREE.Scene();
+const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+
+const renderer = new THREE.WebGLRenderer({
+    canvas: document.querySelector('#canvas'),
+});
+renderer.setSize(window.innerWidth, window.innerHeight);
+
+const geometry = new THREE.BoxGeometry(1, 1, 1);
+const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+const cube = new THREE.Mesh(geometry, material);
+scene.add(cube);
+
+camera.position.z = 5;
+
+function animate() {
+    requestAnimationFrame(animate);
+
+    cube.rotation.x += 0.01;
+    cube.rotation.y += 0.01;
+
+    renderer.render(scene, camera);
+}
+
+if (WebGL.isWebGLAvailable()) {
+    animate();
+} else {
+    const warning = WebGL.getWebGLErrorMessage();
+    document.getElementById('container').appendChild(warning);
+}

src/style.css

@@ -0,0 +1,14 @@
+html,
+body,
+#canvas {
+    height: 100%;
+    width: 100%;
+    margin: 0;
+    padding: 0;
+    overflow: hidden;
+    background: #000;
+}
+
+#canvas {
+    outline: none;
+}