From 19ce7f196850897aa37873e2710974496ac89ac9 Mon Sep 17 00:00:00 2001 From: Xinyi Xu Date: Fri, 21 Oct 2022 13:32:49 -0700 Subject: [PATCH] fix(composer): fix model shader material color restore (#290) --- .../three-fiber/ColorOverlayComponent/index.tsx | 3 ++- packages/scene-composer/src/hooks/useMaterialEffect.ts | 8 ++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/scene-composer/src/components/three-fiber/ColorOverlayComponent/index.tsx b/packages/scene-composer/src/components/three-fiber/ColorOverlayComponent/index.tsx index 2bb5e93dc..940dbe0ba 100644 --- a/packages/scene-composer/src/components/three-fiber/ColorOverlayComponent/index.tsx +++ b/packages/scene-composer/src/components/three-fiber/ColorOverlayComponent/index.tsx @@ -1,5 +1,6 @@ import React, { useMemo, useEffect } from 'react'; import { Mesh } from 'three'; +import { isEmpty } from 'lodash'; import { COMPOSER_FEATURES, SceneResourceType } from '../../../interfaces'; import { ISceneNodeInternal, IColorOverlayComponentInternal, useStore } from '../../../store'; @@ -58,7 +59,7 @@ const ColorOverlayComponent: React.FC = ({ ); useEffect(() => { - if (ruleResult !== '') { + if (!isEmpty(ruleResult)) { transform(); } diff --git a/packages/scene-composer/src/hooks/useMaterialEffect.ts b/packages/scene-composer/src/hooks/useMaterialEffect.ts index 59f6fb8b6..72c99b3b6 100644 --- a/packages/scene-composer/src/hooks/useMaterialEffect.ts +++ b/packages/scene-composer/src/hooks/useMaterialEffect.ts @@ -6,12 +6,12 @@ const useMaterialEffect = (callback: (object: Object3D) => void, object?: Object const restore = useCallback(() => { object?.traverse((o) => { - if (o instanceof Mesh) { + if (o instanceof Mesh && o.userData?.isOriginal) { const original = originalMaterialMap.current[o.uuid]; - o.material = original.clone(); + o.material = original ? original.clone() : o.material; } }); - }, []); + }, [object]); useEffect(() => { object?.traverse((o) => { @@ -21,7 +21,7 @@ const useMaterialEffect = (callback: (object: Object3D) => void, object?: Object } } }); - }, []); + }, [object]); const transform = () => { // Currently can't think of a use case where we'd want to use this to transform a material on a component we own