21c10e2fb2
- Refactored monolithic app.js into a modular architecture (core/ and modules/) - Introduced SovOS: A modular 3D windowing system for the Nexus - Implemented Glassmorphism UI components for futuristic 3D terminal panels - Established a unified State & Broadcaster system for real-time data sync - Added a Global Ticker for clean, modular animation management - Ensured all new files are strictly under 1000 lines (avg < 100 lines) - Migrated core features (Command, Metrics, Cognition) into independent SovOS Apps This pivot enables rapid, sovereign evolution of the Nexus environment.
76 lines
2.2 KiB
JavaScript
76 lines
2.2 KiB
JavaScript
import * as THREE from 'three';
|
|
import { THEME } from './core/theme.js';
|
|
import { S } from './state.js';
|
|
import { Broadcaster } from './state.js';
|
|
|
|
export class SovOS {
|
|
constructor(scene) {
|
|
this.scene = scene;
|
|
this.apps = new Map();
|
|
this.init();
|
|
}
|
|
|
|
init() {
|
|
this.container = new THREE.Group();
|
|
this.container.position.set(0, 3, -7.5);
|
|
this.scene.add(this.container);
|
|
}
|
|
|
|
registerApp(id, config) {
|
|
const app = this.createWindow(id, config);
|
|
this.apps.set(id, app);
|
|
this.container.add(app.group);
|
|
}
|
|
|
|
createWindow(id, config) {
|
|
const { x, y, rot, title, color } = config;
|
|
const w = 2.8, h = 3.8;
|
|
const group = new THREE.Group();
|
|
group.position.set(x, y || 0, 0);
|
|
group.rotation.y = rot || 0;
|
|
|
|
// Glassmorphism Frame
|
|
const glassMat = new THREE.MeshPhysicalMaterial({
|
|
color: THEME.glass.color,
|
|
transparent: true,
|
|
opacity: THEME.glass.opacity,
|
|
roughness: THEME.glass.roughness,
|
|
metalness: THEME.glass.metalness,
|
|
transmission: THEME.glass.transmission,
|
|
thickness: THEME.glass.thickness,
|
|
ior: THEME.glass.ior,
|
|
side: THREE.DoubleSide
|
|
});
|
|
const frame = new THREE.Mesh(new THREE.PlaneGeometry(w, h), glassMat);
|
|
group.add(frame);
|
|
|
|
// Canvas UI
|
|
const canvas = document.createElement('canvas');
|
|
canvas.width = 512; canvas.height = 700;
|
|
const ctx = canvas.getContext('2d');
|
|
const texture = new THREE.CanvasTexture(canvas);
|
|
const mat = new THREE.MeshBasicMaterial({ map: texture, transparent: true, side: THREE.DoubleSide });
|
|
const screen = new THREE.Mesh(new THREE.PlaneGeometry(w * 0.92, h * 0.92), mat);
|
|
screen.position.z = 0.05;
|
|
group.add(screen);
|
|
|
|
const renderUI = (state) => {
|
|
ctx.clearRect(0, 0, 512, 700);
|
|
// Header
|
|
ctx.fillStyle = 'rgba(0, 0, 0, 0.4)';
|
|
ctx.fillRect(0, 0, 512, 80);
|
|
ctx.fillStyle = '#' + new THREE.Color(color).getHexString();
|
|
ctx.font = 'bold 32px "Orbitron"';
|
|
ctx.fillText(title, 30, 50);
|
|
// Body
|
|
ctx.font = '20px "JetBrains Mono"';
|
|
ctx.fillStyle = '#ffffff';
|
|
config.renderBody(ctx, state);
|
|
texture.needsUpdate = true;
|
|
};
|
|
|
|
Broadcaster.subscribe(renderUI);
|
|
return { group, renderUI };
|
|
}
|
|
}
|