Update renderer.js

js/renderer.js

@@ -1 +1,41 @@
+import * as THREE from 'three';
 
+class Renderer {
+  constructor() {
+    this.canvas = document.getElementById('gameCanvas');
+    this.scene = new THREE.Scene();
+
+    this.camera = new THREE.PerspectiveCamera(
+      75,
+      window.innerWidth / window.innerHeight,
+      0.1,
+      1000
+    );
+    this.camera.position.z = 5;
+
+    this.renderer = new THREE.WebGLRenderer({ canvas: this.canvas });
+    this.resize();
+    window.addEventListener('resize', () => this.resize());
+
+    // Add a basic cube to the scene
+    const geometry = new THREE.BoxGeometry();
+    const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
+    this.cube = new THREE.Mesh(geometry, material);
+    this.scene.add(this.cube);
+  }
+
+  resize() {
+    this.renderer.setSize(window.innerWidth, window.innerHeight);
+    this.camera.aspect = window.innerWidth / window.innerHeight;
+    this.camera.updateProjectionMatrix();
+  }
+
+  render() {
+    this.cube.rotation.x += 0.01;
+    this.cube.rotation.y += 0.01;
+
+    this.renderer.render(this.scene, this.camera);
+  }
+}
+
+export default Renderer;