add minimap

public/main.js

@@ -2,12 +2,22 @@ import * as THREE from 'three'
 
 const global = (0,eval)("this")
 const scene = new THREE.Scene()
-const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000)
 const raycaster = new THREE.Raycaster()
+const camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 0.1, 1000)
 const renderer = new THREE.WebGLRenderer()
-const entities = {}
 renderer.setSize(window.innerWidth, window.innerHeight)
-renderer.setAnimationLoop(animate)
+renderer.setAnimationLoop(render)
+camera.position.set(5, -12, 10)
+camera.rotation.set((60 / 180) * Math.PI, 0, 0)
+
+const minimapCamera = new THREE.OrthographicCamera(-5, 5, 5, -5)
+const minimapRenderer = new THREE.WebGLRenderer()
+
+minimapRenderer.setSize(300, 300)
+minimapRenderer.setAnimationLoop(minimapRender)
+minimapCamera.position.set(5, 5, 10)
+
+const entities = {}
 
 const geometry = new THREE.PlaneGeometry(0, 0)
 const material = new THREE.MeshToonMaterial({ color: 0x115011 })
@@ -26,13 +36,15 @@ global.THREE = THREE
 global.renderer = renderer
 global.camera = camera
 global.scene = scene
-camera.position.set(3, -12, 10)
-camera.rotation.set((60 / 180) * Math.PI, 0, 0)
 
-function animate() {
+function render() {
 	renderer.render(scene, camera)
 }
 
+function minimapRender() {
+	minimapRenderer.render(scene, minimapCamera)
+}
+
 var websocket = null
 global.websocket = null
 var timerId = null
@@ -87,6 +99,8 @@ window.addEventListener('load', () => {
   connectWebSocket()
 
   const canvas = renderer.domElement
+  canvas.classList.add('canvas')
+
   canvas.addEventListener('mousedown', (event) => {
     raycaster.setFromCamera(new THREE.Vector2((event.clientX / canvas.clientWidth) * 2 - 1, (event.clientY / canvas.clientHeight) * -2 + 1), camera)
     const intersect = raycaster.intersectObject(ground).at(0)?.point
@@ -131,4 +145,8 @@ window.addEventListener('load', () => {
   document.addEventListener("contextmenu", (event) => event.preventDefault())
 
   document.body.appendChild(canvas)
+
+  const minimap = minimapRenderer.domElement
+  minimap.classList.add('minimap')
+  document.body.appendChild(minimap)
 })