feat: isolated tank model

src/components/ArmorHighlightMaterial.tsx

@@ -1,42 +0,0 @@
-import { GreaterEqualDepth } from 'three';
-
-const INFLATE = '0.0';
-
-export function ArmorHighlightMaterial() {
-  return (
-    <shaderMaterial
-      depthFunc={GreaterEqualDepth}
-      args={[
-        {
-          transparent: true,
-
-          vertexShader: `
-          varying vec3 vNormal;
-          varying vec3 vViewPosition; // Camera position in view space
-          
-          void main() {
-              vNormal = normalMatrix * normal; // Transform normal to view space
-              vViewPosition = (modelViewMatrix * vec4(position, 1.0)).xyz; // Camera position in view space
-              gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-          }
-          `,
-
-          fragmentShader: `
-          // Fragment Shader
-          varying vec3 vNormal;
-          varying vec3 vViewPosition;
-          
-          void main() {
-              // Use vNormal for your fragment shader calculations
-              vec3 normal = normalize(vNormal);
-              float uhhh = dot(normal, vViewPosition) * 0.5 + 1.0;
-          
-              // ... rest of your fragment shader code ...
-              gl_FragColor = vec4(1.0, 0.0, 0.0, uhhh);
-          }
-          `,
-        },
-      ]}
-    />
-  );
-}

src/components/ArmorMesh.tsx

@@ -0,0 +1,22 @@
+import { MeshProps } from '@react-three/fiber';
+
+interface ArmorMeshProps extends MeshProps {}
+
+export function ArmorMesh(props: ArmorMeshProps) {
+  return (
+    <>
+      <mesh {...props}>
+        <meshBasicMaterial colorWrite={false} />
+      </mesh>
+
+      <mesh {...props} renderOrder={1}>
+        <meshBasicMaterial
+          transparent
+          opacity={Math.random() / 2}
+          color="red"
+          depthWrite={false}
+        />
+      </mesh>
+    </>
+  );
+}

src/components/HeadsUpDisplay.tsx

@@ -0,0 +1,53 @@
+import { createPortal, useFrame, useThree } from '@react-three/fiber';
+import { isInteger } from 'lodash';
+import { ReactNode } from 'react';
+import { Scene } from 'three';
+
+interface HeadsUpDisplayProps {
+  priority?: number;
+  children: ReactNode;
+}
+/**
+ * Renders `children` above the default scene, even if the priority is a
+ * negative number.
+ */
+export function HeadsUpDisplay({
+  priority = 1,
+  children,
+}: HeadsUpDisplayProps) {
+  const { gl: renderer, scene: defaultScene, camera } = useThree();
+  const scene = new Scene();
+  const portal = createPortal(children, scene, {
+    events: { priority: priority + 1 },
+  });
+
+  useFrame(() => {
+    if (priority === 1) {
+      renderer.clear();
+      renderer.render(defaultScene, camera);
+    }
+
+    renderer.clearDepth();
+    renderer.render(scene, camera);
+  }, priority);
+
+  renderer.autoClear = false;
+  if (!isInteger(priority)) {
+    throw new TypeError('Priority property must be an integer');
+  }
+
+  return portal;
+}
+
+/**
+ * Use this component if the default scene disappears on usage of the
+ * HeadsUpDisplay; caused because there are not HeadsUpDisplay components
+ * with `1` priority.
+ */
+export function RenderDefault() {
+  const { gl: renderer, scene, camera } = useThree();
+
+  useFrame(() => renderer.render(scene, camera));
+
+  return null;
+}