viz-3D

+ {/* Background Decorative Blobs */} +

+ + {/* Hidden File Input */} + + + + + + + {/* Top Menu Bar */} +

+ setOpenMenu(openMenu === 'file' ? null : 'file')} + > + File + + {openMenu === 'file' && ( +

+ +

+ + + + +

+ )} +

+ +

+ setOpenMenu(openMenu === 'edit' ? null : 'edit')} + > + Edit + + {openMenu === 'edit' && ( +

+ + +

+ )} +

+ + Environment + Lighting + Camera + Image + Render + Tools +

+ setOpenMenu(openMenu === 'view' ? null : 'view')} + > + View + + {openMenu === 'view' && ( +

+ + +

+ )} +

+ Window + Help +

+ Startup + +

+ 100 % + +

+ + {/* Main Toolbar */} +

+ +

+ + +

+ 50.0 FPS +

+ + {/* Main Studio Area */} +

+ {/* Left Sidebar */} +

+ setActiveSidebar("Materials")} /> + setActiveSidebar("Colors")} /> + setActiveSidebar("Textures")} /> + setActiveSidebar("Environ...")} /> + setActiveSidebar("Favorites")} /> + setActiveSidebar("Models")} /> + setShowImageTo3D(true)} /> +

+ {activeSidebar} +

+ + +

+ {activeSidebar === "Materials" && materialCategories.map(cat => ( + + ))} + {activeSidebar === "Textures" && ["Patterns", "Materials", "Nature", "Abstract"].map(cat => ( + + ))} +

+ {activeSidebar === "Materials" && ( +

+ {currentCategory.items.map((mat) => ( + { + if (selectedIds.length > 0) { + selectedIds.forEach(id => { + updateObjectMaterial(id, { + color: mat.color, + roughness: mat.roughness, + metalness: mat.metalness, + clearcoat: mat.clearcoat || 0, + transmission: mat.transmission || 0, + thickness: mat.thickness || 0, + ior: mat.ior || 1.5, + sheen: mat.sheen || 0, + opacity: mat.opacity || 1, + specularIntensity: mat.specularIntensity || 1, + uvScale: mat.uvScale || 1 + }); + }); + } + }} + /> + ))} +

+ )} + + {activeSidebar === "Textures" && ( +

+ {[ + { name: "Carbon Fiber", url: "https://picsum.photos/seed/carbon/200/200" }, + { name: "Wood Grain", url: "https://picsum.photos/seed/wood/200/200" }, + { name: "Brushed Metal", url: "https://picsum.photos/seed/metal/200/200" }, + { name: "Denim Texture", url: "https://picsum.photos/seed/denim/200/200" }, + { name: "Leather", url: "https://picsum.photos/seed/leather/200/200" }, + { name: "Marble", url: "https://picsum.photos/seed/marble/200/200" }, + ].map((tex) => ( + + ))} + +

+ )} + + {activeSidebar === "Colors" && ( +

+ {["#ef4444", "#f97316", "#f59e0b", "#eab308", "#84cc16", "#22c55e", "#10b981", "#06b6d4", "#3b82f6", "#6366f1", "#8b5cf6", "#a855f7", "#d946ef", "#ec4899", "#f43f5e", "#ffffff", "#a1a1aa", "#3f3f46", "#18181b", "#000000"].map((color) => ( +

+ )} + + {activeSidebar === "Environ..." && ( +

+ Environment presets are also available in the right sidebar. +

+ {['studio', 'apartment', 'city', 'dawn', 'forest'].map(preset => ( + + ))} +

+ )} +

+ + {/* Viewport */} +

+ +

+ + + {/* Viewport Overlays */} +

+ Real-time Render +

+ + {/* Loading Overlay */} + + {(isLoading || importError) && ( + +

+ {importError ? ( +

+ +

+ Import Failed + {importError} +

+ +

+ ) : ( + <> +

+ +

+ + + {importStatus || "Importing Model"} + +

+ {importProgress}% Complete +

+ + )} +

+ + )} + + + setShowRenderModal(false)} + onRender={(settings) => setRenderRequest(settings)} + /> + + {/* Export / Save Dialog */} + {exportDialog && ( +

setExportDialog(null)}> + e.stopPropagation()} + className="w-full max-w-sm bg-zinc-900 border border-zinc-700 rounded-2xl shadow-2xl overflow-hidden" + > + {/* Header */} +

+ + + {exportDialog.mode === 'scene' ? 'Save Scene' : + exportDialog.mode === 'glb' ? 'Export GLB' : 'Export USDZ'} + +

+ +

+ + {/* Body */} +

+ File Name + setExportDialogName(e.target.value)} + onKeyDown={e => { if (e.key === 'Enter') confirmExportDialog(); if (e.key === 'Escape') setExportDialog(null); }} + placeholder={exportDialog.defaultName} + className="bg-zinc-800 border border-zinc-700 rounded-lg px-3 py-2 text-sm text-zinc-100 outline-none focus:border-blue-500 transition-colors" + /> +

+ Save Location +

+ Downloads folder — browser default +

File will be saved as: {(exportDialogName || exportDialog.defaultName).trim()}.{exportDialog.mode === 'scene' ? 'json' : exportDialog.mode}

+ + {/* Footer */} +

+ + +

+ +

+ )} +

+ + {/* Right Sidebar */} +

+ + + + + +

+ +

+ {activeRightTab === "Scene" ? ( + <> +

+ + Show +

+ + +

+ +

+ Hierarchy +

+ + +

+ +

+ {sceneObjects.filter(obj => obj.parentId === null).map(obj => ( +

toggleSelect(obj.id, e.ctrlKey || e.metaKey)} + onContextMenu={(e) => { + e.preventDefault(); + setContextMenu({ x: e.clientX, y: e.clientY, objectId: obj.id }); + }} + className={cn( + "flex items-center gap-2 p-1 rounded text-[10px] cursor-pointer group transition-colors", + selectedIds.includes(obj.id) ? "bg-blue-500/20 text-blue-400" : "hover:bg-zinc-800 text-zinc-300" + )} + > + + {obj.type === 'group' ? : } + + {editingId === obj.id ? ( + renameObject(obj.id, e.target.value)} + onKeyDown={(e) => { + if (e.key === 'Enter') renameObject(obj.id, e.currentTarget.value); + if (e.key === 'Escape') setEditingId(null); + }} + /> + ) : ( + {obj.name} + )} + + {!editingId && selectedIds.includes(obj.id) && ( + + )} +

+ + {/* Render Children */} +

+ {sceneObjects.filter(child => child.parentId === obj.id).map(child => ( +

toggleSelect(child.id, e.ctrlKey || e.metaKey)} + onContextMenu={(e) => { + e.preventDefault(); + setContextMenu({ x: e.clientX, y: e.clientY, objectId: child.id }); + }} + className={cn( + "flex items-center gap-2 p-1 rounded text-[10px] cursor-pointer group transition-colors", + selectedIds.includes(child.id) ? "bg-blue-500/20 text-blue-400" : "hover:bg-zinc-800 text-zinc-300" + )} + > + + + + {editingId === child.id ? ( + renameObject(child.id, e.target.value)} + onKeyDown={(e) => { + if (e.key === 'Enter') renameObject(child.id, e.currentTarget.value); + if (e.key === 'Escape') setEditingId(null); + }} + /> + ) : ( + {child.name} + )} + + {!editingId && selectedIds.includes(child.id) && ( + + )} +

+ ))} +

+ + ) : activeRightTab === "Transform" ? ( +

+ Transform +

+ + {!selectedObject || !selectedObject.transformProps ? ( +

+ + Select an object to edit its transform +

+ ) : ( + <> + {/* Position */} +

+ Position + {['x', 'y', 'z'].map((axis, i) => ( +

+ {axis} + { + const newPos = [...selectedObject.transformProps!.position] as [number, number, number]; + newPos[i] = parseFloat(e.target.value); + updateObjectTransform(selectedObject.id, { position: newPos }); + }} + className="flex-1 bg-zinc-800 border-none rounded py-1 px-2 text-[10px] text-zinc-300" + /> +

+ ))} +

+ + {/* Rotation */} +

+ Rotation + {['x', 'y', 'z'].map((axis, i) => ( +

+ {axis} + { + const newRot = [...selectedObject.transformProps!.rotation] as [number, number, number]; + newRot[i] = parseFloat(e.target.value); + updateObjectTransform(selectedObject.id, { rotation: newRot }); + }} + className="flex-1 bg-zinc-800 border-none rounded py-1 px-2 text-[10px] text-zinc-300" + /> +

+ ))} +

+ + {/* Scale */} +

+ Scale + {['x', 'y', 'z'].map((axis, i) => ( +

+ {axis} + { + const newScale = [...selectedObject.transformProps!.scale] as [number, number, number]; + newScale[i] = parseFloat(e.target.value); + updateObjectTransform(selectedObject.id, { scale: newScale }); + }} + className="flex-1 bg-zinc-800 border-none rounded py-1 px-2 text-[10px] text-zinc-300" + /> +

+ ))} +

+ + )} +

+ ) : activeRightTab === "Camera" ? ( +

+ Position and Orientation +

+ + {/* Mode Toggle */} +

+ + +

+ + {/* Spherical Controls */} + {cameraProps.cameraMode === "spherical" && ( +

+ Distance + {cameraProps.spherical.distance.toFixed(3)} m +

+ { + const dist = parseFloat(e.target.value); + setCameraProps(prev => ({ ...prev, spherical: { ...prev.spherical, distance: dist } })); + // Update camera position based on spherical + if (orbitControlsRef.current) { + const controls = orbitControlsRef.current; + const phi = (90 - cameraProps.spherical.inclination) * (Math.PI / 180); + const theta = cameraProps.spherical.azimuth * (Math.PI / 180); + const x = dist * Math.sin(phi) * Math.cos(theta) + cameraProps.target[0]; + const y = dist * Math.cos(phi) + cameraProps.target[1]; + const z = dist * Math.sin(phi) * Math.sin(theta) + cameraProps.target[2]; + controls.object.position.set(x, y, z); + controls.update(); + } + }} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ +

+ Azimuth + {cameraProps.spherical.azimuth.toFixed(3)} ° +

+ { + const az = parseFloat(e.target.value); + setCameraProps(prev => ({ ...prev, spherical: { ...prev.spherical, azimuth: az } })); + if (orbitControlsRef.current) { + const controls = orbitControlsRef.current; + const phi = (90 - cameraProps.spherical.inclination) * (Math.PI / 180); + const theta = az * (Math.PI / 180); + const x = cameraProps.spherical.distance * Math.sin(phi) * Math.cos(theta) + cameraProps.target[0]; + const y = cameraProps.spherical.distance * Math.cos(phi) + cameraProps.target[1]; + const z = cameraProps.spherical.distance * Math.sin(phi) * Math.sin(theta) + cameraProps.target[2]; + controls.object.position.set(x, y, z); + controls.update(); + } + }} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ +

+ Inclination + {cameraProps.spherical.inclination.toFixed(3)} ° +

+ { + const inc = parseFloat(e.target.value); + setCameraProps(prev => ({ ...prev, spherical: { ...prev.spherical, inclination: inc } })); + if (orbitControlsRef.current) { + const controls = orbitControlsRef.current; + const phi = (90 - inc) * (Math.PI / 180); + const theta = cameraProps.spherical.azimuth * (Math.PI / 180); + const x = cameraProps.spherical.distance * Math.sin(phi) * Math.cos(theta) + cameraProps.target[0]; + const y = cameraProps.spherical.distance * Math.cos(phi) + cameraProps.target[1]; + const z = cameraProps.spherical.distance * Math.sin(phi) * Math.sin(theta) + cameraProps.target[2]; + controls.object.position.set(x, y, z); + controls.update(); + } + }} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ )} + + {/* Absolute Position Controls */} + {cameraProps.cameraMode === "absolute" && ( +

+ Position (Absolute) +

+ {["x", "y", "z"].map((axis, i) => ( +

+ {axis} + { + const newPos = [...cameraProps.position] as [number, number, number]; + newPos[i] = parseFloat(e.target.value); + setCameraProps(prev => ({ ...prev, position: newPos })); + if (orbitControlsRef.current) { + orbitControlsRef.current.object.position.set(...newPos); + orbitControlsRef.current.update(); + } + }} + className="w-full bg-zinc-900 border border-zinc-800 rounded px-1 py-0.5 text-[10px] text-zinc-300" + /> +

+ ))} +

+ )} + + {/* Target Controls */} +

+ Target +

+ {["x", "y", "z"].map((axis, i) => ( +

+ {axis} + { + const newTarget = [...cameraProps.target] as [number, number, number]; + newTarget[i] = parseFloat(e.target.value); + setCameraProps(prev => ({ ...prev, target: newTarget })); + if (orbitControlsRef.current) { + orbitControlsRef.current.target.set(...newTarget); + orbitControlsRef.current.update(); + } + }} + className="w-full bg-zinc-900 border border-zinc-800 rounded px-1 py-0.5 text-[10px] text-zinc-300" + /> +

+ ))} +

+ + {/* Pivot Controls */} +

+ Pivot +

+ {["x", "y", "z"].map((axis, i) => ( +

+ {axis} + { + const newPivot = [...cameraProps.pivot] as [number, number, number]; + newPivot[i] = parseFloat(e.target.value); + setCameraProps(prev => ({ ...prev, pivot: newPivot })); + }} + className="w-full bg-zinc-900 border border-zinc-800 rounded px-1 py-0.5 text-[10px] text-zinc-300" + /> +

+ ))} +

+ + {/* Standard Views */} +

+ Standard Views +

+ {["front", "back", "top", "bottom", "left", "right", "isometric"].map((view) => ( + + ))} +

+ +

+ Lens Settings +

+ + {/* Camera Type */} +

+ + +

