From c29fc513adbd9087272e3c9a0dd301ee26236bb1 Mon Sep 17 00:00:00 2001
From: Hykilpikonna <me@hydev.org>
Date: Fri, 10 Dec 2021 14:42:00 -0500
Subject: [PATCH] [+] Always on top

---
 src/animation/Helpers.ts           | 17 +++++++++++++++--
 src/animation/components/Cursor.ts | 13 +++++--------
 2 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/animation/Helpers.ts b/src/animation/Helpers.ts
index 3e29fb7..18f2ac3 100644
--- a/src/animation/Helpers.ts
+++ b/src/animation/Helpers.ts
@@ -39,11 +39,24 @@ export function box(width: number, height: number, depth: number): THREE.BufferG
  * @param r
  * @param hollow
  */
-export function circle(color: THREE.Color | number | string, z: number, r: number, hollow = false): THREE.Object3D
+export function circle(color: THREE.Color | number | string, z: number, r: number): THREE.Mesh
 {
     const geometry = new THREE.CircleGeometry(r, 32)
     const material = new THREE.MeshBasicMaterial({color})
-    const circle = hollow ? new THREE.Line(geometry, material) : new THREE.Mesh(geometry, material)
+    const circle = new THREE.Mesh(geometry, material)
     circle.position.z = z
     return circle
 }
+
+/**
+ * Ignore depth https://stackoverflow.com/a/62818553/7346633
+ * @param obj
+ * @param material
+ */
+export function alwaysOnTop(obj: THREE.Object3D, material: THREE.Material): void
+{
+    obj.renderOrder = 999
+    material.depthTest = false
+    material.depthWrite = false
+    obj.onBeforeRender = (r) => r.clearDepth()
+}
diff --git a/src/animation/components/Cursor.ts b/src/animation/components/Cursor.ts
index 81262c8..01308fc 100644
--- a/src/animation/components/Cursor.ts
+++ b/src/animation/components/Cursor.ts
@@ -1,9 +1,9 @@
 import * as THREE from "three";
-import {BufferGeometry, Color} from "three";
+import {BufferGeometry, Color, Material} from "three";
 import {MeshLine, MeshLineMaterial} from 'meshline';
 import IUpdatable from "@/animation/components/IUpdatable";
 import {moused} from "@/animation/Trackers";
-import {circle} from "@/animation/Helpers";
+import {alwaysOnTop, circle} from "@/animation/Helpers";
 
 type CursorConfig = {radius: number, color: Color, width: number}
 
@@ -11,7 +11,7 @@ export default class Cursor implements IUpdatable
 {
     camera: THREE.Camera
     circle: CursorCircle
-    dot: THREE.Object3D
+    dot: THREE.Mesh
 
     constructor(scene: THREE.Scene, conf: CursorConfig, camera: THREE.Camera)
     {
@@ -20,6 +20,7 @@ export default class Cursor implements IUpdatable
         scene.add(this.circle)
 
         this.dot = circle('#000', 0, 0.3)
+        alwaysOnTop(this.dot, this.dot.material as Material)
         scene.add(this.dot)
 
         this.circle.visible = false
@@ -59,11 +60,7 @@ export class CursorCircle extends THREE.Mesh implements IUpdatable
 
         this.camera = camera
 
-        // Ignore depth https://stackoverflow.com/a/62818553/7346633
-        this.renderOrder = 999
-        material.depthTest = false
-        material.depthWrite = false
-        this.onBeforeRender = (r) => r.clearDepth()
+        alwaysOnTop(this, material)
     }
 
     update(dt: number): void