diff --git a/app/InteriorInstance.tsx b/app/InteriorInstance.tsx
index 65c622ef..625d9566 100644
--- a/app/InteriorInstance.tsx
+++ b/app/InteriorInstance.tsx
@@ -7,8 +7,8 @@ import {
getRotation,
getScale,
} from "@/src/mission";
-import { Suspense, useMemo } from "react";
-import { Material, Mesh } from "three";
+import { memo, Suspense, useEffect, useMemo } from "react";
+import { Material, Mesh, MeshBasicMaterial } from "three";
import { setupColor } from "@/src/textureUtils";
const FALLBACK_URL = `${BASE_URL}/black.png`;
@@ -31,7 +31,13 @@ function InteriorTexture({ material }: { material: Material }) {
const texture = useTexture(url, (texture) => setupColor(texture));
- return ;
+ useEffect(() => {
+ const asBasicMaterial = material as MeshBasicMaterial;
+ asBasicMaterial.map = texture;
+ asBasicMaterial.needsUpdate = true;
+ }, [material, texture]);
+
+ return ;
}
function InteriorMesh({ node }: { node: Mesh }) {
@@ -48,29 +54,37 @@ function InteriorMesh({ node }: { node: Mesh }) {
}
>
-
+ {Array.isArray(node.material) ? (
+ node.material.map((mat, index) => (
+
+ ))
+ ) : (
+
+ )}
) : null}
);
}
-export function InteriorModel({ interiorFile }: { interiorFile: string }) {
- const { nodes } = useInterior(interiorFile);
+export const InteriorModel = memo(
+ ({ interiorFile }: { interiorFile: string }) => {
+ const { nodes } = useInterior(interiorFile);
- return (
- <>
- {Object.entries(nodes)
- // .filter(
- // ([name, node]: [string, any]) => true
- // // !node.material || !node.material.name.match(/\.\d+$/)
- // )
- .map(([name, node]: [string, any]) => (
-
- ))}
- >
- );
-}
+ return (
+ <>
+ {Object.entries(nodes)
+ .filter(
+ ([name, node]: [string, any]) =>
+ !node.material || !node.material.name.match(/\.\d+$/)
+ )
+ .map(([name, node]: [string, any]) => (
+
+ ))}
+ >
+ );
+ }
+);
function InteriorPlaceholder() {
return (
@@ -81,17 +95,23 @@ function InteriorPlaceholder() {
);
}
-export function InteriorInstance({ object }: { object: ConsoleObject }) {
- const interiorFile = getProperty(object, "interiorFile").value;
- const [z, y, x] = useMemo(() => getPosition(object), [object]);
- const [scaleX, scaleY, scaleZ] = useMemo(() => getScale(object), [object]);
- const q = useMemo(() => getRotation(object, true), [object]);
+export const InteriorInstance = memo(
+ ({ object }: { object: ConsoleObject }) => {
+ const interiorFile = getProperty(object, "interiorFile").value;
+ const [z, y, x] = useMemo(() => getPosition(object), [object]);
+ const [scaleX, scaleY, scaleZ] = useMemo(() => getScale(object), [object]);
+ const q = useMemo(() => getRotation(object, true), [object]);
- return (
-
- }>
-
-
-
- );
-}
+ return (
+
+ }>
+
+
+
+ );
+ }
+);
diff --git a/package-lock.json b/package-lock.json
index 41f97bc9..a4f405f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1165,6 +1165,7 @@
"resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-9.3.0.tgz",
"integrity": "sha512-myPe3YL/C8+Eq939/4qIVEPBW/uxV0iiUbmjfwrs9sGKYDG8ib8Dz3Okq7BQt8P+0k4igedONbjXMQy84aDFmQ==",
"license": "MIT",
+ "peer": true,
"dependencies": {
"@babel/runtime": "^7.17.8",
"@types/react-reconciler": "^0.32.0",