+ + {/* Focal Length / FOV */} + {!cameraProps.orthographic && ( + <> +

+ Focal Length + {fovToFocalLength(cameraProps.fov).toFixed(1)} mm +

+ setCameraProps(prev => ({ ...prev, fov: focalLengthToFov(parseInt(e.target.value)) }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ +

+ Field of View + {cameraProps.fov.toFixed(1)}° +

+ setCameraProps(prev => ({ ...prev, fov: parseInt(e.target.value) }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + )} + + {/* Zoom */} +

+ Zoom Level + {cameraProps.zoom.toFixed(2)}x +

+ setCameraProps(prev => ({ ...prev, zoom: parseFloat(e.target.value) }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + {/* Depth of Field Toggle */} +

+ Depth of Field + Enable bokeh effect +

+ +

+ + {/* DOF Settings */} + {cameraProps.depthOfField.enabled && ( +

+ Focus Distance + {cameraProps.depthOfField.focusDistance.toFixed(3)} +

+ setCameraProps(prev => ({ ...prev, depthOfField: { ...prev.depthOfField, focusDistance: parseFloat(e.target.value) } }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ Bokeh Scale + {cameraProps.depthOfField.bokehScale.toFixed(1)} +

+ setCameraProps(prev => ({ ...prev, depthOfField: { ...prev.depthOfField, bokehScale: parseFloat(e.target.value) } }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ )} + + {/* Post Processing Section */} +

+ Post Processing +

+ + {/* Bloom Toggle */} +

+ Bloom + Add glow to highlights +

+ +

+ + {/* Bloom Settings */} + {cameraProps.bloom.enabled && ( +

+ Intensity + {cameraProps.bloom.intensity.toFixed(2)} +

+ setCameraProps(prev => ({ ...prev, bloom: { ...prev.bloom, intensity: parseFloat(e.target.value) } }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ Threshold + {cameraProps.bloom.luminanceThreshold.toFixed(2)} +

+ setCameraProps(prev => ({ ...prev, bloom: { ...prev.bloom, luminanceThreshold: parseFloat(e.target.value) } }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ )} + + {/* Vignette Toggle */} +

+ Vignette + Darken image edges +

+ +

+ + {/* Vignette Settings */} + {cameraProps.vignette.enabled && ( +

+ Darkness + {cameraProps.vignette.darkness.toFixed(2)} +

+ setCameraProps(prev => ({ ...prev, vignette: { ...prev.vignette, darkness: parseFloat(e.target.value) } }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ )} + + {/* Color Grading Toggle */} +

+ Color Grading + Adjust brightness & color +

+ +

+ + {/* Color Grading Settings */} + {cameraProps.colorGrading.enabled && ( +

+ Brightness + {cameraProps.colorGrading.brightness.toFixed(2)} +

+ setCameraProps(prev => ({ ...prev, colorGrading: { ...prev.colorGrading, brightness: parseFloat(e.target.value) } }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ Contrast + {cameraProps.colorGrading.contrast.toFixed(2)} +

+ setCameraProps(prev => ({ ...prev, colorGrading: { ...prev.colorGrading, contrast: parseFloat(e.target.value) } }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ Saturation + {cameraProps.colorGrading.saturation.toFixed(2)} +

+ setCameraProps(prev => ({ ...prev, colorGrading: { ...prev.colorGrading, saturation: parseFloat(e.target.value) } }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ )} + + {/* Grid and Ground Options */} +

+ Ground Grid + Show grid on floor +

+ +

+ Stay Above Ground + Limit camera height +

+ +

+ + {/* Auto Rotate */} +

+ Auto-Rotate + Rotate around model +

+ +

+ + {/* Camera Presets */} +

+ Camera Presets + +

+ +

+ {cameraPresets.map((preset) => ( +

+ +

+ {preset.id !== 'default' && ( + + )} +

+ ))} +

+ +

+ ) : activeRightTab === "Environ..." ? ( +

+ Viewport Background +

+ + {/* Background Type Toggle */} +

+ + +

+ + {/* Background Color & Image Selection */} + {(backgroundType === "color" || backgroundType === "image") && ( +

+ Background Color +

+ +

+ Backplate Image + {backgroundType === "image" && ( + + )} +

+ + {[ + { name: "Studio", url: "https://picsum.photos/seed/studio/1920/1080?blur=4" }, + { name: "Outdoor", url: "https://picsum.photos/seed/outdoor/1920/1080?blur=4" }, + { name: "Interior", url: "https://picsum.photos/seed/interior/1920/1080?blur=4" }, + { name: "Abstract", url: "https://picsum.photos/seed/abstract/1920/1080?blur=4" } + ].map((plate) => ( + + ))} +

+ Custom Backplate URL +

+ { + if (e.target.value) { + setBackplateImage(e.target.value); + setBackgroundType("image"); + } + }} + /> + +

+ )} + + {/* Environment Rotation Wheel */} +

+ Environment Rotation + {envRotation}° +

{ + const rect = e.currentTarget.getBoundingClientRect(); + const centerX = rect.left + rect.width / 2; + const centerY = rect.top + rect.height / 2; + + const handleMouseMove = (moveEvent: MouseEvent) => { + const angle = Math.atan2(moveEvent.clientY - centerY, moveEvent.clientX - centerX); + let deg = angle * (180 / Math.PI) + 90; + if (deg < 0) deg += 360; + setEnvRotation(Math.round(deg)); + }; + + const handleMouseUp = () => { + window.removeEventListener('mousemove', handleMouseMove); + window.removeEventListener('mouseup', handleMouseUp); + }; + + window.addEventListener('mousemove', handleMouseMove); + window.addEventListener('mouseup', handleMouseUp); + }} + > + {/* Degree markers */} + {[0, 45, 90, 135, 180, 225, 270, 315].map(deg => ( +

+ ))} + {/* Pointer */} +

+ setEnvRotation(parseInt(e.target.value))} + className="w-full accent-blue-500 h-1 bg-zinc-700 rounded-lg appearance-none cursor-pointer" + /> +

+ 0° + 180° + 360° +

+ + {/* Grid Toggle */} +

+ Viewport Grid + Show spatial reference +

+ +

+ Primary Light +

+ + {/* Light Intensity */} +

+ Intensity + {lightProps.intensity.toFixed(2)} +

+ setLightProps(prev => ({ ...prev, intensity: parseFloat(e.target.value) }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + {/* Light Color */} +

+ Light Color + setLightProps(prev => ({ ...prev, color: e.target.value }))} + className="w-6 h-6 rounded border border-zinc-700 bg-transparent cursor-pointer" + /> +

+ + {/* Advanced Lighting Controls */} +

+ Shadow Advanced +

+ Shadow Bias + {lightProps.shadowBias.toFixed(4)} +

+ setLightProps(prev => ({ ...prev, shadowBias: parseFloat(e.target.value) }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ Shadow Radius + {lightProps.shadowRadius.toFixed(1)} +

+ setLightProps(prev => ({ ...prev, shadowRadius: parseFloat(e.target.value) }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + {/* Additional Lights Section */} +

+ Additional Lights +

+ +

+ + {/* Additional Lights List */} +

+ {additionalLights.map((light, index) => ( +

+ + {light.type} Light {index + 1} +

+ +

+ Intensity + {light.intensity.toFixed(1)} +

+ setAdditionalLights(prev => prev.map(l => l.id === light.id ? { ...l, intensity: parseFloat(e.target.value) } : l))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ Color + setAdditionalLights(prev => prev.map(l => l.id === light.id ? { ...l, color: e.target.value } : l))} + className="w-4 h-4 rounded border border-zinc-700 bg-transparent cursor-pointer" + /> +

+ +

+ Position (X, Y, Z) +

+ {[0, 1, 2].map(i => ( + { + const newPos = [...light.position] as [number, number, number]; + newPos[i] = parseFloat(e.target.value); + setAdditionalLights(prev => prev.map(l => l.id === light.id ? { ...l, position: newPos } : l)); + }} + className="bg-zinc-900 border border-zinc-800 rounded px-1.5 py-1 text-[10px] text-zinc-300" + /> + ))} +

+ ))} + {additionalLights.length === 0 && ( +

+ No additional lights added +

+ )} +

+ +

+ Ground & Shadows +

+ + {/* Ground Shadow Toggle */} +

+ Ground Shadow + Enable soft shadows +

+ +

+ + {/* Shadow Controls */} + {groundProps.showShadow && ( + <> +

+ Shadow Intensity + {groundProps.shadowIntensity.toFixed(2)} +

+ setGroundProps(prev => ({ ...prev, shadowIntensity: parseFloat(e.target.value) }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ +

+ Shadow Softness + {groundProps.shadowSoftness.toFixed(2)} +

+ setGroundProps(prev => ({ ...prev, shadowSoftness: parseFloat(e.target.value) }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ +

+ Shadow Length + {groundProps.shadowLength.toFixed(1)} +

+ setGroundProps(prev => ({ ...prev, shadowLength: parseFloat(e.target.value) }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ +

+ Shadow Rotation + {groundProps.shadowRotation}° +

+ setGroundProps(prev => ({ ...prev, shadowRotation: parseInt(e.target.value) }))} + className="absolute inset-0 w-full h-full opacity-0 cursor-pointer z-10" + /> + +

+ setGroundProps(prev => ({ ...prev, shadowRotation: parseInt(e.target.value) }))} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ 0° + 180° + 360° +

+ + )} + +

+ Environment Presets +

+ +

+ + + {customHdri && ( + + )} + + {[ + { id: 'studio', name: 'Studio', desc: 'Clean, neutral lighting' }, + { id: 'apartment', name: 'Apartment', desc: 'Indoor home lighting' }, + { id: 'city', name: 'City', desc: 'Urban outdoor lighting' }, + { id: 'dawn', name: 'Dawn', desc: 'Soft morning light' }, + { id: 'forest', name: 'Forest', desc: 'Natural outdoor light' }, + { id: 'lobby', name: 'Lobby', desc: 'Commercial indoor light' }, + { id: 'night', name: 'Night', desc: 'Low light, dark environment' }, + { id: 'park', name: 'Park', desc: 'Bright outdoor light' }, + { id: 'sunset', name: 'Sunset', desc: 'Warm evening light' }, + { id: 'warehouse', name: 'Warehouse', desc: 'Industrial lighting' }, + ].map((preset) => ( + + ))} +

+ ) : ( +

+ Material Properties +

+ + {!selectedObject || (selectedObject.type !== 'mesh' && selectedObject.type !== 'model') ? ( +

+ + Select a model or mesh to edit its material properties +

+ ) : ( + <> +

+ {selectedObject.name} + {selectedObject.type === 'model' ? "Bulk Editing Model" : "Mesh Editor"} +

+ + {/* Fill Settings */} +

+ Mesh Fill + +

+ + {selectedObject.fillProps?.enabled && ( + <> +

+ + +

+ +

+ Height + {Math.round(selectedObject.fillProps.height * 100)}% +

+ { + const newObjects = sceneObjects.map(obj => + obj.id === selectedObject.id ? { ...obj, fillProps: { ...obj.fillProps!, height: parseFloat(e.target.value) } } : obj + ); + setSceneObjects(newObjects); + }} + onMouseUp={() => pushToHistory(sceneObjects)} + className="w-full accent-primary" + /> +

+ +

+ Fill Color +

+ { + const newObjects = sceneObjects.map(obj => + obj.id === selectedObject.id ? { ...obj, fillProps: { ...obj.fillProps!, color: e.target.value } } : obj + ); + setSceneObjects(newObjects); + }} + onBlur={() => pushToHistory(sceneObjects)} + className="opacity-0 w-5 h-5 cursor-pointer absolute right-0" + /> +

+ + )} +

+ + {/* Color Picker */} +

+ Diffuse Color +

+ updateObjectMaterial(selectedObject.id, { color: e.target.value })} + className="w-full h-8 bg-zinc-800 border-none rounded cursor-pointer" + /> +

+ + {/* Texture Mapping */} +

+ Texture Map + {selectedObject.materialProps?.map ? ( + + ) : ( + None + )} +

+ +

textureInputRef.current?.click()} + className={cn( + "w-full h-24 rounded border-2 border-dashed flex flex-col items-center justify-center gap-2 cursor-pointer transition-all", + selectedObject.materialProps?.map + ? "border-blue-500/50 bg-blue-500/5 overflow-hidden" + : "border-zinc-800 hover:border-zinc-700 bg-zinc-800/30" + )} + > + {selectedObject.materialProps?.map ? ( + Texture Preview

+ ) : ( + <> + + Upload Texture + + )} +

+ +

+ + {/* UV Scale & Mapping */} +

+ Mapping +

+ +

+ + {/* UV Projection Dropdown */} +

+ UV Projection + +

+ + {/* UV Offset */} +

+ Offset (X, Y) +

+ updateObjectMaterial(selectedObject.id, { uvOffset: [parseFloat(e.target.value), selectedObject.materialProps?.uvOffset?.[1] ?? 0] })} + className="flex-1 bg-zinc-800 border-none rounded py-1.5 px-2 text-[10px] text-zinc-300" /> + updateObjectMaterial(selectedObject.id, { uvOffset: [selectedObject.materialProps?.uvOffset?.[0] ?? 0, parseFloat(e.target.value)] })} + className="flex-1 bg-zinc-800 border-none rounded py-1.5 px-2 text-[10px] text-zinc-300" /> +

+ + {/* UV Scale / Tiling */} +

+ Scale / Tiling (X, Y) +

+ updateObjectMaterial(selectedObject.id, { uvTiling: [parseFloat(e.target.value), selectedObject.materialProps?.uvTiling?.[1] ?? 1] })} + className="flex-1 bg-zinc-800 border-none rounded py-1.5 px-2 text-[10px] text-zinc-300" /> + updateObjectMaterial(selectedObject.id, { uvTiling: [selectedObject.materialProps?.uvTiling?.[0] ?? 1, parseFloat(e.target.value)] })} + className="flex-1 bg-zinc-800 border-none rounded py-1.5 px-2 text-[10px] text-zinc-300" /> +

+ + {/* UV Rotation */} +

+ Rotation + {(selectedObject.materialProps?.uvRotation ?? 0).toFixed(0)}° +

+ updateObjectMaterial(selectedObject.id, { uvRotation: parseFloat(e.target.value) })} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" /> +

+ + {/* Roughness */} +

+ Roughness + {(selectedObject.materialProps?.roughness ?? 0.5).toFixed(2)} +

+ updateObjectMaterial(selectedObject.id, { roughness: parseFloat(e.target.value) })} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + {/* Metalness */} +

+ Metalness + {(selectedObject.materialProps?.metalness ?? 0.5).toFixed(2)} +

+ updateObjectMaterial(selectedObject.id, { metalness: parseFloat(e.target.value) })} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + {/* Clearcoat */} +

+ Clearcoat + {(selectedObject.materialProps?.clearcoat ?? 0).toFixed(2)} +

+ updateObjectMaterial(selectedObject.id, { clearcoat: parseFloat(e.target.value) })} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + {/* Transmission */} +

+ Transmission + {(selectedObject.materialProps?.transmission ?? 0).toFixed(2)} +

+ updateObjectMaterial(selectedObject.id, { transmission: parseFloat(e.target.value) })} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + {/* IOR */} +

+ Index of Refraction + {(selectedObject.materialProps?.ior ?? 1.5).toFixed(2)} +

+ updateObjectMaterial(selectedObject.id, { ior: parseFloat(e.target.value) })} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + {/* Thickness */} +

+ Thickness + {(selectedObject.materialProps?.thickness ?? 0).toFixed(2)} +

+ updateObjectMaterial(selectedObject.id, { thickness: parseFloat(e.target.value) })} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + {/* Sheen */} +

+ Sheen + {(selectedObject.materialProps?.sheen ?? 0).toFixed(2)} +

+ updateObjectMaterial(selectedObject.id, { sheen: parseFloat(e.target.value) })} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + {/* Opacity */} +

+ Opacity + {(selectedObject.materialProps?.opacity ?? 1).toFixed(2)} +

+ updateObjectMaterial(selectedObject.id, { opacity: parseFloat(e.target.value) })} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + {/* Specular Intensity */} +

+ Specular Intensity + {(selectedObject.materialProps?.specularIntensity ?? 1).toFixed(2)} +

+ updateObjectMaterial(selectedObject.id, { specularIntensity: parseFloat(e.target.value) })} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + {/* Emissive */} +

+ Emissive Color +

+ updateObjectMaterial(selectedObject.id, { emissive: e.target.value })} + className="w-full h-8 bg-zinc-800 border-none rounded cursor-pointer" + /> +

+ +

+ Emissive Intensity + {(selectedObject.materialProps?.emissiveIntensity ?? 0).toFixed(2)} +

+ updateObjectMaterial(selectedObject.id, { emissiveIntensity: parseFloat(e.target.value) })} + className="w-full h-1 bg-zinc-800 rounded-lg appearance-none cursor-pointer accent-blue-500" + /> +

+ + {/* Advanced Maps */} +

+ Advanced Maps + {/* Normal Map */} +

+ Normal Map + {selectedObject.materialProps?.normalMap && ( + + )} +

normalInputRef.current?.click()} + className={cn( + "w-full h-12 rounded border border-dashed flex items-center justify-center gap-2 cursor-pointer transition-all", + selectedObject.materialProps?.normalMap ? "border-blue-500/50 bg-blue-500/5" : "border-zinc-800 hover:border-zinc-700 bg-zinc-800/30" + )} + > + {selectedObject.materialProps?.normalMap ? "Normal Map Loaded" : "Upload Normal Map"} +

+ handleTextureUpload(e, 'normalMap')} accept="image/*" className="hidden" /> +

+ + {/* Specular Map */} +

+ Specular Map + {selectedObject.materialProps?.specularMap && ( + + )} +

specularInputRef.current?.click()} + className={cn( + "w-full h-12 rounded border border-dashed flex items-center justify-center gap-2 cursor-pointer transition-all", + selectedObject.materialProps?.specularMap ? "border-blue-500/50 bg-blue-500/5" : "border-zinc-800 hover:border-zinc-700 bg-zinc-800/30" + )} + > + {selectedObject.materialProps?.specularMap ? "Specular Map Loaded" : "Upload Specular Map"} +

+ handleTextureUpload(e, 'specularMap')} accept="image/*" className="hidden" /> +

+ + {/* Alpha Map */} +

+ Alpha Map + {selectedObject.materialProps?.alphaMap && ( + + )} +

alphaInputRef.current?.click()} + className={cn( + "w-full h-12 rounded border border-dashed flex items-center justify-center gap-2 cursor-pointer transition-all", + selectedObject.materialProps?.alphaMap ? "border-blue-500/50 bg-blue-500/5" : "border-zinc-800 hover:border-zinc-700 bg-zinc-800/30" + )} + > + {selectedObject.materialProps?.alphaMap ? "Alpha Map Loaded" : "Upload Alpha Map"} +

+ handleTextureUpload(e, 'alphaMap')} accept="image/*" className="hidden" /> +

+ +

+ + )} +

