;\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/7y8cj22f6bm5p__sa413","versioned_link_url","/p/7y8cj22f6bm5p__sa413/2","yapping","I'll integrate the modern 3D viewport React component into the existing BlendMIGA interface while preserving the Amiga-style CLI and overall aesthetic. Here's the updated code:\n\nindex.html\n```index.html\n```\n\nThe key changes made:\n\n1. **Integrated React 3D Viewport**: Added a modern React-based 3D viewport component that replaces the basic Three.js setup while maintaining the Amiga-style interface.\n\n2. **Preserved CLI Functionality**: Kept the original command-line interface intact with all its Amiga-style commands and responses.\n\n3. **Maintained Aesthetic**: Preserved the retro green-on-black color scheme, scanlines, and glow effects that give BlendMIGA its distinctive Amiga-like appearance.\n\n4. **Added Modern 3D Features**: The new viewport supports:\n - Multiple object types (Cube, Sphere, Light, Camera)\n - Interactive object selection\n - Proper lighting and materials\n - Transform controls\n - Object hierarchy\n\n5. **Backward Compatibility**: The original JavaScript functions remain in place for CLI commands, while the React component handles the 3D rendering.\n\nThe interface now combines the best of both worlds - the nostalgic Amiga-style CLI with a modern, powerful 3D viewport that supports contemporary 3D graphics workflows while maintaining the retro aesthetic that makes BlendMIGA unique.","page_description","The page provides a web-based interface for a tool called BlendMIGA, which allows users to create and manipulate 3D graphics in a modern style while…","cursor","eyJpZCI6Ijd5OGNqMjJmNmJtNXBfX3NhNDEzIn0","token","included",[],"about",{"_177":-5},"parent","routes/browser/layout","actionData","errors"]

BlendMIGA - Modern 3D & Amiga Graphics Hybrid