;\n});\n\n\ninterface OutlinerNodeProps {\n node: SceneNode;\n selectedObjectId: string | null;\n onObjectSelect: (id: string | null) => void;\n level: number;\n}\n\nconst OutlinerNode: React.FC = ({ node, selectedObjectId, onObjectSelect, level }) => (\n <>\n onObjectSelect(node.id)}\n style={{ paddingLeft: `${8 + level * 16}px` }}\n data-object-type={node.type}\n >\n 0 ? 'visible' : ''}`}>▼\n {node.name}\n \n {node.children.length > 0 && (\n

\n ))}\n

\n )}\n \n);\n\nconst OutlinerPanel = ({ objects, selectedObjectId, onObjectSelect }: { objects: SceneObject[], selectedObjectId: string | null, onObjectSelect: (id: string | null) => void }) => {\n const sceneTree = useMemo(() => {\n const nodes: Record = {};\n objects.forEach(obj => {\n nodes[obj.id] = { ...obj, children: [] };\n });\n\n const tree: SceneNode[] = [];\n objects.forEach(obj => {\n if (obj.parentId && nodes[obj.parentId]) {\n nodes[obj.parentId].children.push(nodes[obj.id]);\n } else {\n tree.push(nodes[obj.id]);\n }\n });\n return tree;\n }, [objects]);\n\n return (\n

Outliner

\n ))}\n

\n );\n};\n\nconst PropInput = ({ label, value, onChange, step = 0.1 }: { label: string, value: number, onChange: (v: number) => void, step?: number }) => (\n <>\n {label}\n onChange(parseFloat(e.target.value))} step={step} />\n \n);\n\nconst PropertiesPanel = ({ selectedObject, onObjectUpdate }: { selectedObject: SceneObject | null, onObjectUpdate: (id: string, updateFn: ObjectUpdateFn) => void }) => {\n if (!selectedObject) {\n return (\n

Properties

No object selected

\n );\n }\n \n const { id, params, type } = selectedObject;\n const isMesh = !['CAMERA', 'LIGHT'].includes(type);\n const rotDeg = params.rotation.map(r => THREE.MathUtils.radToDeg(r));\n\n const handleRotChange = (axis: 'x'|'y'|'z', value: number) => {\n const index = axis === 'x' ? 0 : axis === 'y' ? 1 : 2;\n onObjectUpdate(id, o => {\n const newRotRad = [...o.params.rotation] as [number, number, number];\n newRotRad[index] = THREE.MathUtils.degToRad(value);\n return { params: { rotation: newRotRad } };\n });\n };\n \n const handlePosChange = (axis: 'x'|'y'|'z', value: number) => {\n const index = axis === 'x' ? 0 : axis === 'y' ? 1 : 2;\n onObjectUpdate(id, o => {\n const newPos = [...o.params.position] as [number, number, number];\n newPos[index] = value;\n return { params: { position: newPos } };\n });\n };\n \n const handleScaleChange = (axis: 'x'|'y'|'z', value: number) => {\n const index = axis === 'x' ? 0 : axis === 'y' ? 1 : 2;\n onObjectUpdate(id, o => {\n const newScale = [...o.params.scale] as [number, number, number];\n newScale[index] = value;\n return { params: { scale: newScale } };\n });\n };\n \n const handleFileChange = (e: React.ChangeEvent) => {\n if (e.target.files && e.target.files[0]) {\n const file = e.target.files[0];\n const newUrl = URL.createObjectURL(file);\n if (params.textureMap && params.textureMap.startsWith('blob:')) {\n URL.revokeObjectURL(params.textureMap);\n }\n onObjectUpdate(id, () => ({ params: { textureMap: newUrl } }));\n }\n };\n\n const clearTexture = () => {\n if (params.textureMap && params.textureMap.startsWith('blob:')) {\n URL.revokeObjectURL(params.textureMap);\n }\n onObjectUpdate(id, () => ({ params: { textureMap: null } }));\n };\n\n\n return (\n

{selectedObject.name}

Transform

\n handlePosChange('x', v)} />\n handlePosChange('y', v)} />\n handlePosChange('z', v)} />\n

\n handleRotChange('x', v)} step={1}/>\n handleRotChange('y', v)} step={1}/>\n handleRotChange('z', v)} step={1}/>\n

\n handleScaleChange('x', v)} />\n handleScaleChange('y', v)} />\n handleScaleChange('z', v)} />\n

\n {isMesh && (\n <>\n

Material

\n Shader\n \n

\n Color\n onObjectUpdate(id, () => ({ params: { color: e.target.value } }))} />\n \n {params.shader !== 'toon' && <>\n Rough\n onObjectUpdate(id, () => ({ params: { roughness: parseFloat(e.target.value) } }))} />\n\n Metal\n onObjectUpdate(id, () => ({ params: { metalness: parseFloat(e.target.value) } }))} />\n\n Emissive\n onObjectUpdate(id, () => ({ params: { emissive: e.target.value } }))} />\n }\n\n {params.shader === 'physical' && <>\n Transmission\n onObjectUpdate(id, () => ({ params: { transmission: parseFloat(e.target.value) } }))} />\n \n IOR\n onObjectUpdate(id, () => ({ params: { ior: parseFloat(e.target.value) } }))} />\n\n Thickness\n onObjectUpdate(id, () => ({ params: { thickness: parseFloat(e.target.value) } }))} />\n }\n \n Wireframe\n onObjectUpdate(id, () => ({ params: { wireframe: e.target.checked } }))} />\n

Base Color Texture

\n {params.textureMap && $\"Texture$ }\n

\n \n Load Image\n \n

\n \n )}\n {type === 'LIGHT' && (\n

Light

\n Type\n \n

\n Color\n onObjectUpdate(id, () => ({ params: { color: e.target.value } }))} />\n \n Intensity\n onObjectUpdate(id, () => ({ params: { intensity: parseFloat(e.target.value) } }))} />\n\n {(params.lightType === 'POINT' || params.lightType === 'SPOT') && <>\n Distance\n onObjectUpdate(id, () => ({ params: { distance: parseFloat(e.target.value) } }))} />\n \n Decay\n onObjectUpdate(id, () => ({ params: { decay: parseFloat(e.target.value) } }))} />\n }\n\n {params.lightType === 'SPOT' && <>\n Angle\n onObjectUpdate(id, () => ({ params: { angle: THREE.MathUtils.degToRad(parseFloat(e.target.value)) } }))} />\n \n Penumbra\n onObjectUpdate(id, () => ({ params: { penumbra: parseFloat(e.target.value) } }))} />\n }\n

\n )}\n

\n );\n};\n\ninterface ModifiersPanelProps {\n selectedObject: SceneObject | null;\n onObjectUpdate: (id: string, updateFn: ObjectUpdateFn) => void;\n}\n\nconst ModifiersPanel: React.FC = ({ selectedObject, onObjectUpdate }) => {\n const isMesh = selectedObject && !['CAMERA', 'LIGHT'].includes(selectedObject.type);\n const addModifierRef = useRef(null);\n\n const handleAddModifier = () => {\n if (!isMesh || !addModifierRef.current) return;\n const type = addModifierRef.current.value as ModifierType;\n if (!type) return;\n\n const newModifier: Modifier = {\n id: THREE.MathUtils.generateUUID(),\n type,\n params: {}\n };\n\n switch (type) {\n case 'SUBSURF': newModifier.params.levels = 1; break;\n case 'SOLIDIFY': newModifier.params.thickness = 0.05; break;\n case 'WIREFRAME': newModifier.params.thickness = 1; break;\n }\n\n onObjectUpdate(selectedObject.id, (o) => ({\n modifiers: [...o.modifiers, newModifier]\n }));\n \n addModifierRef.current.value = \"\";\n };\n\n const handleRemoveModifier = (modId: string) => {\n if (!isMesh) return;\n onObjectUpdate(selectedObject.id, (o) => ({\n modifiers: o.modifiers.filter(m => m.id !== modId)\n }));\n };\n \n const handleUpdateModifierParam = (modId: string, param: keyof Modifier['params'], value: number) => {\n if (!isMesh) return;\n onObjectUpdate(selectedObject.id, (o) => ({\n modifiers: o.modifiers.map(m => m.id === modId ? { ...m, params: { ...m.params, [param]: value } } : m)\n }));\n };\n\n return (\n

Modifiers

\n {!isMesh ? (\n

{selectedObject ? 'Modifiers can only be added to mesh objects' : 'No object selected'}

\n ) : (\n <>\n

\n \n \n

\n {selectedObject.modifiers.map(mod => (\n

\n {mod.type.charAt(0) + mod.type.slice(1).toLowerCase().replace('_', ' ')}\n \n

\n {mod.type === 'SUBSURF' && (\n

\n Levels\n handleUpdateModifierParam(mod.id, 'levels', parseInt(e.target.value))} />\n

\n )}\n {mod.type === 'SOLIDIFY' && (\n

\n Thickness\n handleUpdateModifierParam(mod.id, 'thickness', parseFloat(e.target.value))} />\n

\n )}\n {mod.type === 'WIREFRAME' && (\n

\n Thickness\n handleUpdateModifierParam(mod.id, 'thickness', parseFloat(e.target.value))} />\n

\n )}\n

\n ))}\n

\n \n )}\n

\n );\n};\n\n\ninterface ToolsPanelProps {\n selectedObject: SceneObject | null;\n onMirror: (axis: 'x' | 'y' | 'z') => void;\n onApplyTransform: (type: 'scale') => void;\n onSetOrigin: (type: 'geometry') => void;\n onSetShading: (isFlat: boolean) => void;\n onSubdivide: () => void;\n}\n\nconst ToolsPanel: React.FC = ({\n selectedObject,\n onMirror,\n onApplyTransform,\n onSetOrigin,\n onSetShading,\n onSubdivide\n}) => {\n const isMesh = selectedObject && !['CAMERA', 'LIGHT'].includes(selectedObject.type);\n const disabled = !selectedObject;\n const meshDisabled = !isMesh;\n\n return (\n

Tools

Transform

\n Mirror\n

\n \n \n \n

\n Apply\n

\n \n

\n\n

Object

\n Set Origin\n

\n \n

\n Shading\n

\n \n \n

\n\n

Geometry

\n \n

\n );\n};\n\n\nconst TerminalPanel = ({ history, onCommand }: { history: string[], onCommand: (cmd: string) => void }) => {\n const [input, setInput] = useState('');\n const endOfHistoryRef = useRef(null);\n const inputRef = useRef(null);\n\n useEffect(() => {\n endOfHistoryRef.current?.scrollIntoView();\n }, [history]);\n \n const handleKeyDown = (e: React.KeyboardEvent) => {\n if (e.key === 'Enter' && input.trim() !== '') {\n onCommand(input);\n setInput('');\n }\n };\n \n return (\n

inputRef.current?.focus()}>\n

Terminal

\n {history.map((line, i) => (\n

\n ))}\n

\n READY.\n setInput(e.target.value)}\n onKeyDown={handleKeyDown}\n autoFocus\n spellCheck=\"false\"\n autoComplete=\"off\"\n />\n █\n

\n );\n};\n\n\n// --- MAIN APP ---\nconst App = () => {\n const [sceneObjects, setSceneObjects] = useState([]);\n const [selectedObjectId, setSelectedObjectId] = useState(null);\n const objectCounters = useRef>({ CUBE: 0, SPHERE: 0, PLANE: 0, CYLINDER: 0, CONE: 0, TORUS: 0, MONKEY: 0, CAMERA: 0, LIGHT: 0 });\n const [backgroundColor, setBackgroundColor] = useState(C64_COLORS[6]); // Blue\n const [terminalHistory, setTerminalHistory] = useState([\n '**** WEBBLENDER 64 BASIC V1.0 ****',\n '',\n ' 3D SCENE READY. 38911 BLOCKS FREE.',\n '',\n 'READY.',\n ]);\n const [ambientIntensity, setAmbientIntensity] = useState(0.8);\n const [dirIntensity, setDirIntensity] = useState(1.5);\n const [dirColor, setDirColor] = useState('#ffffff');\n const [dirPosition, setDirPosition] = useState<[number, number, number]>([8, 10, 6]);\n const [transformMode, setTransformMode] = useState<'translate' | 'rotate' | 'scale' | 'off'>('translate');\n const viewportRef = useRef(null);\n\n const selectedObject = useMemo(() => sceneObjects.find(o => o.id === selectedObjectId) || null, [sceneObjects, selectedObjectId]);\n\n const handleAddObject = (type: SceneObject['type']): SceneObject => {\n objectCounters.current[type]++;\n const name = `${type.charAt(0).toUpperCase() + type.slice(1).toLowerCase()}.${String(objectCounters.current[type]).padStart(3, '0')}`;\n const isPlanar = type === 'PLANE';\n const isLightOrCam = type === 'LIGHT' || type === 'CAMERA';\n\n const newObject: SceneObject = {\n id: THREE.MathUtils.generateUUID(),\n name: name,\n parentId: null,\n type: type,\n modifiers: [],\n params: {\n position: [0, isPlanar ? 0 : isLightOrCam ? 1 : 0.5, 0],\n rotation: [0, 0, 0],\n scale: [1, 1, 1],\n color: type === 'LIGHT' ? '#ffffff' : `#${new THREE.Color(Math.random() * 0xffffff).getHexString()}`,\n roughness: 0.5,\n metalness: 0.0,\n wireframe: false,\n flatShading: false,\n subdivisions: 0,\n shader: 'standard',\n emissive: '#000000',\n transmission: 0,\n ior: 1.5,\n thickness: 0.1,\n textureMap: null,\n // Light defaults\n lightType: 'POINT',\n intensity: 5,\n distance: 10,\n decay: 2,\n angle: Math.PI / 4,\n penumbra: 0.1,\n }\n };\n setSceneObjects(prev => [...prev, newObject]);\n setSelectedObjectId(newObject.id);\n return newObject;\n };\n\n const handleObjectSelect = useCallback((objectId: string | null) => {\n setSelectedObjectId(objectId);\n if (objectId && transformMode === 'off') {\n setTransformMode('translate');\n }\n }, [transformMode]);\n\n const handleObjectUpdate = useCallback((\n objectId: string,\n updateFn: (current: SceneObject) => Partial | { params: Partial }\n ) => {\n setSceneObjects(prev =>\n prev.map(obj => {\n if (obj.id === objectId) {\n const update = updateFn(obj);\n if ('params' in update) {\n return { ...obj, params: { ...obj.params, ...update.params } };\n }\n return { ...obj, ...update };\n }\n return obj;\n })\n );\n }, []);\n\n const handleObjectDelete = useCallback((objectId: string) => {\n // Also unparent any children of the deleted object\n setSceneObjects(prev => prev\n .filter(obj => obj.id !== objectId)\n .map(obj => obj.parentId === objectId ? {...obj, parentId: null} : obj)\n );\n if (selectedObjectId === objectId) {\n setSelectedObjectId(null);\n }\n }, [selectedObjectId]);\n\n const handleMirror = (axis: 'x' | 'y' | 'z') => {\n if (!selectedObjectId) return;\n handleObjectUpdate(selectedObjectId, (o) => {\n const newScale = [...o.params.scale] as [number, number, number];\n const index = axis === 'x' ? 0 : axis === 'y' ? 1 : 2;\n newScale[index] *= -1;\n return { params: { scale: newScale } };\n });\n };\n\n const handleApplyTransform = (type: 'scale') => {\n if (!selectedObjectId) return;\n viewportRef.current?.applyTransform(selectedObjectId, type);\n };\n\n const handleSetOrigin = (type: 'geometry') => {\n if (!selectedObjectId) return;\n viewportRef.current?.setOrigin(selectedObjectId, type);\n };\n \n const handleSetShading = (isFlat: boolean) => {\n if (!selectedObjectId) return;\n handleObjectUpdate(selectedObjectId, () => ({ params: { flatShading: isFlat } }));\n };\n\n const handleSubdivide = () => {\n if (!selectedObjectId) return;\n handleObjectUpdate(selectedObjectId, (o) => ({ params: { subdivisions: o.params.subdivisions + 1 } }));\n };\n \n const handleTerminalCommand = useCallback((command: string) => {\n let newHistory = [...terminalHistory, `READY.${command.replace(//g, \">\")}`];\n let output: string | null = null;\n\n const peek = (address: number): number => {\n const selectedObj = sceneObjects.find(o => o.id === selectedObjectId) || null;\n if (address >= 1000 && address <= 1032 && !selectedObj) throw new Error(\"NO OBJECT SELECTED\");\n if (address >= 1022 && address <= 1027 && selectedObj?.type !== 'LIGHT') throw new Error(\"NOT A LIGHT OBJECT\");\n\n switch (address) {\n // Selected Object\n case 1000: return Math.round(selectedObj!.params.position[0] * 10);\n case 1001: return Math.round(selectedObj!.params.position[1] * 10);\n case 1002: return Math.round(selectedObj!.params.position[2] * 10);\n case 1003: return Math.round(THREE.MathUtils.radToDeg(selectedObj!.params.rotation[0])) % 360;\n case 1004: return Math.round(THREE.MathUtils.radToDeg(selectedObj!.params.rotation[1])) % 360;\n case 1005: return Math.round(THREE.MathUtils.radToDeg(selectedObj!.params.rotation[2])) % 360;\n case 1006: return Math.round(selectedObj!.params.scale[0] * 100);\n case 1007: return Math.round(selectedObj!.params.scale[1] * 100);\n case 1008: return Math.round(selectedObj!.params.scale[2] * 100);\n case 1009: return Math.round(new THREE.Color(selectedObj!.params.color).r * 255);\n case 1010: return Math.round(new THREE.Color(selectedObj!.params.color).g * 255);\n case 1011: return Math.round(new THREE.Color(selectedObj!.params.color).b * 255);\n case 1012: return Math.round(selectedObj!.params.roughness * 100);\n case 1013: return Math.round(selectedObj!.params.metalness * 100);\n case 1014: return selectedObj!.params.wireframe ? 1 : 0;\n case 1015: return ['standard', 'physical', 'toon'].indexOf(selectedObj!.params.shader);\n case 1016: return Math.round(new THREE.Color(selectedObj!.params.emissive).r * 255);\n case 1017: return Math.round(new THREE.Color(selectedObj!.params.emissive).g * 255);\n case 1018: return Math.round(new THREE.Color(selectedObj!.params.emissive).b * 255);\n case 1019: return Math.round(selectedObj!.params.transmission * 100);\n case 1020: return Math.round(selectedObj!.params.ior * 100);\n case 1021: return Math.round(selectedObj!.params.thickness * 100);\n case 1022: return ['POINT', 'SPOT', 'DIRECTIONAL'].indexOf(selectedObj!.params.lightType);\n case 1023: return Math.round(selectedObj!.params.intensity * 100);\n case 1024: return Math.round(selectedObj!.params.distance * 10);\n case 1025: return Math.round(selectedObj!.params.decay * 100);\n case 1026: return Math.round(THREE.MathUtils.radToDeg(selectedObj!.params.angle));\n case 1027: return Math.round(selectedObj!.params.penumbra * 100);\n // Modifiers\n case 1030: return selectedObj!.modifiers.length;\n case 1031: {\n if (selectedObj!.modifiers.length === 0) return 0; // None\n const type = selectedObj!.modifiers[0].type;\n return ['SUBSURF', 'SOLIDIFY', 'WIREFRAME'].indexOf(type) + 1;\n }\n case 1032: {\n if (selectedObj!.modifiers.length === 0) return 0;\n const mod = selectedObj!.modifiers[0];\n if (mod.type === 'SUBSURF') return mod.params.levels || 0;\n if (mod.type === 'SOLIDIFY') return (mod.params.thickness || 0) * 1000;\n if (mod.type === 'WIREFRAME') return (mod.params.thickness || 0) * 10;\n return 0;\n }\n\n // Scene\n case 2000: return sceneObjects.length;\n case 2001: return selectedObj ? sceneObjects.findIndex(o => o.id === selectedObjectId) + 1 : 0;\n // \"GPU\"\n case 49152: return ['off', 'translate', 'rotate', 'scale'].indexOf(transformMode);\n case 49153: return Math.round(ambientIntensity * 100);\n case 49154: return Math.round(dirIntensity * 100);\n case 49155: return Math.round(new THREE.Color(dirColor).r * 255);\n case 49156: return Math.round(new THREE.Color(dirColor).g * 255);\n case 49157: return Math.round(new THREE.Color(dirColor).b * 255);\n case 49158: return Math.round(dirPosition[0] * 10);\n case 49159: return Math.round(dirPosition[1] * 10);\n case 49160: return Math.round(dirPosition[2] * 10);\n // VIC-II\n case 53281: return C64_COLORS.map(c=>c.toLowerCase()).indexOf(backgroundColor.toLowerCase());\n }\n throw new Error(\"ILLEGAL ADDRESS\");\n };\n\n const poke = (address: number, value: number) => {\n const selectedObj = sceneObjects.find(o => o.id === selectedObjectId) || null;\n if (address >= 1000 && address <= 1032 && !selectedObj) throw new Error(\"NO OBJECT SELECTED\");\n if (address >= 1022 && address <= 1027 && selectedObj?.type !== 'LIGHT') throw new Error(\"NOT A LIGHT OBJECT\");\n \n if (address === 53281) {\n if (value >= 0 && value < 16) setBackgroundColor(C64_COLORS[value]);\n else throw new Error(\"ILLEGAL QUANTITY\");\n return;\n }\n\n if (address >= 1000 && address <= 1032) {\n const { id } = selectedObj!;\n if (address >= 1000 && address <= 1002) {\n handleObjectUpdate(id, o => { const p = [...o.params.position] as [number,number,number]; p[address-1000] = value/10; return {params: {position: p}}});\n } else if (address >= 1003 && address <= 1005) {\n handleObjectUpdate(id, o => { const r = [...o.params.rotation] as [number,number,number]; r[address-1003] = THREE.MathUtils.degToRad(value); return {params: {rotation: r}}});\n } else if (address >= 1006 && address <= 1008) {\n handleObjectUpdate(id, o => { const s = [...o.params.scale] as [number,number,number]; s[address-1006] = Math.max(0.01, value/100); return {params: {scale: s}}});\n } else if (address >= 1009 && address <= 1011) {\n handleObjectUpdate(id, o => {\n const c = new THREE.Color(o.params.color);\n const rgb = [c.r * 255, c.g * 255, c.b * 255];\n rgb[address - 1009] = Math.max(0, Math.min(255, value));\n const hex = new THREE.Color(`rgb(${Math.round(rgb[0])}, ${Math.round(rgb[1])}, ${Math.round(rgb[2])})`).getHexString();\n return { params: { color: `#${hex}`}};\n });\n } else if (address === 1012) {\n handleObjectUpdate(id, () => ({ params: { roughness: Math.max(0, Math.min(1, value / 100)) } }));\n } else if (address === 1013) {\n handleObjectUpdate(id, () => ({ params: { metalness: Math.max(0, Math.min(1, value / 100)) } }));\n } else if (address === 1014) {\n handleObjectUpdate(id, () => ({ params: { wireframe: value !== 0 } }));\n } else if (address === 1015) {\n const shaders = ['standard', 'physical', 'toon'];\n if (value >= 0 && value < shaders.length) handleObjectUpdate(id, () => ({ params: { shader: shaders[value] as any } }));\n else throw new Error(\"ILLEGAL QUANTITY\");\n } else if (address >= 1016 && address <= 1018) {\n handleObjectUpdate(id, o => {\n const c = new THREE.Color(o.params.emissive);\n const rgb = [c.r * 255, c.g * 255, c.b * 255];\n rgb[address-1016] = Math.max(0, Math.min(255, value));\n const hex = new THREE.Color(`rgb(${Math.round(rgb[0])}, ${Math.round(rgb[1])}, ${Math.round(rgb[2])})`).getHexString();\n return { params: { emissive: `#${hex}`}};\n });\n } else if (address === 1019) {\n handleObjectUpdate(id, () => ({ params: { transmission: Math.max(0, Math.min(1, value / 100)) } }));\n } else if (address === 1020) {\n handleObjectUpdate(id, () => ({ params: { ior: Math.max(1, Math.min(2.33, value / 100)) } }));\n } else if (address === 1021) {\n handleObjectUpdate(id, () => ({ params: { thickness: Math.max(0, value / 100) } }));\n } else if (address === 1022) {\n const types = ['POINT', 'SPOT', 'DIRECTIONAL'];\n if (value >= 0 && value < types.length) handleObjectUpdate(id, () => ({ params: { lightType: types[value] as any } }));\n else throw new Error(\"ILLEGAL QUANTITY\");\n } else if (address === 1023) {\n handleObjectUpdate(id, () => ({ params: { intensity: Math.max(0, value / 100) } }));\n } else if (address === 1024) {\n handleObjectUpdate(id, () => ({ params: { distance: Math.max(0, value / 10) } }));\n } else if (address === 1025) {\n handleObjectUpdate(id, () => ({ params: { decay: Math.max(0, value / 100) } }));\n } else if (address === 1026) {\n handleObjectUpdate(id, () => ({ params: { angle: THREE.MathUtils.degToRad(Math.max(0, Math.min(90, value))) } }));\n } else if (address === 1027) {\n handleObjectUpdate(id, () => ({ params: { penumbra: Math.max(0, Math.min(1, value / 100)) } }));\n } else if (address >= 1030 && address <= 1032) {\n if (address === 1030) throw new Error(\"READ ONLY ADDRESS\");\n handleObjectUpdate(id, o => {\n if (o.modifiers.length === 0) return o;\n const newMods = [...o.modifiers];\n const mod = {...newMods[0]};\n \n if (address === 1031) {\n const types: ModifierType[] = ['SUBSURF', 'SOLIDIFY', 'WIREFRAME'];\n if (value > 0 && value <= types.length) mod.type = types[value-1]; else throw new Error(\"ILLEGAL QUANTITY\");\n }\n if (address === 1032) {\n if (mod.type === 'SUBSURF') mod.params.levels = Math.max(0, Math.min(5, value));\n if (mod.type === 'SOLIDIFY') mod.params.thickness = Math.max(0, value / 1000);\n if (mod.type === 'WIREFRAME') mod.params.thickness = Math.max(0.1, value / 10);\n }\n newMods[0] = mod;\n return { modifiers: newMods };\n });\n }\n return;\n }\n\n if (address >= 49152 && address <= 49160) {\n switch (address) {\n case 49152:\n const modes = ['off', 'translate', 'rotate', 'scale'];\n if (value >= 0 && value < modes.length) setTransformMode(modes[value] as any);\n else throw new Error(\"ILLEGAL QUANTITY\");\n break;\n case 49153: setAmbientIntensity(Math.max(0, value) / 100); break;\n case 49154: setDirIntensity(Math.max(0, value) / 100); break;\n case 49155: case 49156: case 49157: {\n const color = new THREE.Color(dirColor);\n const rgb = [color.r * 255, color.g * 255, color.b * 255];\n rgb[address - 49155] = Math.max(0, Math.min(255, value));\n const newColorHex = new THREE.Color(`rgb(${Math.round(rgb[0])},${Math.round(rgb[1])},${Math.round(rgb[2])})`).getHexString();\n setDirColor(`#${newColorHex}`);\n break;\n }\n case 49158: case 49159: case 49160: {\n const newPos = [...dirPosition] as [number,number,number];\n newPos[address - 49158] = value / 10;\n setDirPosition(newPos);\n break;\n }\n }\n return;\n }\n\n throw new Error(\"ILLEGAL ADDRESS\");\n };\n \n try {\n const upperCommand = command.trim().toUpperCase();\n if (upperCommand.startsWith('POKE')) {\n const match = command.trim().match(/^POKE\\s+([0-9]+)\\s*,\\s*(-?[0-9.]+)/i);\n if (!match) throw new Error(\"SYNTAX ERROR\");\n const address = parseInt(match[1], 10);\n const value = parseFloat(match[2]);\n poke(address, value);\n\n } else if (upperCommand.startsWith('PRINT')) {\n const peekMatch = command.trim().match(/PEEK\\s*\$\\s*([0-9]+)\\s*\$/i);\n if (peekMatch) {\n const address = parseInt(peekMatch[1], 10);\n output = peek(address).toString();\n } else {\n throw new Error(\"SYNTAX ERROR\");\n }\n } else {\n const parts = command.trim().split(/\\s+/);\n const cmd = parts[0].toUpperCase();\n const findObjectByName = (name: string) => sceneObjects.find(o => o.name.toUpperCase() === name.replace(/\"/g, '').toUpperCase());\n\n switch (cmd) {\n case 'HELP':\n output = [\n '--- COMMANDS ---',\n 'ADD CUBE|SPHERE|PLANE|CYLINDER|CONE|TORUS|MONKEY',\n 'ADD CAMERA|LIGHT',\n 'LIST',\n 'SELECT \"\"',\n 'DELETE \"\"',\n 'PARENT \"\" \"\" [KEEP_TRANSFORM]',\n 'UNPARENT \"\" [KEEP_TRANSFORM]',\n 'MODIFIER \"\" ADD SUBSURF|SOLIDIFY|WIREFRAME',\n 'MODIFIER \"\" REMOVE ',\n 'POKE ADDR,VAL | PRINT PEEK(ADDR)',\n 'CLS',\n '--- MEMORY MAP ---',\n 'SELECTED OBJECT:',\n ' 1000-1002: POS(X,Y,Z) * 10',\n ' 1003-1005: ROT(X,Y,Z) DEGREES',\n ' 1006-1008: SCALE(X,Y,Z) * 100',\n ' 1009-1011: COLOR(R,G,B) 0-255',\n ' 1012: ROUGHNESS (0-100)',\n ' 1013: METALNESS (0-100)',\n ' 1014: WIREFRAME (0:OFF 1:ON) [LEGACY]',\n ' 1015: SHADER (0:STD 1:PHYS 2:TOON)',\n ' 1016-1018: EMISSIVE(R,G,B) 0-255',\n ' 1019: TRANSMISSION (0-100)',\n ' 1020: IOR (100-233)',\n ' 1021: THICKNESS (0-1000)',\n ' -- LIGHTS ONLY --',\n ' 1022: LIGHT TYPE (0:POINT 1:SPOT 2:DIR)',\n ' 1023: LIGHT INTENSITY * 100',\n ' 1024: LIGHT DISTANCE * 10',\n ' 1025: LIGHT DECAY * 100',\n ' 1026: SPOT ANGLE (DEGREES)',\n ' 1027: SPOT PENUMBRA (0-100)',\n ' -- MODIFIERS --',\n ' 1030: MODIFIER COUNT (R/O)',\n ' 1031: 1ST MOD TYPE (0:NONE 1:SUBD 2:SOLID 3:WIRE)',\n ' 1032: 1ST MOD PARAM (LEVEL/THICK*1000/THICK*10)',\n 'VIEWPORT:',\n ' 49152: GIZMO (0:OFF 1:MOVE 2:ROT 3:SCALE)',\n ' 49153: AMBIENT INTENSITY (0-255)',\n ' 49154: SUN INTENSITY (0-255)',\n ' 49155-49157: SUN COLOR(R,G,B) 0-255',\n ' 49158-49160: SUN POS(X,Y,Z) * 10',\n ' 53281: BG COLOR (0-15, C64 PALETTE)',\n ].join('
');\n break;\n case 'CLS':\n setTerminalHistory(['**** WEBBLENDER 64 BASIC V1.0 ****','',' 3D SCENE READY. 38911 BLOCKS FREE.','','READY.']);\n return;\n case 'LIST':\n output = sceneObjects.length > 0 ? sceneObjects.map(o => ` - ${o.name}`).join('
') : 'NO OBJECTS IN SCENE.';\n break;\n case 'ADD': {\n const type = parts[1]?.toUpperCase() as SceneObject['type'];\n if (['CUBE', 'SPHERE', 'PLANE', 'CYLINDER', 'CONE', 'TORUS', 'MONKEY', 'CAMERA', 'LIGHT'].includes(type)) {\n const newObj = handleAddObject(type);\n output = `CREATED ${newObj.name}`;\n } else {\n output = '?SYNTAX ERROR: UNKNOWN OBJECT TYPE';\n }\n break;\n }\n case 'PARENT': {\n const keepTransform = /KEEP_TRANSFORM/i.test(command);\n const nameMatches = command.match(/\"(.*?)\"\\s+\"(.*?)\"/);\n if (!nameMatches) throw new Error('USAGE: PARENT \"\" \"\"');\n const child = findObjectByName(nameMatches[1]);\n const parent = findObjectByName(nameMatches[2]);\n if (!child || !parent) throw new Error('OBJECT NOT FOUND');\n if (child.id === parent.id) throw new Error('CANNOT PARENT OBJECT TO ITSELF');\n \n let p_check = parent;\n while (p_check.parentId) {\n if (p_check.parentId === child.id) throw new Error('CIRCULAR DEPENDENCY');\n p_check = sceneObjects.find(o => o.id === p_check.parentId)!;\n }\n\n if (keepTransform) {\n const sceneMap = viewportRef.current?.getSceneObjectMap();\n if (!sceneMap) throw new Error('SCENE NOT READY');\n const childObj3D = sceneMap.get(child.id);\n const parentObj3D = sceneMap.get(parent.id);\n if (!childObj3D || !parentObj3D) throw new Error('3D OBJECT NOT FOUND');\n\n childObj3D.updateWorldMatrix(true, false);\n parentObj3D.updateWorldMatrix(true, false);\n \n const parentInverse = parentObj3D.matrixWorld.clone().invert();\n const newLocalMatrix = new THREE.Matrix4().multiplyMatrices(parentInverse, childObj3D.matrixWorld);\n \n const pos = new THREE.Vector3();\n const quat = new THREE.Quaternion();\n const scale = new THREE.Vector3();\n newLocalMatrix.decompose(pos, quat, scale);\n const rot = new THREE.Euler().setFromQuaternion(quat);\n\n handleObjectUpdate(child.id, () => ({ \n parentId: parent.id,\n params: {\n position: pos.toArray(),\n rotation: [rot.x, rot.y, rot.z],\n scale: scale.toArray(),\n }\n }));\n\n } else {\n handleObjectUpdate(child.id, () => ({ parentId: parent.id }));\n }\n\n output = `${child.name} PARENTED TO ${parent.name}`;\n break;\n }\n case 'UNPARENT': {\n const keepTransform = /KEEP_TRANSFORM/i.test(command);\n const nameMatch = command.match(/\"(.*?)\"/);\n if (!nameMatch) throw new Error('USAGE: UNPARENT \"\"');\n const child = findObjectByName(nameMatch[1]);\n if (!child) throw new Error('OBJECT NOT FOUND');\n if (!child.parentId) throw new Error('OBJECT HAS NO PARENT');\n \n if (keepTransform) {\n const sceneMap = viewportRef.current?.getSceneObjectMap();\n if (!sceneMap) throw new Error('SCENE NOT READY');\n const childObj3D = sceneMap.get(child.id);\n if (!childObj3D) throw new Error('3D OBJECT NOT FOUND');\n\n childObj3D.updateWorldMatrix(true, false);\n const worldMatrix = childObj3D.matrixWorld.clone();\n \n const pos = new THREE.Vector3();\n const quat = new THREE.Quaternion();\n const scale = new THREE.Vector3();\n worldMatrix.decompose(pos, quat, scale);\n const rot = new THREE.Euler().setFromQuaternion(quat);\n \n handleObjectUpdate(child.id, () => ({ \n parentId: null,\n params: {\n position: pos.toArray(),\n rotation: [rot.x, rot.y, rot.z],\n scale: scale.toArray(),\n }\n }));\n } else {\n handleObjectUpdate(child.id, () => ({ parentId: null }));\n }\n \n output = `${child.name} UNPARENTED`;\n break;\n }\n case 'MODIFIER': {\n const nameMatch = command.match(/\"(.*?)\"/);\n if (!nameMatch) { throw new Error('OBJECT NAME IN QUOTES REQUIRED'); }\n const obj = findObjectByName(nameMatch[1]);\n if (!obj) { throw new Error(`OBJECT NOT FOUND: ${nameMatch[1]}`); }\n \n const args = command.substring(nameMatch[0].length + cmd.length).trim().split(/\\s+/).filter(s => s!=='');\n const action = args[0]?.toUpperCase();\n \n if (action === 'ADD') {\n const type = args[1]?.toUpperCase() as ModifierType;\n const validTypes: ModifierType[] = ['SUBSURF', 'SOLIDIFY', 'WIREFRAME'];\n if (!validTypes.includes(type)) throw new Error('UNKNOWN MODIFIER TYPE');\n const newModifier: Modifier = { id: THREE.MathUtils.generateUUID(), type, params: {} };\n switch (type) {\n case 'SUBSURF': newModifier.params.levels = 1; break;\n case 'SOLIDIFY': newModifier.params.thickness = 0.05; break;\n case 'WIREFRAME': newModifier.params.thickness = 1; break;\n }\n handleObjectUpdate(obj.id, o => ({ modifiers: [...o.modifiers, newModifier] }));\n output = `ADDED ${type} TO ${obj.name}`;\n } else if (action === 'REMOVE') {\n const index = parseInt(args[1], 10);\n if (isNaN(index) || index < 1 || index > obj.modifiers.length) throw new Error('INVALID MODIFIER INDEX');\n handleObjectUpdate(obj.id, o => ({ modifiers: o.modifiers.filter((_, i) => i !== index - 1) }));\n output = `REMOVED MODIFIER ${index} FROM ${obj.name}`;\n } else {\n throw new Error('USAGE: MODIFIER \"\" ADD|REMOVE ...');\n }\n break;\n }\n case 'SELECT':\n case 'DELETE':\n case 'MOVE':\n case 'ROTATE':\n case 'SCALE':\n case 'COLOR': {\n const nameMatch = command.match(/\"(.*?)\"/);\n if (!nameMatch) { throw new Error('OBJECT NAME IN QUOTES REQUIRED'); }\n const objectName = nameMatch[1];\n const obj = findObjectByName(objectName);\n if (!obj) { throw new Error(`OBJECT NOT FOUND: ${objectName}`); }\n \n const args = command.substring(nameMatch[0].length + cmd.length).trim().split(/\\s+/).filter(s => s!=='');\n\n if (cmd === 'SELECT') {\n handleObjectSelect(obj.id);\n output = `SELECTED ${obj.name}`;\n } else if (cmd === 'DELETE') {\n handleObjectDelete(obj.id);\n output = `DELETED ${obj.name}`;\n } else if (cmd === 'COLOR') {\n if (!args[0] || !/^#[0-9A-F]{6}$/i.test(args[0])) throw new Error('INVALID HEX COLOR');\n handleObjectUpdate(obj.id, () => ({ params: { color: args[0] } }));\n output = `COLOR SET FOR ${obj.name}`;\n } else {\n if (args.length < 3) throw new Error('3 NUMERIC ARGUMENTS REQUIRED');\n const nums = args.slice(0, 3).map(s => parseFloat(s));\n if (nums.some(isNaN)) throw new Error('INVALID NUMBER');\n const typedNums = nums as [number, number, number];\n\n if (cmd === 'MOVE') {\n handleObjectUpdate(obj.id, () => ({ params: { position: typedNums } }));\n output = `MOVED ${obj.name}`;\n } else if (cmd === 'SCALE') {\n handleObjectUpdate(obj.id, () => ({ params: { scale: typedNums } }));\n output = `SCALED ${obj.name}`;\n } else if (cmd === 'ROTATE') {\n const rotRad: [number,number,number] = [\n THREE.MathUtils.degToRad(nums[0]),\n THREE.MathUtils.degToRad(nums[1]),\n THREE.MathUtils.degToRad(nums[2]),\n ];\n handleObjectUpdate(obj.id, () => ({ params: { rotation: rotRad } }));\n output = `ROTATED ${obj.name}`;\n }\n }\n break;\n }\n default:\n if (cmd !== '') output = \"?SYNTAX ERROR\";\n break;\n }\n }\n } catch(e) {\n output = `?${(e as Error).message.toUpperCase()} ERROR`;\n }\n\n if (output) {\n newHistory.push(output);\n }\n if(!output || output.length > 0) newHistory.push('READY.');\n setTerminalHistory(newHistory);\n }, [sceneObjects, terminalHistory, handleObjectSelect, handleObjectUpdate, handleObjectDelete, selectedObjectId, backgroundColor, ambientIntensity, dirIntensity, dirColor, transformMode, dirPosition]);\n\n return (\n

Web Blender Simulation

\n \n \n \n \n \n \n \n \n \n

\n \n

\n \n \n \n \n \n

\n );\n};\n\nconst root = createRoot(document.getElementById('root')!);\nroot.render();","url","link_url","/p/xeu1gyuajqo6jj5mymtc","versioned_link_url","/p/xeu1gyuajqo6jj5mymtc/3","yapping","I'll help you integrate the advanced 3D viewport system into the existing BlendMIGA Ultimate interface while keeping the CLI functionality intact. Let me make the necessary changes to create a hybrid system.\n\nindex.html\n```index.html\n```","page_description","The page features BlendMIGA Ultimate, an interactive web-based tool for creating 3D graphics and retro-style graphics, showcasing various functionalities…","cursor","eyJpZCI6InhldTFneXVhanFvNmpqNW15bXRjIn0","token","included",[],"about",{"_179":-5},"parent","routes/browser/layout","actionData","errors"]

BlendMIGA Ultimate - Advanced 3D & Retro Graphics Hybrid