+ )} + +

+ Scene Information + +

+ Triangles: + {loadedModel ? "Dynamic" : "12,452"} +

+ Vertices: + {loadedModel ? "Dynamic" : "8,210"} +

+ Objects: + 1 +

+ + {/* Bottom Toolbar */} +

+ + + + + + + + +

+ Cloud Library | VIZ3D Hub +

+ +

+ + {/* Context Menu */} + + {contextMenu && ( + <> +

setContextMenu(null)} + onContextMenu={(e) => { e.preventDefault(); setContextMenu(null); }} + /> + + + + +

+ + + + + + )} + + + {/* UV Editor Overlay */} + {showUVEditor && selectedObject && ( + setShowUVEditor(false)} + onSave={(dataUrl, mappingType, layers, bgColor, bgTransparent) => { + updateObjectMaterial(selectedObject.id, { map: dataUrl, mappingType: (mappingType as 'uv'|'box'|'planar'|'cylinder'|'sphere') || 'uv', uvLayers: layers, uvBackground: bgColor, uvTransparent: bgTransparent }); + }} + targetObject={selectedObject} + loadedModel={loadedModel as THREE.Group} + sceneObjects={sceneObjects} + /> + )} + + setShowImageTo3D(false)} + onPushToApp={async (modelUrl) => { + setIsLoading(true); + setImportStatus("Importing generated model..."); + try { + const manager = new THREE.LoadingManager(); + const loader = new GLTFLoader(manager); + const dracoLoader = new DRACOLoader(); + dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/'); + loader.setDRACOLoader(dracoLoader); + + const gltf = await loader.loadAsync(modelUrl); + const object = gltf.scene; + dracoLoader.dispose(); + + const mainModelId = `model-${Date.now()}`; + const newSceneObjects: SceneObject[] = [ + { + id: mainModelId, + name: 'Generated 3D Model', + type: 'model', + parentId: null, + visible: true, + transformProps: { position: [0, 0, 0], rotation: [0, 0, 0], scale: [1, 1, 1] } + } + ]; + + object.visible = true; + let mIdx = 0; + object.traverse((child) => { + if (child instanceof THREE.Mesh) { + child.castShadow = true; + child.receiveShadow = true; + child.frustumCulled = false; + const meshId = `mesh-${mIdx}`; + 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; + } + + newSceneObjects.push({ + id: meshId, + name: child.name || `Mesh ${meshId.slice(0, 4)}`, + type: 'mesh', + parentId: mainModelId, + visible: true, + transformProps: { + position: [child.position?.x || 0, child.position?.y || 0, child.position?.z || 0], + rotation: [child.rotation?.x || 0, child.rotation?.y || 0, child.rotation?.z || 0], + scale: [child.scale?.x || 1, child.scale?.y || 1, child.scale?.z || 1] + }, + materialProps: mProps + }); + } + }); + + setLoadedModel(object); + setBlobURLs(prev => [...prev, modelUrl]); + setSceneObjects(prev => [ + ...prev.filter(obj => obj.type !== 'cube'), + ...newSceneObjects + ]); + setSelectedIds([mainModelId]); + setShowImageTo3D(false); + + setTimeout(() => { + setIsLoading(false); + setImportStatus(""); + }, 500); + + } catch (error) { + console.error('Error loading generated model:', error); + setIsLoading(false); + setImportStatus(""); + } + }} + /> +

+ ); +} diff --git a/src/components/ErrorBoundary.tsx b/src/components/ErrorBoundary.tsx new file mode 100644 index 0000000..953a03a --- /dev/null +++ b/src/components/ErrorBoundary.tsx @@ -0,0 +1,45 @@ +import React, { Component, ErrorInfo, ReactNode } from 'react'; + +interface Props { + children: ReactNode; + fallback?: ReactNode; +} + +interface State { + hasError: boolean; + error: Error | null; +} + +export class ErrorBoundary extends Component { + public state: State = { + hasError: false, + error: null + }; + + public static getDerivedStateFromError(error: Error): State { + return { hasError: true, error }; + } + + public componentDidCatch(error: Error, errorInfo: ErrorInfo) { + console.error('Uncaught error:', error, errorInfo); + } + + public render() { + if (this.state.hasError) { + return this.props.fallback || ( +

Something went wrong

{this.state.error?.message}

+ +

+ ); + } + + return this.props.children; + } +} diff --git a/src/components/ImageTo3DModal.tsx b/src/components/ImageTo3DModal.tsx new file mode 100644 index 0000000..a4894a0 --- /dev/null +++ b/src/components/ImageTo3DModal.tsx @@ -0,0 +1,688 @@ +import React, { useState, useEffect, useRef } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { X, Upload, Settings as SettingsIcon, Image as ImageIcon, Box, Download, AlertCircle, Loader2, Check } from 'lucide-react'; +import { fal } from '@fal-ai/client'; +import { cn } from '../lib/utils'; +import { Canvas } from '@react-three/fiber'; +import { OrbitControls, Stage } from '@react-three/drei'; +import { GLTFLoader } from 'three-stdlib'; +import * as THREE from 'three'; + +interface ImageTo3DModalProps { + isOpen: boolean; + onClose: () => void; + onPushToApp: (modelUrl: string) => void; +} + +const MODELS = [ + { id: 'fal-ai/hunyuan3d/v2/image-to-3d', name: 'Hunyuan3D-2 (Latest)' }, + { id: 'fal-ai/hunyuan3d/v1', name: 'Hunyuan3D-1' }, + { id: 'fal-ai/meshy/v6/image-to-3d', name: 'Meshy v6' }, + { id: 'fal-ai/tripo3d', name: 'Tripo3D' } +]; + +const ModelPreview = ({ url }: { url: string }) => { + const [model, setModel] = useState(null); + + useEffect(() => { + const loader = new GLTFLoader(); + loader.load(url, (gltf) => { + setModel(gltf.scene); + }); + }, [url]); + + if (!model) return

; + + return ( +

+ ); +}; + +export const ImageTo3DModal: React.FC = ({ isOpen, onClose, onPushToApp }) => { + const [activeTab, setActiveTab] = useState<'generator' | 'settings'>('generator'); + const [apiProvider, setApiProvider] = useState<'fal' | 'tripo' | 'meshy'>('fal'); + const [apiKey, setApiKey] = useState(''); + const [tripoApiKey, setTripoApiKey] = useState(''); + const [meshyApiKey, setMeshyApiKey] = useState(''); + const [selectedModel, setSelectedModel] = useState(MODELS[0].id); + const [imageFile, setImageFile] = useState(null); + const [imagePreview, setImagePreview] = useState(null); + + // Meshy specific state + const [meshyModelType, setMeshyModelType] = useState('standard'); + const [meshyAiModel, setMeshyAiModel] = useState('latest'); + const [meshyShouldTexture, setMeshyShouldTexture] = useState(true); + const [meshyEnablePbr, setMeshyEnablePbr] = useState(false); + const [meshyHdTexture, setMeshyHdTexture] = useState(false); + const [meshyTexturePrompt, setMeshyTexturePrompt] = useState(''); + const [meshyTextureImageUrl, setMeshyTextureImageUrl] = useState(''); + const [meshyShouldRemesh, setMeshyShouldRemesh] = useState(false); + const [meshyTopology, setMeshyTopology] = useState('triangle'); + const [meshyTargetPolycount, setMeshyTargetPolycount] = useState(30000); + + const [isGenerating, setIsGenerating] = useState(false); + const [progressMessage, setProgressMessage] = useState(''); + const [generatedModelUrl, setGeneratedModelUrl] = useState(null); + const [error, setError] = useState(null); + const fileInputRef = useRef(null); + const [isValidatingKey, setIsValidatingKey] = useState(false); + const [keyValidationStatus, setKeyValidationStatus] = useState<'idle' | 'valid' | 'invalid' | 'error'>('idle'); + + useEffect(() => { + setKeyValidationStatus('idle'); + }, [apiKey, tripoApiKey, meshyApiKey, apiProvider]); + + const validateKey = async () => { + setIsValidatingKey(true); + setKeyValidationStatus('idle'); + try { + if (apiProvider === 'fal') { + const res = await fetch('https://fal.run/', { + headers: { Authorization: `Key ${apiKey}` } + }); + if (res.status === 401 || res.status === 403) setKeyValidationStatus('invalid'); + else setKeyValidationStatus('valid'); + } else if (apiProvider === 'tripo') { + const res = await fetch('https://api.tripo3d.ai/v2/openapi/task', { + headers: { Authorization: `Bearer ${tripoApiKey}` } + }); + if (res.status === 401 || res.status === 403) setKeyValidationStatus('invalid'); + else setKeyValidationStatus('valid'); + } else if (apiProvider === 'meshy') { + const res = await fetch('https://api.meshy.ai/openapi/v1/image-to-3d', { + headers: { Authorization: `Bearer ${meshyApiKey}` } + }); + if (res.status === 401 || res.status === 403) setKeyValidationStatus('invalid'); + else setKeyValidationStatus('valid'); + } + } catch (e) { + setKeyValidationStatus('error'); + } finally { + setIsValidatingKey(false); + } + }; + + useEffect(() => { + const savedProvider = localStorage.getItem('API_PROVIDER') as 'fal' | 'tripo' | 'meshy' | null; + if (savedProvider) setApiProvider(savedProvider); + const savedKey = localStorage.getItem('FAL_API_KEY'); + if (savedKey) setApiKey(savedKey); + const savedTripoKey = localStorage.getItem('TRIPO_API_KEY'); + if (savedTripoKey) setTripoApiKey(savedTripoKey); + const savedMeshyKey = localStorage.getItem('MESHY_API_KEY'); + if (savedMeshyKey) setMeshyApiKey(savedMeshyKey); + const savedModel = localStorage.getItem('FAL_MODEL'); + if (savedModel) setSelectedModel(savedModel); + }, []); + + const handleSaveSettings = () => { + localStorage.setItem('API_PROVIDER', apiProvider); + localStorage.setItem('FAL_API_KEY', apiKey); + localStorage.setItem('TRIPO_API_KEY', tripoApiKey); + localStorage.setItem('MESHY_API_KEY', meshyApiKey); + localStorage.setItem('FAL_MODEL', selectedModel); + if (apiProvider === 'fal') fal.config({ credentials: apiKey }); + setActiveTab('generator'); + }; + + const handleImageUpload = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; + if (file) { + setImageFile(file); + const url = URL.createObjectURL(file); + setImagePreview(url); + setGeneratedModelUrl(null); + setError(null); + } + }; + + // Utility to convert file to data URL for Fal API if needed + const fileToDataUrl = (file: File): Promise => { + return new Promise((resolve, reject) => { + const reader = new FileReader(); + reader.onload = () => resolve(reader.result as string); + reader.onerror = reject; + reader.readAsDataURL(file); + }); + }; + + const generate3DModel = async () => { + if (!imageFile) { + setError("Please upload an image first."); + return; + } + if (apiProvider === 'fal' && !apiKey) { + setError("Fal API Key is required. Please check settings."); + setActiveTab('settings'); + return; + } + if (apiProvider === 'tripo' && !tripoApiKey) { + setError("Tripo API Key is required. Please check settings."); + setActiveTab('settings'); + return; + } + if (apiProvider === 'meshy' && !meshyApiKey) { + setError("Meshy API Key is required. Please check settings."); + setActiveTab('settings'); + return; + } + + try { + setIsGenerating(true); + setError(null); + setProgressMessage("Uploading image..."); + + if (apiProvider === 'fal') { + fal.config({ credentials: apiKey }); + const dataUrl = await fileToDataUrl(imageFile); + setProgressMessage("Generating 3D Model... This might take up to a minute."); + + let inputPayload: any = { image_url: dataUrl }; + if (selectedModel.includes('tripo')) { + inputPayload = { image_url: dataUrl }; + } + + const result = await fal.subscribe(selectedModel, { + input: inputPayload, + logs: true, + onQueueUpdate: (update) => { + if (update.status === "IN_PROGRESS") { + update.logs?.map((log) => setProgressMessage(log.message)); + } + }, + }); + + console.log("Fal API Result:", result); + + let modelUrl = null; + if (result.data) { + if (result.data.model_3d && result.data.model_3d.url) { + modelUrl = result.data.model_3d.url; // Hunyuan v2 + } else if (result.data.video && result.data.video.url && result.data.video.url.endsWith('.glb')) { + modelUrl = result.data.video.url; + } else if (result.data.mesh_url) { + modelUrl = result.data.mesh_url; + } else if (result.data.model_url) { + modelUrl = result.data.model_url; + } + } + + if (modelUrl) { + setGeneratedModelUrl(modelUrl); + setProgressMessage("Done!"); + } else { + setError("Failed to extract 3D model from response."); + } + } else if (apiProvider === 'tripo') { + // TRIPO NATIVE API + const formData = new FormData(); + formData.append('file', imageFile); + + const uploadRes = await fetch('https://api.tripo3d.ai/v2/openapi/upload', { + method: 'POST', + headers: { + 'Authorization': `Bearer ${tripoApiKey}` + }, + body: formData + }); + + if (!uploadRes.ok) throw new Error("Tripo API: Upload failed."); + const uploadData = await uploadRes.json(); + if (uploadData.code !== 0) throw new Error(`Tripo API Upload Error: ${uploadData.message || 'Unknown'}`); + + const imageToken = uploadData.data.image_token; + setProgressMessage("Generating 3D Model with Tripo3D... This might take up to a minute."); + + const taskRes = await fetch('https://api.tripo3d.ai/v2/openapi/task', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${tripoApiKey}` + }, + body: JSON.stringify({ + type: "image_to_model", + file: { + type: imageFile.type.includes('png') ? 'png' : 'jpg', + file_token: imageToken + } + }) + }); + + if (!taskRes.ok) throw new Error("Tripo API: Task creation failed."); + const taskData = await taskRes.json(); + if (taskData.code !== 0) throw new Error(`Tripo API Task Error: ${taskData.message || 'Unknown'}`); + + const taskId = taskData.data.task_id; + + let isDone = false; + while (!isDone) { + await new Promise(r => setTimeout(r, 2000)); + const pollRes = await fetch(`https://api.tripo3d.ai/v2/openapi/task/${taskId}`, { + headers: { + 'Authorization': `Bearer ${tripoApiKey}` + } + }); + if (!pollRes.ok) throw new Error("Tripo API: Polling failed."); + const pollData = await pollRes.json(); + if (pollData.code !== 0) throw new Error(`Tripo API Poll Error: ${pollData.message}`); + + const status = pollData.data.status; + const progress = pollData.data.progress || 0; + setProgressMessage(`Generating... ${progress}%`); + + if (status === 'success') { + const modelUrl = pollData.data.result.model.url || (pollData.data.result.pbr && pollData.data.result.pbr.model && pollData.data.result.pbr.model.url); + if (!modelUrl) throw new Error("Tripo API: Model URL not found in result."); + setGeneratedModelUrl(modelUrl); + setProgressMessage("Done!"); + isDone = true; + } else if (status === 'failed' || status === 'cancelled') { + throw new Error(`Tripo API Task ${status}`); + } + } + } else if (apiProvider === 'meshy') { + // MESHY NATIVE API + const dataUrl = await fileToDataUrl(imageFile); + setProgressMessage("Generating 3D Model with Meshy... This might take up to a minute."); + + let payload: any = { + image_url: dataUrl, + model_type: meshyModelType, + should_texture: meshyShouldTexture + }; + + if (meshyModelType !== 'lowpoly') { + payload.ai_model = meshyAiModel; + payload.should_remesh = meshyShouldRemesh; + if (meshyShouldRemesh) { + payload.topology = meshyTopology; + payload.target_polycount = meshyTargetPolycount; + } + } + + if (meshyShouldTexture) { + payload.enable_pbr = meshyEnablePbr; + if (meshyAiModel !== 'meshy-5') { + payload.hd_texture = meshyHdTexture; + } + if (meshyTextureImageUrl) { + payload.texture_image_url = meshyTextureImageUrl; + } else if (meshyTexturePrompt) { + payload.texture_prompt = meshyTexturePrompt; + } + } + + const taskRes = await fetch('https://api.meshy.ai/openapi/v1/image-to-3d', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + 'Authorization': `Bearer ${meshyApiKey}` + }, + body: JSON.stringify(payload) + }); + + if (!taskRes.ok) throw new Error("Meshy API: Task creation failed."); + const taskData = await taskRes.json(); + const taskId = taskData.result; + + let isDone = false; + while (!isDone) { + await new Promise(r => setTimeout(r, 2000)); + const pollRes = await fetch(`https://api.meshy.ai/openapi/v1/image-to-3d/${taskId}`, { + headers: { + 'Authorization': `Bearer ${meshyApiKey}` + } + }); + if (!pollRes.ok) throw new Error("Meshy API: Polling failed."); + const pollData = await pollRes.json(); + + const status = pollData.status; + const progress = pollData.progress || 0; + setProgressMessage(`Generating... ${progress}%`); + + if (status === 'SUCCEEDED') { + const modelUrl = pollData.model_urls?.glb; + if (!modelUrl) throw new Error("Meshy API: Model URL not found in result."); + setGeneratedModelUrl(modelUrl); + setProgressMessage("Done!"); + isDone = true; + } else if (status === 'FAILED' || status === 'EXPIRED') { + throw new Error(`Meshy API Task ${status}`); + } + } + } + } catch (err: any) { + console.error(err); + setError(err.message || "An error occurred during generation."); + } finally { + setIsGenerating(false); + } + }; + + if (!isOpen) return null; + + return ( + +

+ + {/* Header */} +

+ + Image to 3D Generation +

+ +

+ {/* Sidebar Tabs */} +

+ + +

+ + {/* Content Area */} +

+ {activeTab === 'settings' ? ( +

API Configuration

Configure your API credentials to access AI models.

+ +

+ API Provider + +

+ + {apiProvider === 'fal' ? ( + <> +

+ FAL_KEY (API Key) + setApiKey(e.target.value)} + placeholder="Enter your fal.ai API key" + className="bg-zinc-950 border border-zinc-800 rounded-lg px-4 py-2.5 text-sm text-zinc-300 focus:outline-none focus:border-blue-500/50" + /> +

+ +

+ AI Model + +

+ + ) : apiProvider === 'tripo' ? ( +

+ TRIPO API KEY + setTripoApiKey(e.target.value)} + placeholder="Enter your Tripo3D API key (starts with tsk_...)" + className="bg-zinc-950 border border-zinc-800 rounded-lg px-4 py-2.5 text-sm text-zinc-300 focus:outline-none focus:border-blue-500/50" + /> +

+ ) : ( +

+ MESHY API KEY + setMeshyApiKey(e.target.value)} + placeholder="Enter your Meshy API key (starts with msy_...)" + className="bg-zinc-950 border border-zinc-800 rounded-lg px-4 py-2.5 text-sm text-zinc-300 focus:outline-none focus:border-blue-500/50" + /> +

+ )} + +

+ + {keyValidationStatus === 'valid' && Valid Key} + {keyValidationStatus === 'invalid' && Invalid Key} + {keyValidationStatus === 'error' && Network Error} +

+ + +

+ ) : ( +

+ {/* Left Column: Upload */} +

Input Image

+ Front View +

+ + + + {imagePreview ? ( + <> + Preview

+ Change Image +

+ + + ) : ( +

+ +

Click to upload image

PNG, JPG up to 10MB

Tip: Use an image with a solid or transparent background.

+ )} + + + {apiProvider === 'meshy' && ( +

Meshy Settings

+ +

+ Model Type + +

+ AI Model + +

+ +

+ + setMeshyShouldTexture(e.target.checked)} className="rounded border-zinc-700 bg-zinc-900 text-blue-500 cursor-pointer" /> + Texture + + + setMeshyEnablePbr(e.target.checked)} disabled={!meshyShouldTexture} className="rounded border-zinc-700 bg-zinc-900 text-blue-500 cursor-pointer" /> + PBR + + + setMeshyHdTexture(e.target.checked)} disabled={!meshyShouldTexture || meshyAiModel === 'meshy-5'} className="rounded border-zinc-700 bg-zinc-900 text-blue-500 cursor-pointer" /> + 4K HD + +

