From 1c268c62220a60d5f8ebe074f6d53ae83e508c20 Mon Sep 17 00:00:00 2001 From: AI Bot Date: Thu, 3 Sep 2026 13:01:29 +0530 Subject: [PATCH] fix(Editor): Resolve syntax error and extract material properties correctly --- src/pages/Editor.tsx | 147 ++++++++++++++++++++----------------------- 1 file changed, 69 insertions(+), 78 deletions(-) diff --git a/src/pages/Editor.tsx b/src/pages/Editor.tsx index 34e9c9b..99e4002 100644 --- a/src/pages/Editor.tsx +++ b/src/pages/Editor.tsx @@ -264,6 +264,72 @@ const ShadowFloor = ({ bounds, opacity, rotation, softness }: { bounds: any, opa ); }; +export const extractTextureUrl = (texture: any) => { + if (!texture) return undefined; + const img = texture.image || (texture.source && texture.source.data); + if (!img) return undefined; + if (typeof img.src === 'string' && img.src.length > 0) return img.src; + if (typeof img.currentSrc === 'string' && img.currentSrc.length > 0) return img.currentSrc; + + // Fallback: draw ImageBitmap or HTMLImageElement to canvas to extract data URL + try { + const MAX = 1024; + let scale = 1; + if (img.width > MAX || img.height > MAX) { + scale = MAX / Math.max(img.width, img.height); + } + const cw = Math.round((img.width || 1024) * scale); + const ch = Math.round((img.height || 1024) * scale); + + const canvas = document.createElement('canvas'); + canvas.width = cw; + canvas.height = ch; + const ctx = canvas.getContext('2d'); + if (ctx) { + ctx.drawImage(img, 0, 0, cw, ch); + return canvas.toDataURL('image/webp', 0.8); + } + } catch (e) { + console.error('Error extracting texture URL:', e); + } + return undefined; +}; + +export const extractMaterialProps = (material: any): Partial => { + if (!material) return {}; + const mProps: Partial = {}; + + if (material.color) mProps.color = `#${material.color.getHexString()}`; + if (material.roughness !== undefined) mProps.roughness = material.roughness; + if (material.metalness !== undefined) mProps.metalness = material.metalness; + if (material.opacity !== undefined) mProps.opacity = material.opacity; + + // Standard material props + const m = material as any; + if (m.transmission !== undefined) mProps.transmission = m.transmission; + if (m.ior !== undefined) mProps.ior = m.ior; + if (m.thickness !== undefined) mProps.thickness = m.thickness; + if (m.clearcoat !== undefined) mProps.clearcoat = m.clearcoat; + if (m.sheen !== undefined) mProps.sheen = m.sheen; + if (m.specularIntensity !== undefined) mProps.specularIntensity = m.specularIntensity; + + // Extract textures + if (m.map) mProps.map = extractTextureUrl(m.map); + if (m.normalMap) mProps.normalMap = extractTextureUrl(m.normalMap); + if (m.roughnessMap) mProps.roughnessMap = extractTextureUrl(m.roughnessMap); + if (m.metalnessMap) mProps.metalnessMap = extractTextureUrl(m.metalnessMap); + if (m.alphaMap) mProps.alphaMap = extractTextureUrl(m.alphaMap); + + // Extract UV properties from the main map if available + if (m.map) { + if (m.map.repeat) mProps.uvTiling = [m.map.repeat.x, m.map.repeat.y]; + if (m.map.offset) mProps.uvOffset = [m.map.offset.x, m.map.offset.y]; + if (m.map.rotation !== undefined) mProps.uvRotation = m.map.rotation * (180 / Math.PI); + } + + return mProps; +}; + export default function Editor() { const { projectId } = useParams(); const navigate = useNavigate(); @@ -1068,14 +1134,7 @@ export default function Editor() { if (child instanceof THREE.Mesh) { const meshId = `mesh-${mIdx++}`; const material = Array.isArray(child.material) ? child.material[0] : child.material; - const mProps = { ...globalMaterialProps }; - - if (material) { - if (material.color) mProps.color = `#${material.color.getHexString()}`; - if (material.roughness !== undefined) mProps.roughness = material.roughness; - if (material.metalness !== undefined) mProps.metalness = material.metalness; - if (material.opacity !== undefined) mProps.opacity = material.opacity; - } + const mProps = { ...globalMaterialProps, ...extractMaterialProps(material) }; builtObjects.push({ id: meshId, @@ -1655,68 +1714,7 @@ export default function Editor() { // Extract mesh material properties if available const material = Array.isArray(child.material) ? child.material[0] : child.material; - const mProps = { ...globalMaterialProps }; - - const extractTextureUrl = (texture: any) => { - if (!texture) return undefined; - const img = texture.image || (texture.source && texture.source.data); - if (!img) return undefined; - if (typeof img.src === 'string' && img.src.length > 0) return img.src; - if (typeof img.currentSrc === 'string' && img.currentSrc.length > 0) return img.currentSrc; - - // Fallback: draw ImageBitmap or HTMLImageElement to canvas to extract data URL - try { - const MAX = 1024; - let scale = 1; - if (img.width > MAX || img.height > MAX) { - scale = MAX / Math.max(img.width, img.height); - } - const cw = Math.round((img.width || 1024) * scale); - const ch = Math.round((img.height || 1024) * scale); - - const canvas = document.createElement('canvas'); - canvas.width = cw; - canvas.height = ch; - const ctx = canvas.getContext('2d'); - if (ctx) { - ctx.drawImage(img, 0, 0, cw, ch); - return canvas.toDataURL('image/webp', 0.8); - } - } catch (e) { - console.error('Error extracting texture URL:', e); - } - return undefined; - }; - - if (material) { - if (material.color) mProps.color = `#${material.color.getHexString()}`; - if (material.roughness !== undefined) mProps.roughness = material.roughness; - if (material.metalness !== undefined) mProps.metalness = material.metalness; - if (material.opacity !== undefined) mProps.opacity = material.opacity; - - // Standard material props - const m = material as any; - if (m.transmission !== undefined) mProps.transmission = m.transmission; - if (m.ior !== undefined) mProps.ior = m.ior; - if (m.thickness !== undefined) mProps.thickness = m.thickness; - if (m.clearcoat !== undefined) mProps.clearcoat = m.clearcoat; - if (m.sheen !== undefined) mProps.sheen = m.sheen; - if (m.specularIntensity !== undefined) mProps.specularIntensity = m.specularIntensity; - - // Extract textures - if (m.map) mProps.map = extractTextureUrl(m.map); - if (m.normalMap) mProps.normalMap = extractTextureUrl(m.normalMap); - if (m.roughnessMap) mProps.roughnessMap = extractTextureUrl(m.roughnessMap); - if (m.metalnessMap) mProps.metalnessMap = extractTextureUrl(m.metalnessMap); - if (m.alphaMap) mProps.alphaMap = extractTextureUrl(m.alphaMap); - - // Extract UV properties from the main map if available - if (m.map) { - if (m.map.repeat) mProps.uvTiling = [m.map.repeat.x, m.map.repeat.y]; - if (m.map.offset) mProps.uvOffset = [m.map.offset.x, m.map.offset.y]; - if (m.map.rotation !== undefined) mProps.uvRotation = m.map.rotation * (180 / Math.PI); - } - } + const mProps = { ...globalMaterialProps, ...extractMaterialProps(material) }; newSceneObjects.push({ id: meshId, @@ -5195,14 +5193,7 @@ export default function Editor() { mIdx++; const material = Array.isArray(child.material) ? child.material[0] : child.material; - const mProps = { ...globalMaterialProps }; - - if (material) { - if (material.color) mProps.color = `#${material.color.getHexString()}`; - if (material.roughness !== undefined) mProps.roughness = material.roughness; - if (material.metalness !== undefined) mProps.metalness = material.metalness; - if (material.opacity !== undefined) mProps.opacity = material.opacity; - } + const mProps = { ...globalMaterialProps, ...extractMaterialProps(material) }; newSceneObjects.push({ id: meshId,