fix TorqueObject property type parsing

src/components/AudioEmitter.tsx

@@ -2,7 +2,7 @@ import { memo, useEffect, useRef } from "react";
 import { useThree, useFrame } from "@react-three/fiber";
 import { PositionalAudio, Vector3 } from "three";
 import type { TorqueObject } from "../torqueScript";
-import { getPosition, getProperty } from "../mission";
+import { getFloat, getInt, getPosition, getProperty } from "../mission";
 import { audioToUrl } from "../loaders";
 import { useAudio } from "./AudioContext";
 import { useDebug, useSettings } from "./SettingsProvider";
@@ -40,12 +40,12 @@ export const AudioEmitter = memo(function AudioEmitter({
 }) {
   const { debugMode } = useDebug();
   const fileName = getProperty(object, "fileName") ?? "";
-  const volume = getProperty(object, "volume") ?? 1;
-  const minDistance = getProperty(object, "minDistance") ?? 1;
-  const maxDistance = getProperty(object, "maxDistance") ?? 1;
-  const minLoopGap = getProperty(object, "minLoopGap") ?? 0;
-  const maxLoopGap = getProperty(object, "maxLoopGap") ?? 0;
-  const is3D = getProperty(object, "is3D") ?? 0;
+  const volume = getFloat(object, "volume") ?? 1;
+  const minDistance = getFloat(object, "minDistance") ?? 1;
+  const maxDistance = getFloat(object, "maxDistance") ?? 1;
+  const minLoopGap = getFloat(object, "minLoopGap") ?? 0;
+  const maxLoopGap = getFloat(object, "maxLoopGap") ?? 0;
+  const is3D = getInt(object, "is3D") ?? 0;
 
   const [x, y, z] = getPosition(object);
   const { scene, camera } = useThree();
@@ -209,7 +209,7 @@ export const AudioEmitter = memo(function AudioEmitter({
         transparent
         toneMapped={false}
       />
-      <FloatingLabel color="#00ff00" position={[0, minDistance, 0]}>
+      <FloatingLabel color="#00ff00" position={[0, minDistance + 1, 0]}>
         {fileName}
       </FloatingLabel>
     </mesh>

src/components/Sky.tsx

@@ -3,7 +3,7 @@ import { useQuery } from "@tanstack/react-query";
 import { useCubeTexture } from "@react-three/drei";
 import { Color, ShaderMaterial, BackSide, Euler } from "three";
 import type { TorqueObject } from "../torqueScript";
-import { getProperty } from "../mission";
+import { getFloat, getProperty } from "../mission";
 import { useSettings } from "./SettingsProvider";
 import { BASE_URL, getUrlForPath, loadDetailMapList } from "../loaders";
 import { useThree } from "@react-three/fiber";
@@ -148,9 +148,7 @@ export function Sky({ object }: { object: TorqueObject }) {
 
   // Fog parameters.
   // TODO: There can be multiple fog volumes/layers. Render simple fog for now.
-  const fogDistance = useMemo(() => {
-    return getProperty(object, "fogDistance");
-  }, [object]);
+  const fogDistance = getFloat(object, "fogDistance");
 
   const fogColor = useMemo(() => {
     const colorString = getProperty(object, "fogColor");

src/components/TerrainBlock.tsx

@@ -16,7 +16,13 @@ import { useTexture } from "@react-three/drei";
 import { uint16ToFloat32 } from "../arrayUtils";
 import { loadTerrain, terrainTextureToUrl } from "../loaders";
 import type { TorqueObject } from "../torqueScript";
-import { getPosition, getProperty, getRotation, getScale } from "../mission";
+import {
+  getInt,
+  getPosition,
+  getProperty,
+  getRotation,
+  getScale,
+} from "../mission";
 import {
   setupColor,
   setupMask,
@@ -202,10 +208,7 @@ export const TerrainBlock = memo(function TerrainBlock({
   object: TorqueObject;
 }) {
   const terrainFile = getProperty(object, "terrainFile");
-
-  const squareSize = useMemo(() => {
-    return getProperty(object, "squareSize") ?? DEFAULT_SQUARE_SIZE;
-  }, [object]);
+  const squareSize = getInt(object, "squareSize") ?? DEFAULT_SQUARE_SIZE;
 
   const emptySquares: number[] = useMemo(() => {
     const emptySquaresValue = getProperty(object, "emptySquares");

src/mission.ts

@@ -195,6 +195,22 @@ export function getProperty(obj: TorqueObject, name: string): any {
   return obj[name.toLowerCase()];
 }
 
+export function getFloat(
+  obj: TorqueObject,
+  name: string,
+): number | null | undefined {
+  const value = obj[name.toLowerCase()];
+  return value == null ? value : parseFloat(value);
+}
+
+export function getInt(
+  obj: TorqueObject,
+  name: string,
+): number | null | undefined {
+  const value = obj[name.toLowerCase()];
+  return value == null ? value : parseInt(value, 10);
+}
+
 export function getPosition(obj: TorqueObject): [number, number, number] {
   const position = obj.position ?? "0 0 0";
   const [x, y, z] = position.split(" ").map((s: string) => parseFloat(s));