+ + {meshyShouldTexture && ( +

+ setMeshyTexturePrompt(e.target.value)} maxLength={600} placeholder="Texture prompt (optional)..." className="bg-zinc-950 border border-zinc-800 rounded px-2 py-1.5 text-xs text-zinc-300" /> + setMeshyTextureImageUrl(e.target.value)} placeholder="Texture Image URL (optional)..." className="bg-zinc-950 border border-zinc-800 rounded px-2 py-1.5 text-xs text-zinc-300" /> +

+ )} + +

+ + setMeshyShouldRemesh(e.target.checked)} disabled={meshyModelType === 'lowpoly'} className="rounded border-zinc-700 bg-zinc-900 text-blue-500 cursor-pointer" /> + Remesh + +

+ + {meshyShouldRemesh && meshyModelType !== 'lowpoly' && ( +

+ Topology + +

+ Polycount + setMeshyTargetPolycount(parseInt(e.target.value) || 30000)} className="bg-zinc-950 border border-zinc-800 rounded px-2 py-1.5 text-xs text-zinc-300" /> +

+ )} +

+ )} + + {error && ( +

+ +

{error}

+ )} + + +

+ + {/* Right Column: Output */} +

3D Preview

+ {generatedModelUrl ? ( + <> +

+ +

+ + + +

+ + ) : isGenerating ? ( +

+ +

{progressMessage}

+ ) : ( +

+ +

Your 3D model will appear here

+ )} +

+ + {generatedModelUrl && ( + + )} +

+ )} +

+ +

+ + ); +}; diff --git a/src/components/JuiceBox.tsx b/src/components/JuiceBox.tsx new file mode 100644 index 0000000..049fc41 --- /dev/null +++ b/src/components/JuiceBox.tsx @@ -0,0 +1,112 @@ +import { useRef, useMemo, forwardRef } from "react"; +import { useFrame } from "@react-three/fiber"; +import { RoundedBox, Text } from "@react-three/drei"; +import * as THREE from "three"; +import { Liquid } from "./LiquidShader"; + +export const JuiceBox = forwardRef(({ + color = "#4ade80", + roughness = 0.1, + metalness = 0.05, + clearcoat = 1.0, + transmission = 0, + thickness = 0, + ior = 1.5, + sheen = 0, + map = undefined, + uvScale = 1, + showLiquid = true, + liquidColor = "#ff9900", + ...props +}, ref) => { + const meshRef = useRef(null); + + // Create a custom texture for the juice box + const customTexture = useMemo(() => { + if (map) return null; + const canvas = document.createElement("canvas"); + canvas.width = 512; + canvas.height = 1024; + const ctx = canvas.getContext("2d"); + if (ctx) { + // Background + ctx.fillStyle = color; + ctx.fillRect(0, 0, 512, 1024); + + // Header + ctx.fillStyle = "#166534"; + ctx.fillRect(0, 0, 512, 100); + + // Text + ctx.fillStyle = "white"; + ctx.font = "bold 80px sans-serif"; + ctx.textAlign = "center"; + ctx.fillText("MAA", 256, 300); + + ctx.font = "bold 60px sans-serif"; + ctx.fillStyle = "#be123c"; + ctx.fillText("GUAVA", 256, 400); + + // Guava illustration (simple circles) + ctx.fillStyle = "#f472b6"; + ctx.beginPath(); + ctx.arc(256, 650, 150, 0, Math.PI * 2); + ctx.fill(); + + ctx.strokeStyle = "#166534"; + ctx.lineWidth = 10; + ctx.stroke(); + + ctx.fillStyle = "white"; + ctx.font = "24px sans-serif"; + ctx.fillText("REFRESHING FRUIT DRINK", 256, 150); + } + const tex = new THREE.CanvasTexture(canvas); + tex.needsUpdate = true; + return tex; + }, [color, map]); + + const uploadedTexture = useMemo(() => { + if (!map) return null; + const loader = new THREE.TextureLoader(); + const tex = loader.load(map); + tex.colorSpace = THREE.SRGBColorSpace; + tex.wrapS = tex.wrapT = THREE.RepeatWrapping; + tex.repeat.set(uvScale, uvScale); + return tex; + }, [map, uvScale]); + + return ( + + + 0} + envMapIntensity={1.5} + /> + + + {showLiquid && ( + + + + )} + + ); +}); diff --git a/src/components/LiquidShader.tsx b/src/components/LiquidShader.tsx new file mode 100644 index 0000000..5cc4b94 --- /dev/null +++ b/src/components/LiquidShader.tsx @@ -0,0 +1,134 @@ +import { useRef, useMemo } from "react"; +import { useFrame, useThree, extend, ThreeElement } from "@react-three/fiber"; +import * as THREE from "three"; +import { shaderMaterial } from "@react-three/drei"; + +// Type declaration for JSX +declare global { + namespace JSX { + interface IntrinsicElements { + liquidMaterialImpl: any; + } + } +} + +const LiquidMaterialImpl = shaderMaterial( + { + uTime: 0, + uColor: new THREE.Color("#ff9900"), + uResolution: new THREE.Vector2(), + uFresnelBias: 0.1, + uFresnelScale: 1.0, + uFresnelPower: 2.0, + uRefractionRatio: 0.98, + uIor: 1.33, + }, + // Vertex Shader + ` + #include + varying vec3 vNormal; + varying vec3 vViewPosition; + varying vec2 vUv; + varying vec3 vWorldPosition; + + void main() { + vUv = uv; + vNormal = normalize(normalMatrix * normal); + vec4 worldPosition = modelMatrix * vec4(position, 1.0); + vWorldPosition = worldPosition.xyz; + vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); + vViewPosition = -mvPosition.xyz; + #include + gl_Position = projectionMatrix * mvPosition; + } + `, + // Fragment Shader + ` + #include + + uniform float uTime; + uniform vec3 uColor; + uniform vec2 uResolution; + uniform float uFresnelBias; + uniform float uFresnelScale; + uniform float uFresnelPower; + uniform float uIor; + + varying vec3 vNormal; + varying vec3 vViewPosition; + varying vec2 vUv; + varying vec3 vWorldPosition; + + // Simple noise function for caustics and imperfections + float hash(vec2 p) { + return fract(sin(dot(p, vec2(127.1, 311.7))) * 43758.5453123); + } + + float noise(vec2 p) { + vec2 i = floor(p); + vec2 f = fract(p); + f = f * f * (3.0 - 2.0 * f); + return mix(mix(hash(i + vec2(0.0, 0.0)), hash(i + vec2(1.0, 0.0)), f.x), + mix(hash(i + vec2(0.0, 1.0)), hash(i + vec2(1.0, 1.0)), f.x), f.y); + } + + void main() { + #include + vec3 normal = normalize(vNormal); + vec3 viewDir = normalize(vViewPosition); + + // Fresnel effect + float fresnel = uFresnelBias + uFresnelScale * pow(1.0 + dot(viewDir, normal), uFresnelPower); + + // Caustics simulation + vec2 causticUv = vWorldPosition.xz * 2.0 + vWorldPosition.y * 0.5; + float caustic = noise(causticUv * 5.0 + uTime * 0.5) * 0.5 + 0.5; + caustic *= noise(causticUv * 10.0 - uTime * 0.3) * 0.5 + 0.5; + caustic = pow(caustic, 3.0) * 1.5; + + // Surface imperfections + float imperfection = noise(vUv * 20.0 + uTime * 0.1) * 0.05; + + vec3 finalColor = uColor; + finalColor += caustic * 0.2 * uColor; + finalColor -= imperfection; + + // Simple refraction-like look by blending with fresnel + vec3 skyColor = vec3(0.8, 0.9, 1.0); + finalColor = mix(finalColor, skyColor, fresnel * 0.3); + + gl_FragColor = vec4(finalColor, 0.9); + } + ` +); + +extend({ LiquidMaterialImpl }); + +export function Liquid({ color = "#ff9900", size = [0.9, 1.8, 0.5] }) { + const materialRef = useRef(null); + const { size: winSize } = useThree(); + + useFrame((state) => { + if (materialRef.current) { + const mat = materialRef.current; + if (mat.uTime !== undefined) mat.uTime = state.clock.elapsedTime; + if (mat.uResolution && mat.uResolution.set) { + mat.uResolution.set(winSize.width || 800, winSize.height || 600); + } + } + }); + + return ( + + + {/* @ts-ignore */} + + + ); +} diff --git a/src/components/ModelViewer.tsx b/src/components/ModelViewer.tsx new file mode 100644 index 0000000..184ffd4 --- /dev/null +++ b/src/components/ModelViewer.tsx @@ -0,0 +1,271 @@ +import { useRef, useEffect, forwardRef, useMemo, useState } from "react"; +import * as THREE from "three"; +import { useFrame, useThree, createPortal } from "@react-three/fiber"; +import { MaterialFactory } from "../materials/MaterialFactory"; +import { useTexturePipeline } from "../hooks/useTexturePipeline"; + +interface ModelViewerProps { + object: THREE.Object3D | null; + sceneObjects: any[]; +} + +interface MeshMaterialManagerProps { + mesh: THREE.Mesh; + sceneObj: any; + textureCache: React.MutableRefObject>; +} + +const MeshMaterialManager = ({ mesh, sceneObj, textureCache }: MeshMaterialManagerProps) => { + useEffect(() => { + if (!mesh || !sceneObj.materialProps) return; + + const props = sceneObj.materialProps; + const mappingType = props.mappingType || 'uv'; + const uvScale = props.uvScale || 1; + const uvTiling = props.uvTiling || [1, 1]; + const uvOffset = props.uvOffset || [0, 0]; + const uvRotation = props.uvRotation || 0; + + const origMat = (Array.isArray(mesh.material) ? mesh.material[0] : mesh.material) as THREE.MeshPhysicalMaterial; + + const baseParams: any = { + color: origMat.color, + roughness: origMat.roughness !== undefined ? origMat.roughness : 0.5, + metalness: origMat.metalness !== undefined ? origMat.metalness : 0, + map: origMat.map, + normalMap: origMat.normalMap, + roughnessMap: origMat.roughnessMap, + metalnessMap: origMat.metalnessMap, + aoMap: origMat.aoMap, + emissiveMap: origMat.emissiveMap, + emissive: origMat.emissive, + emissiveIntensity: origMat.emissiveIntensity, + envMapIntensity: origMat.envMapIntensity, + alphaMap: origMat.alphaMap, + transparent: origMat.transparent, + opacity: origMat.opacity, + side: origMat.side, + alphaTest: origMat.alphaTest, + }; + + // Use MaterialFactory to get reusable materials + let activeMat: any; + if (mappingType === 'triplanar') { + activeMat = MaterialFactory.getInstance().getTriplanarMaterial( + baseParams, + mesh.uuid + ); + + activeMat.triplanarUniforms.uTriplanarScale.value = uvScale; + activeMat.triplanarUniforms.uBlendSharpness.value = 5.0; // Default or from props + } else { + activeMat = MaterialFactory.getInstance().getStandardUVMaterial( + baseParams, + mesh.uuid + ); + + let modeIndex = 0; + if (mappingType === 'planar') modeIndex = 1; + else if (mappingType === 'box') modeIndex = 2; + else if (mappingType === 'cylinder') modeIndex = 3; + + activeMat.uvUniforms.uMappingMode.value = modeIndex; + activeMat.updateUVTransform(uvOffset, [uvTiling[0] * uvScale, uvTiling[1] * uvScale], uvRotation * (Math.PI / 180)); + } + + // Apply basic props + if (props.color) activeMat.color.set(props.color); + if (props.roughness !== undefined) activeMat.roughness = props.roughness; + if (props.metalness !== undefined) activeMat.metalness = props.metalness; + if (props.opacity !== undefined) activeMat.opacity = props.opacity; + if (props.transmission !== undefined) activeMat.transmission = props.transmission; + activeMat.transparent = (props.transmission > 0) || (props.opacity < 1) || !!props.alphaMap; + + if (Array.isArray(mesh.material)) { + mesh.material = mesh.material.map(() => activeMat); + } else { + mesh.material = activeMat; + } + + // Textures + const textureTypes: ('map' | 'normalMap' | 'specularMap' | 'alphaMap')[] = ['map', 'normalMap', 'specularMap', 'alphaMap']; + textureTypes.forEach(type => { + const url = props[type]; + if (url) { + if (!activeMat[type] || activeMat[type]!.name !== url) { + if (textureCache.current.has(url)) { + activeMat[type] = textureCache.current.get(url)!; + if (mappingType === 'triplanar') activeMat.triplanarUniforms['t' + type.charAt(0).toUpperCase() + type.slice(1).replace('Map', '')].value = activeMat[type]; + activeMat.needsUpdate = true; + } else { + const loader = new THREE.TextureLoader(); + loader.load(url, (tex) => { + tex.name = url; + if (type === 'map') tex.colorSpace = THREE.SRGBColorSpace; + tex.wrapS = tex.wrapT = THREE.RepeatWrapping; + textureCache.current.set(url, tex); + activeMat[type] = tex; + if (mappingType === 'triplanar') activeMat.triplanarUniforms['t' + type.charAt(0).toUpperCase() + type.slice(1).replace('Map', '')].value = tex; + activeMat.needsUpdate = true; + }); + } + } + } else if (url === null && activeMat[type]) { + activeMat[type] = null; + if (mappingType === 'triplanar') activeMat.triplanarUniforms['t' + type.charAt(0).toUpperCase() + type.slice(1).replace('Map', '')].value = null; + activeMat.needsUpdate = true; + } + }); + + mesh.visible = sceneObj.visible; + mesh.castShadow = true; + mesh.receiveShadow = true; + mesh.frustumCulled = false; + + // Sync individual mesh transform + if (sceneObj.transformProps) { + const { position, rotation, scale } = sceneObj.transformProps; + mesh.position.set(position[0], position[1], position[2]); + mesh.rotation.set(rotation[0], rotation[1], rotation[2]); + mesh.scale.set(scale[0], scale[1], scale[2]); + } + + }, [sceneObj, mesh]); + + return null; +}; + +const FillMesh = ({ fillProps, originalMesh }: { fillProps: any, originalMesh: THREE.Mesh }) => { + const materialRef = useRef(null); + const [clippingPlane] = useState(() => new THREE.Plane(new THREE.Vector3(0, -1, 0), 0)); + const { size: winSize } = useThree(); + + // Clone geometry and fix interpolation + const geometry = useMemo(() => { + const geo = originalMesh.geometry.clone(); + geo.computeVertexNormals(); + return geo; + }, [originalMesh.geometry]); + + // Update clipping plane based on height + useEffect(() => { + geometry.computeBoundingBox(); + const box = geometry.boundingBox || new THREE.Box3().setFromObject(originalMesh); + const minY = box.min.y; + const maxY = box.max.y; + // height is 0 to 1 + const clipY = minY + (maxY - minY) * (fillProps.height ?? 0.5); + // Since this plane is applied in world space by Three.js by default, + // wait, localClippingEnabled = true means the plane is in LOCAL space! + // If it's local space, clipY is exact. + clippingPlane.constant = clipY; + }, [geometry, fillProps.height, originalMesh]); + + useFrame((state) => { + if (materialRef.current && fillProps.type === 'liquid') { + const mat = materialRef.current; + if (mat.uTime !== undefined) mat.uTime = state.clock.elapsedTime; + if (mat.uResolution && mat.uResolution.set) { + mat.uResolution.set(winSize.width || 800, winSize.height || 600); + } + } + }); + + const fillNode = ( + + {fillProps.type === 'liquid' ? ( + // @ts-ignore + + ) : ( + + )} + + ); + + return createPortal(fillNode, originalMesh); +}; + +export const ModelViewer = forwardRef(({ object, sceneObjects }, ref) => { + const internalRef = useRef(null); + const groupRef = (ref as any) || internalRef; + const textureCache = useRef>(new Map()); + const meshCache = useRef>(new Map()); + + useTexturePipeline(object); + + // Cleanup textures on unmount + useEffect(() => { + return () => { + textureCache.current.forEach(tex => tex.dispose()); + textureCache.current.clear(); + meshCache.current.clear(); + }; + }, []); + + // Build mesh cache when object changes + useEffect(() => { + meshCache.current.clear(); + if (object) { + let mIdx = 0; + object.traverse((child) => { + if (child instanceof THREE.Mesh) { + const stableId = `mesh-${mIdx}`; + meshCache.current.set(stableId, child); + mIdx++; + } + }); + } + }, [object]); + + // Main transform update for the core model + useEffect(() => { + if (object && sceneObjects) { + const mainModel = sceneObjects.find(obj => obj.type === 'model'); + if (mainModel && mainModel.transformProps && groupRef.current) { + const { position: p, rotation: r, scale: s } = mainModel.transformProps; + groupRef.current.position.set(p[0], p[1], p[2]); + groupRef.current.rotation.set(r[0], r[1], r[2]); + groupRef.current.scale.set(s[0], s[1], s[2]); + } + } + }, [object, sceneObjects]); + + if (!object) return null; + + const meshObjects = sceneObjects.filter(obj => obj.type === 'mesh'); + + return ( + + + {meshObjects.map(obj => { + const mesh = meshCache.current.get(obj.id); + if (!mesh) return null; + return ( + + + {obj.fillProps?.enabled && ( + + )} + + ); + })} + + ); +}); diff --git a/src/components/RenderModal.tsx b/src/components/RenderModal.tsx new file mode 100644 index 0000000..5ba94b4 --- /dev/null +++ b/src/components/RenderModal.tsx @@ -0,0 +1,252 @@ +import React, { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { X, Download, Image as ImageIcon, Layers, Settings, Monitor, Smartphone, Maximize2 } from 'lucide-react'; +import { cn } from '../lib/utils'; + +interface RenderModalProps { + isOpen: boolean; + onClose: () => void; + onRender: (settings: RenderSettings) => void; +} + +export interface RenderSettings { + width: number; + height: number; + includeAlpha: boolean; + format: 'png' | 'jpg'; + name: string; + folder?: string; +} + +const RESOLUTION_PRESETS = [ + { label: '7680 x 4800 (8K)', w: 7680, h: 4800 }, + { label: '3840 x 2400 (4K)', w: 3840, h: 2400 }, + { label: '2560 x 1600 (2K)', w: 2560, h: 1600 }, + { label: '1920 x 1200 (Full HD)', w: 1920, h: 1200 }, + { label: '1600 x 1000', w: 1600, h: 1000 }, + { label: '1280 x 800', w: 1280, h: 800 }, + { label: '1024 x 640', w: 1024, h: 640 }, + { label: '800 x 500', w: 800, h: 500 }, + { label: '640 x 400', w: 640, h: 400 }, +]; + +export const RenderModal: React.FC = ({ isOpen, onClose, onRender }) => { + const [settings, setSettings] = useState({ + width: 1920, + height: 1200, + includeAlpha: true, + format: 'png', + name: 'Render_1', + folder: 'C:/Users/Render/Documents' + }); + + const [activeTab, setActiveTab] = useState('Output'); + + if (!isOpen) return null; + + return ( + +

+ + {/* Header */} +

+ Render + +

+ +

+ {/* Sidebar */} +

+ {['Output', 'Options', 'Queue'].map((tab) => ( + + ))} +

+ + {/* Content */} +

+ {/* Mode Tabs */} +

+ {['Still Image', 'Animation', 'VIZ3D XR', 'Configurator', 'CMF'].map((mode) => ( + + ))} +

+ + {/* Name & Resolution */} +

+ Name + setSettings(prev => ({ ...prev, name: e.target.value }))} + className="bg-zinc-950 border border-zinc-800 rounded px-3 py-1.5 text-xs text-zinc-300 focus:outline-none focus:border-blue-500/50" + /> +

+ +

+ Folder +

+ setSettings(prev => ({ ...prev, folder: e.target.value }))} + className="flex-1 bg-zinc-950 border border-zinc-800 rounded px-3 py-1.5 text-xs text-zinc-300 focus:outline-none focus:border-blue-500/50" + /> + +

