finish WaterBlock

app/InteriorInstance.tsx

@@ -13,6 +13,9 @@ import { setupColor } from "@/src/textureUtils";
 
 const FALLBACK_URL = `${BASE_URL}/black.png`;
 
+/**
+ * Load a .gltf file that was converted from a .dif, used for "interior" models.
+ */
 function useInterior(interiorFile: string) {
   const url = interiorToUrl(interiorFile);
   return useGLTF(url);
@@ -32,6 +35,9 @@ function InteriorTexture({ material }: { material: Material }) {
 }
 
 function InteriorMesh({ node }: { node: Mesh }) {
+  if (Array.isArray(node.material)) {
+    throw new Error("Unexpected multi-material node");
+  }
   return (
     <mesh geometry={node.geometry} castShadow receiveShadow>
       {node.material ? (

app/TerrainBlock.tsx

@@ -26,6 +26,9 @@ import {
   updateTerrainTextureShader,
 } from "@/src/textureUtils";
 
+/**
+ * Load a .ter file, used for terrain heightmap and texture info.
+ */
 function useTerrain(terrainFile: string) {
   return useQuery({
     queryKey: ["terrain", terrainFile],

app/WaterBlock.tsx

@@ -1,10 +1,43 @@
-import { ConsoleObject } from "@/src/mission";
+import { textureToUrl } from "@/src/loaders";
+import {
+  ConsoleObject,
+  getPosition,
+  getProperty,
+  getRotation,
+  getScale,
+} from "@/src/mission";
+import { setupColor } from "@/src/textureUtils";
+import { useTexture } from "@react-three/drei";
+import { Suspense, useMemo } from "react";
+
+export function WaterMaterial({ surfaceTexture }: { surfaceTexture: string }) {
+  const url = textureToUrl(surfaceTexture);
+  const texture = useTexture(url, (texture) => setupColor(texture, [8, 8]));
+
+  return <meshStandardMaterial map={texture} transparent opacity={0.8} />;
+}
 
 export function WaterBlock({ object }: { object: ConsoleObject }) {
+  const [z, y, x] = useMemo(() => getPosition(object), [object]);
+  const [scaleZ, scaleY, scaleX] = useMemo(() => getScale(object), [object]);
+  const q = useMemo(() => getRotation(object, true), [object]);
+
+  const surfaceTexture =
+    getProperty(object, "surfaceTexture")?.value ?? "liquidTiles/BlueWater";
+
   return (
-    <mesh>
-      <boxGeometry />
-      <meshStandardMaterial color="blue" transparent opacity={0.5} />
+    <mesh
+      position={[x - 1024 + scaleX / 2, y + scaleY / 2, z - 1024 + scaleZ / 2]}
+      quaternion={q}
+    >
+      <boxGeometry args={[scaleZ, scaleY, scaleX]} />
+      <Suspense
+        fallback={
+          <meshStandardMaterial color="blue" transparent opacity={0.3} />
+        }
+      >
+        <WaterMaterial surfaceTexture={surfaceTexture} />
+      </Suspense>
     </mesh>
   );
 }