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",