+ +

+ Format & Quality +

+ Format + +

+ + setSettings(prev => ({ ...prev, includeAlpha: e.target.checked }))} + className="hidden" + /> +

+ {settings.includeAlpha &&

} +

+ Include Alpha (Transparency) + +

+ +

+ Resolution +

+ W: + setSettings(prev => ({ ...prev, width: parseInt(e.target.value) || 0 }))} + className="w-20 bg-zinc-950 border border-zinc-800 rounded px-2 py-1 text-xs text-zinc-300" + /> + px +

+ H: + setSettings(prev => ({ ...prev, height: parseInt(e.target.value) || 0 }))} + className="w-20 bg-zinc-950 border border-zinc-800 rounded px-2 py-1 text-xs text-zinc-300" + /> + px +

+ +

+ + {/* Collapsible Sections */} +

+ Layers and Passes + +

+ Region +

+ +

+ + {/* Footer */} +

+ + +

+ +

+ + ); +}; + +const ChevronDown = ({ size, className }: { size: number, className?: string }) => ( + +); diff --git a/src/components/UVEditor.tsx b/src/components/UVEditor.tsx new file mode 100644 index 0000000..47d1c73 --- /dev/null +++ b/src/components/UVEditor.tsx @@ -0,0 +1,453 @@ +import React, { useState, useRef, useEffect, Suspense, useMemo, useCallback } from 'react'; +import { X, Upload, Trash2, RotateCw, Eye, EyeOff } from 'lucide-react'; +import { Canvas } from '@react-three/fiber'; +import { OrbitControls, Environment } from '@react-three/drei'; +import * as THREE from 'three'; +import { ModelViewer } from './ModelViewer'; + +interface Layer { + id: string; + url: string; + img?: HTMLImageElement; + x: number; y: number; + scaleX: number; scaleY: number; + rotation: number; + cropL: number; cropT: number; cropR: number; cropB: number; + visible: boolean; +} + +type Handle = 'move' | 'rotate' | 'scaleNW' | 'scaleNE' | 'scaleSW' | 'scaleSE' | 'scaleN' | 'scaleS' | 'scaleE' | 'scaleW'; + +interface UVEditorProps { + onClose: () => void; + onSave: (dataUrl: string, mappingType: string, layers: any[], bgColor: string, bgTransparent: boolean) => void; + targetObject?: any; + loadedModel?: THREE.Group | null; + sceneObjects?: any[]; +} + +const CANVAS_SIZE = 1024; + +function deg2rad(d: number) { return d * Math.PI / 180; } + +export function UVEditor({ onClose, onSave, targetObject, loadedModel, sceneObjects }: UVEditorProps) { + const initBg = targetObject?.materialProps?.uvBackground ?? '#1a1a2e'; + const initTrans = targetObject?.materialProps?.uvTransparent ?? false; + + const [layers, setLayers] = useState([]); + const [selectedId, setSelectedId] = useState(null); + const [previewUrl, setPreviewUrl] = useState(null); + const [mappingType, setMappingType] = useState(targetObject?.materialProps?.mappingType || 'uv'); + const [bgColor, setBgColor] = useState(initBg); + const [bgTransparent, setBgTransparent] = useState(initTrans); + + const containerRef = useRef(null); + const fileInputRef = useRef(null); + const dragRef = useRef<{ handle: Handle; startX: number; startY: number; layer: Layer } | null>(null); + + useEffect(() => { + const saved = targetObject?.materialProps?.uvLayers; + if (!saved?.length) return; + let n = 0; + const init: Layer[] = saved.map((l: any) => ({ ...l })); + init.forEach(layer => { + const img = new Image(); + img.onload = () => { layer.img = img; n++; if (n === init.length) setLayers([...init]); }; + img.src = layer.url; + }); + }, []); + + const renderCanvas = useCallback((lrs: Layer[], transparent: boolean, bg: string): string => { + const c = document.createElement('canvas'); + c.width = c.height = CANVAS_SIZE; + const ctx = c.getContext('2d')!; + if (!transparent) { ctx.fillStyle = bg; ctx.fillRect(0, 0, CANVAS_SIZE, CANVAS_SIZE); } + lrs.forEach(layer => { + if (!layer.img || layer.visible === false) return; + const iw = layer.img.width, ih = layer.img.height; + const sx = layer.cropL * iw, sy = layer.cropT * ih; + const sw = (1 - layer.cropL - layer.cropR) * iw; + const sh = (1 - layer.cropT - layer.cropB) * ih; + ctx.save(); + ctx.translate(layer.x, layer.y); + ctx.rotate(deg2rad(layer.rotation)); + ctx.scale(layer.scaleX, layer.scaleY); + ctx.drawImage(layer.img, sx, sy, sw, sh, -sw / 2, -sh / 2, sw, sh); + ctx.restore(); + }); + return c.toDataURL(transparent ? 'image/png' : 'image/jpeg'); + }, []); + + useEffect(() => { + setPreviewUrl(renderCanvas(layers, bgTransparent, bgColor)); + }, [layers, bgTransparent, bgColor]); + + const handleFileUpload = (e: React.ChangeEvent) => { + const file = e.target.files?.[0]; if (!file) return; + const reader = new FileReader(); + reader.onload = ev => { + const url = ev.target?.result as string; + const img = new Image(); + img.onload = () => { + const nl: Layer = { id: `l-${Date.now()}`, url, img, x: CANVAS_SIZE / 2, y: CANVAS_SIZE / 2, scaleX: 1, scaleY: 1, rotation: 0, cropL: 0, cropT: 0, cropR: 0, cropB: 0, visible: true }; + setLayers(p => [...p, nl]); + setSelectedId(nl.id); + }; + img.src = url; + }; + reader.readAsDataURL(file); + e.target.value = ''; + }; + + const updateLayer = (id: string, u: Partial) => setLayers(p => p.map(l => l.id === id ? { ...l, ...u } : l)); + const selectedLayer = layers.find(l => l.id === selectedId) ?? null; + + const getSF = () => { + const r = containerRef.current?.getBoundingClientRect(); + return r ? CANVAS_SIZE / r.width : 1; + }; + + const onHandleDown = (e: React.MouseEvent, handle: Handle, layer: Layer) => { + e.stopPropagation(); + setSelectedId(layer.id); + dragRef.current = { handle, startX: e.clientX, startY: e.clientY, layer: { ...layer } }; + e.preventDefault(); + }; + + // Snap helper: snap value to nearest multiple of snapSize + const snap = (v: number, snapSize: number) => Math.round(v / snapSize) * snapSize; + + const onMouseMove = (e: React.MouseEvent) => { + const d = dragRef.current; + if (!d) return; + const sf = getSF(); + const dx = (e.clientX - d.startX) * sf; + const dy = (e.clientY - d.startY) * sf; + const isShift = e.shiftKey; + const SNAP_PX = 16; // grid snap in canvas units + + if (d.handle === 'move') { + let nx = d.layer.x + dx; + let ny = d.layer.y + dy; + // Clamp to canvas bounds with soft margin + nx = Math.max(0, Math.min(CANVAS_SIZE, nx)); + ny = Math.max(0, Math.min(CANVAS_SIZE, ny)); + // Hold Shift to snap to grid + if (isShift) { nx = snap(nx, SNAP_PX); ny = snap(ny, SNAP_PX); } + // Center snapping: snap near canvas center + if (Math.abs(nx - CANVAS_SIZE / 2) < SNAP_PX) nx = CANVAS_SIZE / 2; + if (Math.abs(ny - CANVAS_SIZE / 2) < SNAP_PX) ny = CANVAS_SIZE / 2; + updateLayer(d.layer.id, { x: nx, y: ny }); + } else if (d.handle === 'rotate') { + let rot = d.layer.rotation + dx / 2; + // Snap rotation to 15° increments when Shift held + if (isShift) rot = snap(rot, 15); + updateLayer(d.layer.id, { rotation: rot }); + } else if (d.handle.startsWith('scale')) { + if (isShift) { + // Shift held: stretch X and Y independently + const sx = Math.max(0.05, d.layer.scaleX + dx / 200); + const sy = Math.max(0.05, d.layer.scaleY + dy / 200); + updateLayer(d.layer.id, { scaleX: sx, scaleY: sy }); + } else { + // No shift: uniform scale driven by the larger axis + const delta = (Math.abs(dx) > Math.abs(dy) ? dx : dy) / 200; + const sx = Math.max(0.05, d.layer.scaleX + delta); + const sy = Math.max(0.05, d.layer.scaleY + delta); + updateLayer(d.layer.id, { scaleX: sx, scaleY: sy }); + } + } + }; + + const onMouseUp = () => { dragRef.current = null; }; + + const handleSave = () => { + if (previewUrl) { + const serialized = layers.map(({ img, ...rest }) => rest); + onSave(previewUrl, mappingType, serialized, bgColor, bgTransparent); + } + onClose(); + }; + + const PreviewModel = () => { + const mockObjs = useMemo(() => { + if (!sceneObjects) return []; + return sceneObjects.map(obj => obj.id === targetObject?.id + ? { ...obj, materialProps: { ...obj.materialProps, map: previewUrl, mappingType } } + : obj + ); + }, [sceneObjects, previewUrl, mappingType]); + const cloned = useMemo(() => loadedModel?.clone() ?? null, [loadedModel]); + if (!targetObject) return ; + if (targetObject.type === 'cube') { + const tex = previewUrl ? (() => { const t = new THREE.TextureLoader().load(previewUrl); t.colorSpace = THREE.SRGBColorSpace; t.flipY = false; return t; })() : null; + return ; + } + return ; + }; + + // Bounding box overlay rendered on canvas div + const BoundingBox = ({ layer }: { layer: Layer }) => { + const iw = (layer.img?.width ?? 200) * (1 - layer.cropL - layer.cropR); + const ih = (layer.img?.height ?? 200) * (1 - layer.cropT - layer.cropB); + const rect = containerRef.current?.getBoundingClientRect(); + if (!rect) return null; + const pct = (v: number) => `${(v / CANVAS_SIZE) * 100}%`; + const w = (iw * layer.scaleX / CANVAS_SIZE) * 100; + const h = (ih * layer.scaleY / CANVAS_SIZE) * 100; + const lx = (layer.x / CANVAS_SIZE) * 100; + const ly = (layer.y / CANVAS_SIZE) * 100; + + const cornerStyle = (cx: string, cy: string, cursor: string): React.CSSProperties => ({ + position: 'absolute', left: cx, top: cy, width: 10, height: 10, + background: '#ffffff', border: '2px solid #3b82f6', borderRadius: 2, + transform: 'translate(-50%,-50%)', cursor, zIndex: 10, touchAction: 'none' + }); + const edgeStyle = (cx: string, cy: string, cursor: string): React.CSSProperties => ({ + position: 'absolute', left: cx, top: cy, width: 8, height: 8, + background: '#3b82f6', borderRadius: '50%', + transform: 'translate(-50%,-50%)', cursor, zIndex: 10 + }); + + return ( +

+ {/* Corners - scale */} + {(['NW','NE','SW','SE'] as const).map(c => ( +

onHandleDown(e, `scale${c}` as Handle, layer)} + /> + ))} + {/* Edge midpoints - scale */} + {[ + { id: 'N', cx: '50%', cy: '0%', cur: 'ns-resize' }, + { id: 'S', cx: '50%', cy: '100%', cur: 'ns-resize' }, + { id: 'E', cx: '100%', cy: '50%', cur: 'ew-resize' }, + { id: 'W', cx: '0%', cy: '50%', cur: 'ew-resize' }, + ].map(({ id, cx, cy, cur }) => ( +

onHandleDown(e, `scale${id}` as Handle, layer)} /> + ))} + {/* Rotate handle - top center above box */} +

