diff --git a/packages/editor/src/components/assets/AssetPreviewPanels/MaterialPreviewPanel.tsx b/packages/editor/src/components/assets/AssetPreviewPanels/MaterialPreviewPanel.tsx index 5491a24110..56ab48e47a 100644 --- a/packages/editor/src/components/assets/AssetPreviewPanels/MaterialPreviewPanel.tsx +++ b/packages/editor/src/components/assets/AssetPreviewPanels/MaterialPreviewPanel.tsx @@ -27,7 +27,7 @@ import React, { useEffect, useRef } from 'react' import { Mesh, SphereGeometry } from 'three' import { useRender3DPanelSystem } from '@etherealengine/client-core/src/user/components/Panel3D/useRender3DPanelSystem' -import { generateEntityUUID, getMutableComponent, setComponent, UUIDComponent } from '@etherealengine/ecs' +import { generateEntityUUID, getMutableComponent, setComponent, useComponent, UUIDComponent } from '@etherealengine/ecs' import { EnvmapComponent } from '@etherealengine/engine/src/scene/components/EnvmapComponent' import { MaterialSelectionState } from '@etherealengine/engine/src/scene/materials/MaterialLibraryState' import { getState, useMutableState } from '@etherealengine/hyperflux' @@ -35,6 +35,7 @@ import { CameraOrbitComponent } from '@etherealengine/spatial/src/camera/compone import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent' import { addObjectToGroup } from '@etherealengine/spatial/src/renderer/components/GroupComponent' import { VisibleComponent } from '@etherealengine/spatial/src/renderer/components/VisibleComponent' +import { MaterialComponent, MaterialComponents } from '@etherealengine/spatial/src/renderer/materials/MaterialComponent' import { getMaterial } from '@etherealengine/spatial/src/renderer/materials/materialFunctions' export const MaterialPreviewCanvas = () => { @@ -55,7 +56,11 @@ export const MaterialPreviewCanvas = () => { const orbitCamera = getMutableComponent(cameraEntity, CameraOrbitComponent) orbitCamera.focusedEntities.set([sceneEntity]) orbitCamera.refocus.set(true) - }, [selectedMaterial]) + }, [ + selectedMaterial, + useComponent(UUIDComponent.getEntityByUUID(selectedMaterial.value!), MaterialComponent[MaterialComponents.State]) + .material + ]) return ( <>
diff --git a/packages/spatial/src/renderer/materials/materialFunctions.ts b/packages/spatial/src/renderer/materials/materialFunctions.ts index d3211e4fc7..1c20ba8671 100644 --- a/packages/spatial/src/renderer/materials/materialFunctions.ts +++ b/packages/spatial/src/renderer/materials/materialFunctions.ts @@ -118,7 +118,7 @@ export const getPluginObject = (pluginId: string) => { export const applyMaterialPlugins = (materialEntity: Entity) => { const materialComponent = getComponent(materialEntity, MaterialComponent[MaterialComponents.State]) - if (!materialComponent.pluginEntities || !materialComponent.material) return + if (!materialComponent.pluginEntities?.length || !materialComponent.material) return const material = materialComponent.material as Material material.plugins = [] for (const pluginEntity of materialComponent.pluginEntities) { @@ -170,21 +170,13 @@ export const updateMaterialPrototype = (materialEntity: Entity) => { if (!prototypeConstructor || !prototypeComponent.prototypeArguments) return const material = materialComponent.material if (!material || material.type === prototypeName) return - const matKeys = Object.keys(material) - const commonParameters = Object.fromEntries( - Object.keys(prototypeComponent.prototypeArguments) - .filter((key) => matKeys.includes(key)) - .map((key) => [key, material[key]]) - ) - const fullParameters = { ...extractDefaults(prototypeComponent.prototypeArguments), ...commonParameters } + const fullParameters = { ...extractDefaults(prototypeComponent.prototypeArguments) } const newMaterial = new prototypeConstructor(fullParameters) if (newMaterial.plugins) { newMaterial.customProgramCacheKey = () => newMaterial.plugins!.map((plugin) => plugin.toString()).reduce((x, y) => x + y, '') } - newMaterial.uuid = material.uuid - newMaterial.name = material.name - newMaterial.type = prototypeName + if (material.defines?.['USE_COLOR']) { newMaterial.defines = newMaterial.defines ?? {} newMaterial.defines!['USE_COLOR'] = material.defines!['USE_COLOR'] @@ -197,5 +189,6 @@ export const updateMaterialPrototype = (materialEntity: Entity) => { material: newMaterial, parameters: fullParameters }) + return newMaterial }