feat: render screens

src/main.ts

@@ -44,6 +44,7 @@ scene.add(directional);
 // main loop
 renderer.setAnimationLoop(() => {
   controls.update();
+  nds.update();
 
   renderer.render(scene, camera);
 });

src/nds.ts

@@ -1,9 +1,35 @@
 import * as THREE from "three";
 import { GLTFLoader } from "three/addons/loaders/GLTFLoader.js";
 
+const SCREEN_SOURCE_TEX_SIZE = 1024;
+const TOP_SCREEN_SOURCE_TEX_HEIGHT = SCREEN_SOURCE_TEX_SIZE / 404;
+const BOT_SCREEN_SOURCE_TEX_HEIGHT = SCREEN_SOURCE_TEX_SIZE / 532;
+
+const createScreenCanvas = () => {
+  const canvas = document.createElement("canvas");
+  canvas.width = 256;
+  canvas.height = 192;
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx)
+    throw new Error(
+      "No 2d rendering context, are you visiting this website on a potato?",
+    );
+
+  ctx.imageSmoothingEnabled = false;
+
+  return canvas;
+};
+
+type Screen = {
+  mesh: THREE.Mesh;
+  canvas: HTMLCanvasElement;
+  texture: THREE.CanvasTexture;
+};
+
 export class NDS extends THREE.Object3D {
-  topScreenMesh: THREE.Mesh | undefined;
-  bottomScreenMesh: THREE.Mesh | undefined;
+  private botScreen: Screen | null = null;
+  private topScreen: Screen | null = null;
 
   public constructor(camera: THREE.Camera, domElement: HTMLCanvasElement) {
     super();
@@ -13,22 +39,70 @@ export class NDS extends THREE.Object3D {
     loader.load("/nintendo-ds/scene.gltf", ({ scene: model }) => {
       model.scale.set(50, 50, 50);
 
+      let topScreenMesh: THREE.Mesh | null = null;
+      let botScreenMesh: THREE.Mesh | null = null;
+
       // find top and bottom screens
-      model.traverse((child) => {
+      const queue: THREE.Object3D[] = [model];
+      for (let i = 0; i < queue.length; i++) {
+        const child = queue[i];
+
         if (child instanceof THREE.Mesh) {
           const material = child.material as THREE.Material;
           if (material.name?.includes("screen_up")) {
-            this.topScreenMesh = child;
+            topScreenMesh = child;
           } else if (material.name?.includes("screen_down")) {
-            this.bottomScreenMesh = child;
+            botScreenMesh = child;
           }
         }
+
+        for (let j = 0; j < child.children.length; j++) {
+          queue.push(child.children[j]);
+        }
+      }
+
+      if (!topScreenMesh) throw new Error(`Missing top screen mesh`);
+      if (!botScreenMesh) throw new Error(`Missing bottom screen mesh`);
+
+      // top screen
+      {
+        const canvas = createScreenCanvas();
+
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.minFilter = THREE.NearestFilter;
+        texture.magFilter = THREE.NearestFilter;
+        texture.flipY = false;
+        texture.repeat.set(1, TOP_SCREEN_SOURCE_TEX_HEIGHT);
+        texture.offset.set(0, -4 / 1024);
+
+        topScreenMesh.material = new THREE.MeshStandardMaterial({
+          map: texture,
+          emissive: new THREE.Color(0x222222),
+          emissiveIntensity: 0.5,
         });
 
-      if (!this.topScreenMesh) throw new Error(`Missing top screen`);
-      if (!this.bottomScreenMesh) throw new Error(`Missing bottom screen`);
+        this.topScreen = { mesh: topScreenMesh, canvas, texture };
+      }
 
-      const { topScreenMesh, bottomScreenMesh } = this;
+      // bottom screen
+      {
+        const canvas = createScreenCanvas();
+
+        const texture = new THREE.CanvasTexture(canvas);
+        texture.minFilter = THREE.NearestFilter;
+        texture.magFilter = THREE.NearestFilter;
+        texture.flipY = false;
+        texture.repeat.set(1, BOT_SCREEN_SOURCE_TEX_HEIGHT);
+        texture.offset.set(0, -BOT_SCREEN_SOURCE_TEX_HEIGHT + 1);
+
+        botScreenMesh.material = new THREE.MeshStandardMaterial({
+          map: texture,
+          emissive: new THREE.Color(0x222222),
+          emissiveIntensity: 0.5,
+        });
+
+        this.botScreen = { mesh: topScreenMesh, canvas, texture };
+      }
 
       domElement.addEventListener("mousemove", (event) => {
         const rect = domElement.getBoundingClientRect();
@@ -44,7 +118,7 @@ export class NDS extends THREE.Object3D {
 
         const intersects = raycaster.intersectObjects([
           topScreenMesh,
-          bottomScreenMesh,
+          botScreenMesh,
         ]);
 
         if (intersects.length > 0) {
@@ -54,11 +128,12 @@ export class NDS extends THREE.Object3D {
 
           if (uv) {
             const x = Math.floor(uv.x * 256);
-            const y =
+            const y = Math.floor(
               mesh === topScreenMesh
-                ? Math.floor(uv.y * (1024 / 404) * 192)
+                ? uv.y * TOP_SCREEN_SOURCE_TEX_HEIGHT * 192
                 : // invert coords only for bottom screen
-                  Math.floor(192 - (1 - uv.y) * (1024 / 532) * 192);
+                  192 - (1 - uv.y) * BOT_SCREEN_SOURCE_TEX_HEIGHT * 192,
+            );
 
             x;
             y;
@@ -69,4 +144,13 @@ export class NDS extends THREE.Object3D {
       super.add(model);
     });
   }
+
+  public update(): void {
+    if (this.topScreen) {
+      this.topScreen.texture.needsUpdate = true;
+    }
+    if (this.botScreen) {
+      this.botScreen.texture.needsUpdate = true;
+    }
+  }
 }