onHandleDown(e, 'rotate', layer)} title="Rotate" /> + {/* Line from box to rotate handle */} +

+ ); + }; + + return ( +

+ {/* Top Bar */} +

+ +

+ UV Map +

+ + setBgTransparent(e.target.checked)} className="accent-blue-500 w-3 h-3" /> + Transparent + + {!bgTransparent && ( + +

+ setBgColor(e.target.value)} className="opacity-0 absolute inset-0 w-full h-full cursor-pointer" /> +

+ {bgColor} + + )} + +

+ +

+ {/* Left sidebar */} +

+ + +

Layers

+ {layers.length === 0 && ( +

Upload an image to start

+ )} + {[...layers].reverse().map((layer, i) => ( +

setSelectedId(layer.id)} + className={`flex items-center gap-2 p-2 rounded-lg border cursor-pointer transition-all ${selectedId === layer.id ? 'border-blue-500 bg-blue-500/10' : 'border-zinc-800 hover:border-zinc-600 bg-zinc-800/20'} ${!layer.visible ? 'opacity-40' : ''}`}> +

+ Layer {layers.length - i} + + +

+ ))} + + {/* Layer props */} + {selectedLayer && ( +

Transform

+ {(['x', 'y'] as const).map(ax => ( +

{ax}

+ updateLayer(selectedLayer.id, { [ax]: +e.target.value })} + className="w-full bg-zinc-900 border border-zinc-700 rounded px-2 py-1 text-[11px] text-blue-400 font-mono outline-none focus:border-blue-500" /> +

+ ))} +

+ {(['scaleX', 'scaleY'] as const).map(ax => ( +

{ax === 'scaleX' ? 'Scl X' : 'Scl Y'}

+ updateLayer(selectedLayer.id, { [ax]: Math.max(0.01, +e.target.value) })} + className="w-full bg-zinc-900 border border-zinc-700 rounded px-2 py-1 text-[11px] text-blue-400 font-mono outline-none focus:border-blue-500" /> +

+ ))} +

+ Rotation{Math.round(selectedLayer.rotation)}° +

+ updateLayer(selectedLayer.id, { rotation: +e.target.value })} + className="w-full h-1 bg-zinc-700 rounded appearance-none cursor-pointer accent-blue-500" /> +

+ +

Crop

+ {(['cropL', 'cropT', 'cropR', 'cropB'] as const).map(s => ( +

+ {s.slice(4)} + updateLayer(selectedLayer.id, { [s]: +e.target.value })} + className="flex-1 h-1 bg-zinc-700 rounded appearance-none cursor-pointer accent-orange-500" /> + {Math.round(selectedLayer[s] * 100)}% +

+ ))} +

+ )} +

+ + {/* Canvas area */} +

setSelectedId(null)}> +

+ + {/* Layers */} + {layers.map(layer => { + if (layer.visible === false) return null; + const iw = (layer.img?.width ?? 200) * (1 - layer.cropL - layer.cropR); + const ih = (layer.img?.height ?? 200) * (1 - layer.cropT - layer.cropB); + const isSelected = selectedId === layer.id; + return ( +

{ e.stopPropagation(); onHandleDown(e, 'move', layer); }} + className="absolute cursor-move" + style={{ + left: `${(layer.x / CANVAS_SIZE) * 100}%`, + top: `${(layer.y / CANVAS_SIZE) * 100}%`, + transform: `translate(-50%,-50%) rotate(${layer.rotation}deg) scale(${layer.scaleX},${layer.scaleY})`, + zIndex: isSelected ? 4 : 2, + transition: 'transform 0.04s linear', + }}> + {layer.img && ( +

+ )} +

+ ); + })} + + {/* Bounding box overlays - only for visible selected layer */} + {layers.map(layer => selectedId === layer.id && layer.visible !== false && )} + +

+ {CANVAS_SIZE}×{CANVAS_SIZE} +

+ + {/* Right panel - preview */} +

+ + 3D Preview +

+ + + +

Legend

Drag corner/edge — uniform scale

⇧

Shift + drag — free X/Y stretch

Drag top handle — rotate

Drag layer — move (Shift snaps)

