diff --git a/src/components/AudioEmitter.tsx b/src/components/AudioEmitter.tsx index 5f5e8a6b..3ccaf01e 100644 --- a/src/components/AudioEmitter.tsx +++ b/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} /> - + {fileName} diff --git a/src/components/Sky.tsx b/src/components/Sky.tsx index 8b06cf7c..21f4b471 100644 --- a/src/components/Sky.tsx +++ b/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"); diff --git a/src/components/TerrainBlock.tsx b/src/components/TerrainBlock.tsx index b2bd5e80..63c93a61 100644 --- a/src/components/TerrainBlock.tsx +++ b/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"); diff --git a/src/mission.ts b/src/mission.ts index 7f9517e7..aa45c6b6 100644 --- a/src/mission.ts +++ b/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));