+ ); +} diff --git a/src/components/UnifiedMappingMaterial.tsx b/src/components/UnifiedMappingMaterial.tsx new file mode 100644 index 0000000..a85d2a9 --- /dev/null +++ b/src/components/UnifiedMappingMaterial.tsx @@ -0,0 +1,176 @@ +import React, { useMemo, useRef, useEffect } from 'react'; +import * as THREE from 'three'; +import { useTexture } from '@react-three/drei'; + +// Mapping Types Enum +export const MAPPING_TYPES = { + UV: 0, + PLANAR: 1, + CYLINDER: 2, + SPHERE: 3, + BOX: 4, +}; + +const vertexShader = ` + varying vec2 vUv; + varying vec3 vLocalPos; + varying vec3 vNormal; + varying vec3 vWorldPos; + + void main() { + vUv = uv; + vLocalPos = position; + vNormal = normalize(normal); + vWorldPos = (modelMatrix * vec4(position, 1.0)).xyz; + gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0); + } +`; + +const fragmentShader = ` + uniform sampler2D uTexture; + uniform int uMappingType; + uniform float uScale; + uniform vec2 uTiling; + uniform vec2 uOffset; + uniform float uRotation; + uniform vec3 uBBoxMin; + uniform vec3 uBBoxMax; + + varying vec2 vUv; + varying vec3 vLocalPos; + varying vec3 vNormal; + + #ifndef PI + #define PI 3.14159265359 + #endif + + vec2 rotateUV(vec2 uv, float rotation) { + float mid = 0.5; + float cosAngle = cos(rotation); + float sinAngle = sin(rotation); + float dx = uv.x - mid; + float dy = uv.y - mid; + return vec2( + cosAngle * dx - sinAngle * dy + mid, + sinAngle * dx + cosAngle * dy + mid + ); + } + + void main() { + vec2 finalUv = vec2(0.0); + + // Bounding box calculations for dynamic projections + vec3 boundsSize = uBBoxMax - uBBoxMin; + vec3 boundsPos = (vLocalPos - uBBoxMin) / (boundsSize + 0.00001); + vec3 center = (uBBoxMax + uBBoxMin) * 0.5; + vec3 dir = vLocalPos - center; + vec3 normDir = normalize(dir + 0.00001); + + if (uMappingType == 0) { + // UV: Applies native geometry vUv + finalUv = vUv; + } else if (uMappingType == 1) { + // PLANAR (XZ / Top-Down) + finalUv = boundsPos.xz; + } else if (uMappingType == 2) { + // CYLINDER: u = angle around Y, v = normalized height + vec3 localRel = vLocalPos - center; + float u = (atan(localRel.z, localRel.x) / (2.0 * PI)) + 0.5; + float v = boundsPos.y; + finalUv = vec2(u, v); + } else if (uMappingType == 3) { + // SPHERE + float u = (atan(normDir.z, normDir.x) / (2.0 * PI)) + 0.5; + float v = (asin(clamp(normDir.y, -1.0, 1.0)) / PI) + 0.5; + finalUv = vec2(u, v); + } else if (uMappingType == 4) { + // BOX (Triplanar) + vec3 absNormal = abs(vNormal); + if (absNormal.x > absNormal.y && absNormal.x > absNormal.z) { + finalUv = boundsPos.zy; + } else if (absNormal.y > absNormal.x && absNormal.y > absNormal.z) { + finalUv = boundsPos.xz; + } else { + finalUv = boundsPos.xy; + } + } + + // Apply Tiling, Scale, and Offset + finalUv = finalUv * uTiling * uScale + uOffset; + + // Apply Rotation + if (uRotation != 0.0) { + finalUv = rotateUV(finalUv, uRotation); + } + + vec4 texColor = texture2D(uTexture, finalUv); + gl_FragColor = texColor; + } +`; + +export const UnifiedMappingMaterial = ({ + textureUrl, + mappingType = 'UV', + uvScale = 1.0, + uvTiling = [1, 1], + uvOffset = [0, 0], + uvRotation = 0, + geometry +}) => { + const materialRef = useRef(null); + + // Load texture + const texture = useTexture(textureUrl) as THREE.Texture; + + useEffect(() => { + if (texture) { + texture.wrapS = texture.wrapT = THREE.RepeatWrapping; + texture.needsUpdate = true; + } + }, [texture]); + + // Initialize Uniforms + const uniforms = useMemo(() => ({ + uTexture: { value: texture }, + uMappingType: { value: MAPPING_TYPES[mappingType as keyof typeof MAPPING_TYPES] || 0 }, + uScale: { value: uvScale }, + uTiling: { value: new THREE.Vector2(uvTiling[0], uvTiling[1]) }, + uOffset: { value: new THREE.Vector2(uvOffset[0], uvOffset[1]) }, + uRotation: { value: uvRotation * (Math.PI / 180) }, + uBBoxMin: { value: new THREE.Vector3(-1, -1, -1) }, + uBBoxMax: { value: new THREE.Vector3(1, 1, 1) } + }), [texture]); + + // Real-time Uniform Updates + useEffect(() => { + if (materialRef.current) { + const u = materialRef.current.uniforms; + u.uMappingType.value = MAPPING_TYPES[mappingType as keyof typeof MAPPING_TYPES] || 0; + u.uScale.value = uvScale; + u.uTiling.value.set(uvTiling[0], uvTiling[1]); + u.uOffset.value.set(uvOffset[0], uvOffset[1]); + u.uRotation.value = uvRotation * (Math.PI / 180); + } + }, [mappingType, uvScale, uvTiling, uvOffset, uvRotation]); + + // Bounding Box Update + useEffect(() => { + if (geometry && materialRef.current) { + geometry.computeBoundingBox(); + const box = geometry.boundingBox || new THREE.Box3().setFromObject(new THREE.Mesh(geometry)); + materialRef.current.uniforms.uBBoxMin.value.copy(box.min); + materialRef.current.uniforms.uBBoxMax.value.copy(box.max); + } + }, [geometry]); + + return ( + + ); +}; diff --git a/src/core/uv/boxProjection.ts b/src/core/uv/boxProjection.ts new file mode 100644 index 0000000..3beb704 --- /dev/null +++ b/src/core/uv/boxProjection.ts @@ -0,0 +1,72 @@ +import { UVGenerationContext, computeBoundingBox, normalizeCoordinate } from './uvUtils'; + +export function generateBoxUVs(context: UVGenerationContext): Float32Array { + const { positions, normals } = context; + const numVertices = positions.length / 3; + const uvs = new Float32Array(numVertices * 2); + const bbox = computeBoundingBox(positions); + + if (!normals) { + // Fallback if no normals provided: use position to determine primary axis from center + for (let i = 0; i < numVertices; i++) { + const x = positions[i * 3]; + const y = positions[i * 3 + 1]; + const z = positions[i * 3 + 2]; + + const dx = Math.abs(x - bbox.center[0]); + const dy = Math.abs(y - bbox.center[1]); + const dz = Math.abs(z - bbox.center[2]); + + let u = 0; + let v = 0; + + if (dx >= dy && dx >= dz) { + u = normalizeCoordinate(z, bbox.min[2], bbox.size[2]); + v = normalizeCoordinate(y, bbox.min[1], bbox.size[1]); + } else if (dy >= dx && dy >= dz) { + u = normalizeCoordinate(x, bbox.min[0], bbox.size[0]); + v = normalizeCoordinate(z, bbox.min[2], bbox.size[2]); + } else { + u = normalizeCoordinate(x, bbox.min[0], bbox.size[0]); + v = normalizeCoordinate(y, bbox.min[1], bbox.size[1]); + } + + uvs[i * 2] = u; + uvs[i * 2 + 1] = v; + } + return uvs; + } + + // Use normals to determine mapping face + for (let i = 0; i < numVertices; i++) { + const x = positions[i * 3]; + const y = positions[i * 3 + 1]; + const z = positions[i * 3 + 2]; + + const nx = Math.abs(normals[i * 3]); + const ny = Math.abs(normals[i * 3 + 1]); + const nz = Math.abs(normals[i * 3 + 2]); + + let u = 0; + let v = 0; + + if (nx >= ny && nx >= nz) { + u = normalizeCoordinate(z, bbox.min[2], bbox.size[2]); + v = normalizeCoordinate(y, bbox.min[1], bbox.size[1]); + if (normals[i * 3] < 0) u = 1 - u; // Flip for negative X + } else if (ny >= nx && ny >= nz) { + u = normalizeCoordinate(x, bbox.min[0], bbox.size[0]); + v = normalizeCoordinate(z, bbox.min[2], bbox.size[2]); + if (normals[i * 3 + 1] < 0) u = 1 - u; // Flip for negative Y + } else { + u = normalizeCoordinate(x, bbox.min[0], bbox.size[0]); + v = normalizeCoordinate(y, bbox.min[1], bbox.size[1]); + if (normals[i * 3 + 2] < 0) u = 1 - u; // Flip for negative Z + } + + uvs[i * 2] = u; + uvs[i * 2 + 1] = v; + } + + return uvs; +} diff --git a/src/core/uv/cylindricalProjection.ts b/src/core/uv/cylindricalProjection.ts new file mode 100644 index 0000000..3535495 --- /dev/null +++ b/src/core/uv/cylindricalProjection.ts @@ -0,0 +1,42 @@ +import { UVGenerationContext, computeBoundingBox, normalizeCoordinate } from './uvUtils'; + +export function generateCylindricalUVs(context: UVGenerationContext, axis: 'x' | 'y' | 'z' = 'y'): Float32Array { + const { positions } = context; + const numVertices = positions.length / 3; + const uvs = new Float32Array(numVertices * 2); + const bbox = computeBoundingBox(positions); + + for (let i = 0; i < numVertices; i++) { + const x = positions[i * 3]; + const y = positions[i * 3 + 1]; + const z = positions[i * 3 + 2]; + + const cx = x - bbox.center[0]; + const cy = y - bbox.center[1]; + const cz = z - bbox.center[2]; + + let u = 0; + let v = 0; + + switch (axis) { + case 'x': + u = (Math.atan2(cy, cz) + Math.PI) / (2 * Math.PI); + v = normalizeCoordinate(x, bbox.min[0], bbox.size[0]); + break; + case 'z': + u = (Math.atan2(cy, cx) + Math.PI) / (2 * Math.PI); + v = normalizeCoordinate(z, bbox.min[2], bbox.size[2]); + break; + case 'y': + default: + u = (Math.atan2(cz, cx) + Math.PI) / (2 * Math.PI); + v = normalizeCoordinate(y, bbox.min[1], bbox.size[1]); + break; + } + + uvs[i * 2] = u; + uvs[i * 2 + 1] = v; + } + + return uvs; +} diff --git a/src/core/uv/planarProjection.ts b/src/core/uv/planarProjection.ts new file mode 100644 index 0000000..d7ae240 --- /dev/null +++ b/src/core/uv/planarProjection.ts @@ -0,0 +1,38 @@ +import { UVGenerationContext, computeBoundingBox, normalizeCoordinate } from './uvUtils'; + +export function generatePlanarUVs(context: UVGenerationContext, axis: 'x' | 'y' | 'z' = 'z'): Float32Array { + const { positions } = context; + const numVertices = positions.length / 3; + const uvs = new Float32Array(numVertices * 2); + const bbox = computeBoundingBox(positions); + + for (let i = 0; i < numVertices; i++) { + const x = positions[i * 3]; + const y = positions[i * 3 + 1]; + const z = positions[i * 3 + 2]; + + let u = 0; + let v = 0; + + switch (axis) { + case 'x': + u = normalizeCoordinate(z, bbox.min[2], bbox.size[2]); + v = normalizeCoordinate(y, bbox.min[1], bbox.size[1]); + break; + case 'y': + u = normalizeCoordinate(x, bbox.min[0], bbox.size[0]); + v = normalizeCoordinate(z, bbox.min[2], bbox.size[2]); + break; + case 'z': + default: + u = normalizeCoordinate(x, bbox.min[0], bbox.size[0]); + v = normalizeCoordinate(y, bbox.min[1], bbox.size[1]); + break; + } + + uvs[i * 2] = u; + uvs[i * 2 + 1] = v; + } + + return uvs; +} diff --git a/src/core/uv/uvUtils.ts b/src/core/uv/uvUtils.ts new file mode 100644 index 0000000..79959fa --- /dev/null +++ b/src/core/uv/uvUtils.ts @@ -0,0 +1,50 @@ +export interface UVGenerationContext { + positions: Float32Array; + normals?: Float32Array; + indices?: Uint32Array | Uint16Array; +} + +export interface BoundingBox { + min: [number, number, number]; + max: [number, number, number]; + size: [number, number, number]; + center: [number, number, number]; +} + +export function computeBoundingBox(positions: Float32Array): BoundingBox { + let minX = Infinity, minY = Infinity, minZ = Infinity; + let maxX = -Infinity, maxY = -Infinity, maxZ = -Infinity; + + for (let i = 0; i < positions.length; i += 3) { + const x = positions[i]; + const y = positions[i + 1]; + const z = positions[i + 2]; + + if (x < minX) minX = x; + if (y < minY) minY = y; + if (z < minZ) minZ = z; + + if (x > maxX) maxX = x; + if (y > maxY) maxY = y; + if (z > maxZ) maxZ = z; + } + + const size: [number, number, number] = [maxX - minX, maxY - minY, maxZ - minZ]; + const center: [number, number, number] = [ + minX + size[0] / 2, + minY + size[1] / 2, + minZ + size[2] / 2, + ]; + + return { + min: [minX, minY, minZ], + max: [maxX, maxY, maxZ], + size, + center, + }; +} + +export function normalizeCoordinate(value: number, min: number, size: number): number { + if (size === 0) return 0; + return (value - min) / size; +} diff --git a/src/hooks/useTexturePipeline.ts b/src/hooks/useTexturePipeline.ts new file mode 100644 index 0000000..52f7ad5 --- /dev/null +++ b/src/hooks/useTexturePipeline.ts @@ -0,0 +1,94 @@ +import { useEffect, useRef, useState } from 'react'; +import * as THREE from 'three'; +import { ProjectionType, UVWorkerMessage, UVWorkerResponse } from '../workers/uvWorker'; + +export function useTexturePipeline(scene: THREE.Object3D | null) { + const [isProcessing, setIsProcessing] = useState(false); + const workerRef = useRef(null); + + useEffect(() => { + workerRef.current = new Worker(new URL('../workers/uvWorker.ts', import.meta.url), { + type: 'module', + }); + return () => { + workerRef.current?.terminate(); + }; + }, []); + + useEffect(() => { + if (!scene || !workerRef.current) return; + + const processMesh = async (mesh: THREE.Mesh) => { + const geometry = mesh.geometry; + if (!geometry.attributes.position) return; + + const positions = geometry.attributes.position.array as Float32Array; + const normals = geometry.attributes.normal?.array as Float32Array | undefined; + + const generateUVs = (projection: ProjectionType, axis?: 'x'|'y'|'z'): Promise => { + return new Promise((resolve, reject) => { + if (!workerRef.current) return reject('No worker'); + const id = Math.random().toString(36).substring(7); + + const handleMessage = (e: MessageEvent) => { + if (e.data.id === id) { + workerRef.current?.removeEventListener('message', handleMessage); + if (e.data.error) reject(new Error(e.data.error)); + else resolve(e.data.uvs); + } + }; + + workerRef.current.addEventListener('message', handleMessage); + + workerRef.current.postMessage({ + id, + positions, + normals, + projection, + axis + } as UVWorkerMessage); + }); + }; + + try { + const numVertices = positions.length / 3; + // Add dummy attributes synchronously to prevent shader compile errors + if (!geometry.attributes.uvPlanar) geometry.setAttribute('uvPlanar', new THREE.BufferAttribute(new Float32Array(numVertices * 2), 2)); + if (!geometry.attributes.uvBox) geometry.setAttribute('uvBox', new THREE.BufferAttribute(new Float32Array(numVertices * 2), 2)); + if (!geometry.attributes.uvCylinder) geometry.setAttribute('uvCylinder', new THREE.BufferAttribute(new Float32Array(numVertices * 2), 2)); + + const uvPlanar = await generateUVs('planar', 'z'); + (geometry.attributes.uvPlanar as THREE.BufferAttribute).array.set(uvPlanar); + geometry.attributes.uvPlanar.needsUpdate = true; + + const uvBox = await generateUVs('box'); + (geometry.attributes.uvBox as THREE.BufferAttribute).array.set(uvBox); + geometry.attributes.uvBox.needsUpdate = true; + + const uvCylinder = await generateUVs('cylindrical', 'y'); + (geometry.attributes.uvCylinder as THREE.BufferAttribute).array.set(uvCylinder); + geometry.attributes.uvCylinder.needsUpdate = true; + } catch (err) { + console.error("UV Generation error", err); + } + }; + + const processAllMeshes = async () => { + setIsProcessing(true); + const meshes: THREE.Mesh[] = []; + scene.traverse((child) => { + if ((child as THREE.Mesh).isMesh) { + meshes.push(child as THREE.Mesh); + } + }); + + // Process in parallel + await Promise.all(meshes.map(processMesh)); + setIsProcessing(false); + }; + + processAllMeshes(); + }, [scene]); + + return { isProcessing }; +} diff --git a/src/index.css b/src/index.css new file mode 100644 index 0000000..3550ba5 --- /dev/null +++ b/src/index.css @@ -0,0 +1,113 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Outfit:wght@400;500;600;700&display=swap'); +@import "tailwindcss"; + +@theme { + --font-sans: "Outfit", "Inter", ui-sans-serif, system-ui, sans-serif; + --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; + + /* Theme Colors */ + --color-primary: #4DA3FF; + --color-accent: #FF2E88; + --color-glass-bg: rgba(246, 249, 255, 0.8); + --color-glass-card: rgba(255, 255, 255, 0.7); + + /* Shadows */ + --shadow-glass: 0 8px 32px 0 rgba(31, 38, 135, 0.15); + --shadow-emboss: inset 2px 2px 4px #dbe6ff, inset -2px -2px 4px #ffffff; +} + +@layer base { + body { + @apply bg-[#F6F9FF] text-gray-900 antialiased overflow-hidden transition-colors duration-500; + font-feature-settings: "ss01", "ss02", "cv01", "cv11"; + } + + body.dark { + @apply bg-[#0a0a0a] text-gray-100; + } +} + +@layer components { + .glass-panel { + @apply bg-white/70 backdrop-blur-xl border border-white/40 shadow-glass transition-all duration-300; + } + + .dark .glass-panel { + @apply bg-white/5 border-white/10 shadow-2xl; + } + + .glass-card { + @apply bg-white/50 backdrop-blur-md border border-white/40 hover:bg-white/80 transition-all duration-300 shadow-sm; + } + + .dark .glass-card { + @apply bg-white/5 border-white/10 hover:bg-white/10; + } + + .emboss-btn { + @apply shadow-glass border border-white/40 transition-all duration-200 active:shadow-emboss; + box-shadow: 4px 4px 8px rgba(0,0,0,0.05), -4px -4px 8px rgba(255,255,255,0.8); + } + + .dark .emboss-btn { + @apply border-white/10 shadow-none active:bg-white/10; + box-shadow: none; + } + + .sidebar-item { + @apply flex items-center gap-3 px-4 py-3 rounded-xl transition-all duration-200 cursor-pointer; + } + + .sidebar-item-active { + @apply bg-primary/20 text-primary border border-primary/30; + } + + .sidebar-item:hover:not(.sidebar-item-active) { + @apply bg-white/20; + } + + .dark .sidebar-item:hover:not(.sidebar-item-active) { + @apply bg-white/5; + } + + .neon-glow:hover { + box-shadow: 0 0 15px rgba(255, 46, 136, 0.4); + } + + .custom-scrollbar::-webkit-scrollbar { + width: 4px; + } + + .custom-scrollbar::-webkit-scrollbar-track { + @apply bg-transparent; + } + + .custom-scrollbar::-webkit-scrollbar-thumb { + @apply bg-black/10 rounded-full hover:bg-black/20; + } + + .dark .custom-scrollbar::-webkit-scrollbar-thumb { + @apply bg-white/10 hover:bg-white/20; + } +} + +/* Animation for the background glow */ +@keyframes float { + 0% { transform: translate(0, 0) scale(1); } + 33% { transform: translate(2%, 2%) scale(1.1); } + 66% { transform: translate(-1%, 3%) scale(0.9); } + 100% { transform: translate(0, 0) scale(1); } +} + +.animate-float { + animation: float 20s ease-in-out infinite; +} + +.animate-float-delayed { + animation: float 25s ease-in-out infinite reverse; +} + +/* Hide TransformControls UI when rendering */ +.rendering-hide { + display: none !important; +} diff --git a/src/lib/utils.ts b/src/lib/utils.ts new file mode 100644 index 0000000..a5ef193 --- /dev/null +++ b/src/lib/utils.ts @@ -0,0 +1,6 @@ +import { clsx, type ClassValue } from "clsx"; +import { twMerge } from "tailwind-merge"; + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)); +} diff --git a/src/main.tsx b/src/main.tsx new file mode 100644 index 0000000..080dac3 --- /dev/null +++ b/src/main.tsx @@ -0,0 +1,10 @@ +import {StrictMode} from 'react'; +import {createRoot} from 'react-dom/client'; +import App from './App.tsx'; +import './index.css'; + +createRoot(document.getElementById('root')!).render( + + + , +); diff --git a/src/materials/MaterialFactory.ts b/src/materials/MaterialFactory.ts new file mode 100644 index 0000000..685d218 --- /dev/null +++ b/src/materials/MaterialFactory.ts @@ -0,0 +1,52 @@ +import * as THREE from 'three'; +import { StandardUVMaterial } from './StandardUVMaterial'; +import { TriplanarMaterial } from './TriplanarMaterial'; + +type MaterialCacheKey = string; + +export class MaterialFactory { + private static instance: MaterialFactory; + private cache: Map = new Map(); + + private constructor() {} + + public static getInstance(): MaterialFactory { + if (!MaterialFactory.instance) { + MaterialFactory.instance = new MaterialFactory(); + } + return MaterialFactory.instance; + } + + public getStandardUVMaterial( + parameters: THREE.MeshPhysicalMaterialParameters, + key: string + ): StandardUVMaterial { + const cacheKey = `standard_uv_${key}`; + if (this.cache.has(cacheKey)) { + return this.cache.get(cacheKey) as StandardUVMaterial; + } + + const material = new StandardUVMaterial(parameters); + this.cache.set(cacheKey, material); + return material; + } + + public getTriplanarMaterial( + parameters: THREE.MeshPhysicalMaterialParameters, + key: string + ): TriplanarMaterial { + const cacheKey = `triplanar_${key}`; + if (this.cache.has(cacheKey)) { + return this.cache.get(cacheKey) as TriplanarMaterial; + } + + const material = new TriplanarMaterial(parameters); + this.cache.set(cacheKey, material); + return material; + } + + public clearCache() { + this.cache.forEach((material) => material.dispose()); + this.cache.clear(); + } +} diff --git a/src/materials/StandardUVMaterial.ts b/src/materials/StandardUVMaterial.ts new file mode 100644 index 0000000..81ccd98 --- /dev/null +++ b/src/materials/StandardUVMaterial.ts @@ -0,0 +1,95 @@ +import * as THREE from 'three'; + +export class StandardUVMaterial extends THREE.MeshPhysicalMaterial { + public uvUniforms: { + uMappingMode: { value: number }; // 0: imported, 1: planar, 2: box, 3: cylindrical + uUVTransform: { value: THREE.Matrix3 }; + }; + + constructor(parameters?: THREE.MeshPhysicalMaterialParameters) { + super(parameters); + + this.uvUniforms = { + uMappingMode: { value: 0 }, + uUVTransform: { value: new THREE.Matrix3() }, + }; + + this.customProgramCacheKey = () => `standard_uv_v2`; + + this.onBeforeCompile = (shader) => { + shader.uniforms.uMappingMode = this.uvUniforms.uMappingMode; + shader.uniforms.uUVTransform = this.uvUniforms.uUVTransform; + + shader.vertexShader = ` + attribute vec2 uvPlanar; + attribute vec2 uvBox; + attribute vec2 uvCylinder; + + uniform int uMappingMode; + uniform mat3 uUVTransform; + + varying vec2 vCustomUV; + ` + shader.vertexShader; + + shader.vertexShader = shader.vertexShader.replace( + `#include `, + ` + #include + + vec2 selectedUV = vec2(0.0); + #ifdef USE_UV + selectedUV = uv; + #endif + + if (uMappingMode == 1) { + selectedUV = uvPlanar; + } else if (uMappingMode == 2) { + selectedUV = uvBox; + } else if (uMappingMode == 3) { + selectedUV = uvCylinder; + } + + vCustomUV = (uUVTransform * vec3(selectedUV, 1.0)).xy; + ` + ); + + shader.fragmentShader = ` + varying vec2 vCustomUV; + ` + shader.fragmentShader; + + const mainStartIndex = shader.fragmentShader.indexOf('void main() {'); + if (mainStartIndex !== -1) { + const prefix = shader.fragmentShader.substring(0, mainStartIndex); + let mainBody = shader.fragmentShader.substring(mainStartIndex); + + mainBody = mainBody.replace(/\bvUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvNormalMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvRoughnessMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvMetalnessMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvAlphaMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvEmissiveMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvAoMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvClearcoatMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvClearcoatNormalMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvClearcoatRoughnessMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvTransmissionMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvThicknessMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvSpecularMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvSpecularIntensityMapUv\b/g, 'vCustomUV'); + mainBody = mainBody.replace(/\bvSpecularColorMapUv\b/g, 'vCustomUV'); + + shader.fragmentShader = prefix + mainBody; + } + }; + } + + public updateUVTransform(offset: [number, number], repeat: [number, number], rotation: number) { + this.uvUniforms.uUVTransform.value.setUvTransform( + offset[0], offset[1], + repeat[0], repeat[1], + rotation, + 0.5, 0.5 + ); + } +} diff --git a/src/materials/TriplanarMaterial.ts b/src/materials/TriplanarMaterial.ts new file mode 100644 index 0000000..bac87dc --- /dev/null +++ b/src/materials/TriplanarMaterial.ts @@ -0,0 +1,134 @@ +import * as THREE from 'three'; + +export class TriplanarMaterial extends THREE.MeshPhysicalMaterial { + public triplanarUniforms: { + tAlbedo: { value: THREE.Texture | null }; + tNormal: { value: THREE.Texture | null }; + tRoughness: { value: THREE.Texture | null }; + tAo: { value: THREE.Texture | null }; + uTriplanarScale: { value: number }; + uBlendSharpness: { value: number }; + }; + + constructor(parameters?: THREE.MeshPhysicalMaterialParameters) { + super(parameters); + + this.triplanarUniforms = { + tAlbedo: { value: null }, + tNormal: { value: null }, + tRoughness: { value: null }, + tAo: { value: null }, + uTriplanarScale: { value: 1.0 }, + uBlendSharpness: { value: 5.0 }, + }; + + this.customProgramCacheKey = () => `triplanar_mat_v1`; + + this.onBeforeCompile = (shader) => { + // Inject Uniforms + shader.uniforms.tAlbedo = this.triplanarUniforms.tAlbedo; + shader.uniforms.tNormal = this.triplanarUniforms.tNormal; + shader.uniforms.tRoughness = this.triplanarUniforms.tRoughness; + shader.uniforms.tAo = this.triplanarUniforms.tAo; + shader.uniforms.uTriplanarScale = this.triplanarUniforms.uTriplanarScale; + shader.uniforms.uBlendSharpness = this.triplanarUniforms.uBlendSharpness; + + // Vertex Shader Injections + shader.vertexShader = ` + varying vec3 vTriplanarPosition; + varying vec3 vTriplanarNormal; + ` + shader.vertexShader; + + shader.vertexShader = shader.vertexShader.replace( + `#include `, + ` + #include + vTriplanarPosition = position; // Object space + vTriplanarNormal = normal; // Object space normal + ` + ); + + // Fragment Shader Injections + shader.fragmentShader = ` + uniform sampler2D tAlbedo; + uniform sampler2D tNormal; + uniform sampler2D tRoughness; + uniform sampler2D tAo; + uniform float uTriplanarScale; + uniform float uBlendSharpness; + + varying vec3 vTriplanarPosition; + varying vec3 vTriplanarNormal; + + // Triplanar blending logic + vec4 getTriplanarBlend(sampler2D tex, vec3 pos, vec3 norm) { + vec3 blendWeights = abs(norm); + blendWeights = pow(blendWeights, vec3(uBlendSharpness)); + blendWeights /= dot(blendWeights, vec3(1.0)); // Normalize + + vec2 uvX = pos.yz * uTriplanarScale; + vec2 uvY = pos.zx * uTriplanarScale; + vec2 uvZ = pos.xy * uTriplanarScale; + + vec4 colX = texture2D(tex, uvX); + vec4 colY = texture2D(tex, uvY); + vec4 colZ = texture2D(tex, uvZ); + + return colX * blendWeights.x + colY * blendWeights.y + colZ * blendWeights.z; + } + ` + shader.fragmentShader; + + // Replace map chunks + shader.fragmentShader = shader.fragmentShader.replace( + `#include `, + ` + #ifdef USE_MAP + vec4 texelColor = getTriplanarBlend(tAlbedo, vTriplanarPosition, vTriplanarNormal); + texelColor = mapTexelToLinear(texelColor); + diffuseColor *= texelColor; + #endif + ` + ); + + shader.fragmentShader = shader.fragmentShader.replace( + `#include `, + ` + float roughnessFactor = roughness; + #ifdef USE_ROUGHNESSMAP + vec4 texelRoughness = getTriplanarBlend(tRoughness, vTriplanarPosition, vTriplanarNormal); + roughnessFactor *= texelRoughness.g; + #endif + ` + ); + + shader.fragmentShader = shader.fragmentShader.replace( + `#include `, + ` + #ifdef USE_NORMALMAP + vec4 texelNormal = getTriplanarBlend(tNormal, vTriplanarPosition, vTriplanarNormal); + // Simplified triplanar normal calculation + vec3 n = texelNormal.rgb * 2.0 - 1.0; + normal = normalize(normalMatrix * n); + #elif defined( USE_BUMPMAP ) + // Bump map omitted for brevity + #endif + ` + ); + + shader.fragmentShader = shader.fragmentShader.replace( + `#include `, + ` + #ifdef USE_AOMAP + vec4 texelAo = getTriplanarBlend(tAo, vTriplanarPosition, vTriplanarNormal); + float ambientOcclusion = ( texelAo.r - 1.0 ) * aoMapIntensity + 1.0; + reflectedLight.indirectDiffuse *= ambientOcclusion; + #if defined( USE_ENVMAP ) && defined( STANDARD ) + float dotNV = saturate( dot( geometry.normal, geometry.viewDir ) ); + reflectedLight.indirectSpecular *= computeSpecularOcclusion( dotNV, ambientOcclusion, material.roughness ); + #endif + #endif + ` + ); + }; + } +} diff --git a/src/store/configuratorStore.ts b/src/store/configuratorStore.ts new file mode 100644 index 0000000..5d28fca --- /dev/null +++ b/src/store/configuratorStore.ts @@ -0,0 +1,54 @@ +import { create } from 'zustand'; + +export type MappingMode = 'imported' | 'planar' | 'box' | 'cylindrical' | 'triplanar'; + +export interface UVTransforms { + scale: [number, number]; + repeat: [number, number]; + offset: [number, number]; + rotation: number; +} + +export interface TriplanarTransforms { + scale: number; + blendSharpness: number; + rotation: [number, number, number]; + worldSpace: boolean; +} + +interface ConfiguratorState { + mappingMode: MappingMode; + uvTransforms: UVTransforms; + triplanarTransforms: TriplanarTransforms; + projectionAxis: 'x' | 'y' | 'z'; + + // Actions + setMappingMode: (mode: MappingMode) => void; + setUVTransforms: (transforms: Partial) => void; + setTriplanarTransforms: (transforms: Partial) => void; + setProjectionAxis: (axis: 'x' | 'y' | 'z') => void; +} + +export const useConfiguratorStore = create((set) => ({ + mappingMode: 'imported', + projectionAxis: 'z', + uvTransforms: { + scale: [1, 1], + repeat: [1, 1], + offset: [0, 0], + rotation: 0, + }, + triplanarTransforms: { + scale: 1, + blendSharpness: 5.0, + rotation: [0, 0, 0], + worldSpace: false, + }, + + setMappingMode: (mode) => set({ mappingMode: mode }), + setUVTransforms: (transforms) => + set((state) => ({ uvTransforms: { ...state.uvTransforms, ...transforms } })), + setTriplanarTransforms: (transforms) => + set((state) => ({ triplanarTransforms: { ...state.triplanarTransforms, ...transforms } })), + setProjectionAxis: (axis) => set({ projectionAxis: axis }), +})); diff --git a/src/utils/uvQuality.ts b/src/utils/uvQuality.ts new file mode 100644 index 0000000..696dabe --- /dev/null +++ b/src/utils/uvQuality.ts @@ -0,0 +1,71 @@ +export interface UVQualityReport { + missingUVs: boolean; + extremeStretching: boolean; + overlappingUVs: boolean; + highComplexity: boolean; + recommendTriplanar: boolean; + details: { + vertexCount: number; + uvRange: [number, number]; + }; +} + +export function analyzeUVQuality( + positions: Float32Array, + uvs?: Float32Array, + indices?: Uint32Array | Uint16Array +): UVQualityReport { + const vertexCount = positions.length / 3; + const highComplexity = vertexCount > 50000; // Arbitrary threshold for complex geometry + + if (!uvs || uvs.length === 0) { + return { + missingUVs: true, + extremeStretching: false, + overlappingUVs: false, + highComplexity, + recommendTriplanar: true, + details: { + vertexCount, + uvRange: [0, 0] + } + }; + } + + let minU = Infinity, maxU = -Infinity; + let minV = Infinity, maxV = -Infinity; + + for (let i = 0; i < uvs.length; i += 2) { + const u = uvs[i]; + const v = uvs[i + 1]; + + if (u < minU) minU = u; + if (u > maxU) maxU = u; + if (v < minV) minV = v; + if (v > maxV) maxV = v; + } + + const uRange = maxU - minU; + const vRange = maxV - minV; + + // Basic heuristic: if UVs are heavily clamped or barely cover any area + const extremeStretching = (uRange < 0.01 && uRange > 0) || (vRange < 0.01 && vRange > 0); + + // Overlapping detection is computationally expensive, skipping deep check for now + // A robust check would require comparing triangle areas in UV space vs World space + const overlappingUVs = false; + + const recommendTriplanar = extremeStretching || highComplexity; + + return { + missingUVs: false, + extremeStretching, + overlappingUVs, + highComplexity, + recommendTriplanar, + details: { + vertexCount, + uvRange: [uRange, vRange] + } + }; +} diff --git a/src/workers/uvWorker.ts b/src/workers/uvWorker.ts new file mode 100644 index 0000000..6dfaff2 --- /dev/null +++ b/src/workers/uvWorker.ts @@ -0,0 +1,49 @@ +import { generatePlanarUVs } from '../core/uv/planarProjection'; +import { generateBoxUVs } from '../core/uv/boxProjection'; +import { generateCylindricalUVs } from '../core/uv/cylindricalProjection'; + +export type ProjectionType = 'planar' | 'box' | 'cylindrical'; + +export interface UVWorkerMessage { + id: string; + positions: Float32Array; + normals?: Float32Array; + projection: ProjectionType; + axis?: 'x' | 'y' | 'z'; +} + +export interface UVWorkerResponse { + id: string; + uvs: Float32Array; + error?: string; +} + +self.onmessage = (event: MessageEvent) => { + const { id, positions, normals, projection, axis } = event.data; + + try { + const context = { positions, normals }; + let uvs: Float32Array; + + switch (projection) { + case 'planar': + uvs = generatePlanarUVs(context, axis || 'z'); + break; + case 'box': + uvs = generateBoxUVs(context); + break; + case 'cylindrical': + uvs = generateCylindricalUVs(context, axis || 'y'); + break; + default: + throw new Error(`Unsupported projection: ${projection}`); + } + + // Transfer the ArrayBuffer back to main thread for performance + self.postMessage({ id, uvs } as UVWorkerResponse, { + transfer: [uvs.buffer], + }); + } catch (error) { + self.postMessage({ id, error: String(error) } as UVWorkerResponse); + } +}; diff --git a/test.cjs b/test.cjs new file mode 100644 index 0000000..e11d129 --- /dev/null +++ b/test.cjs @@ -0,0 +1,34 @@ +const puppeteer = require('puppeteer'); +const path = require('path'); + +(async () => { + const browser = await puppeteer.launch(); + const page = await browser.newPage(); + + page.on('console', msg => { + if (msg.type() === 'error') { + console.log('PAGE ERROR:', msg.text()); + } else { + console.log('PAGE LOG:', msg.text()); + } + }); + + page.on('pageerror', error => { + console.log('PAGE EXCEPTION:', error.message); + console.log('STACK:', error.stack); + }); + + await page.goto('http://localhost:3000', { waitUntil: 'networkidle2' }); + + // Find the file input for import (usually has an accept=".glb,.gltf...") + const fileInput = await page.$('input[type="file"]'); + if (fileInput) { + console.log('Found file input, uploading...'); + await fileInput.uploadFile(path.resolve('C:/Users/900250.HCUDT299/Downloads/0.glb')); + await new Promise(r => setTimeout(r, 5000)); + } else { + console.log('File input not found'); + } + + await browser.close(); +})(); diff --git a/tsconfig.json b/tsconfig.json new file mode 100644 index 0000000..d88f175 --- /dev/null +++ b/tsconfig.json @@ -0,0 +1,26 @@ +{ + "compilerOptions": { + "target": "ES2022", + "experimentalDecorators": true, + "useDefineForClassFields": false, + "module": "ESNext", + "lib": [ + "ES2022", + "DOM", + "DOM.Iterable" + ], + "skipLibCheck": true, + "moduleResolution": "bundler", + "isolatedModules": true, + "moduleDetection": "force", + "allowJs": true, + "jsx": "react-jsx", + "paths": { + "@/*": [ + "./*" + ] + }, + "allowImportingTsExtensions": true, + "noEmit": true + } +} diff --git a/vite.config.ts b/vite.config.ts new file mode 100644 index 0000000..f5293da --- /dev/null +++ b/vite.config.ts @@ -0,0 +1,30 @@ +import tailwindcss from '@tailwindcss/vite'; +import react from '@vitejs/plugin-react'; +import path from 'path'; +import {defineConfig, loadEnv} from 'vite'; + +export default defineConfig(({mode}) => { + const env = loadEnv(mode, '.', ''); + return { + plugins: [react(), tailwindcss()], + define: { + 'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY), + }, + resolve: { + alias: { + '@': path.resolve(__dirname, '.'), + 'react': path.resolve(__dirname, 'node_modules/react'), + 'react-dom': path.resolve(__dirname, 'node_modules/react-dom'), + }, + dedupe: ['react', 'react-dom'], + }, + optimizeDeps: { + include: ['react', 'react-dom', 'three', '@react-three/fiber', '@react-three/drei'], + }, + server: { + // HMR is disabled in AI Studio via DISABLE_HMR env var. + // Do not modifyâfile watching is disabled to prevent flickering during agent edits. + hmr: process.env.DISABLE_HMR !== 'true', + }, + }; +});