feat: Add commodity sensing, proof bundle, Three.js viz, mock isolation
Commodity Sensing Module (ADR-013): - sensing/rssi_collector.py: Real Linux WiFi RSSI collection from /proc/net/wireless and iw commands, with SimulatedCollector for testing - sensing/feature_extractor.py: FFT-based spectral analysis, CUSUM change-point detection, breathing/motion band power extraction - sensing/classifier.py: Rule-based presence/motion classification with confidence scoring and multi-receiver agreement - sensing/backend.py: Common SensingBackend protocol with honest capability reporting (PRESENCE + MOTION only for commodity) Proof of Reality Bundle (ADR-011): - data/proof/generate_reference_signal.py: Deterministic synthetic CSI with known breathing (0.3 Hz) and walking (1.2 Hz) signals - data/proof/sample_csi_data.json: Generated reference signal - data/proof/verify.py: One-command pipeline verification with SHA-256 - data/proof/expected_features.sha256: Expected output hash Three.js Visualization: - ui/components/scene.js: 3D scene setup with OrbitControls Mock Isolation: - testing/mock_pose_generator.py: Mock pose generation moved out of production pose_service.py - services/pose_service.py: Cleaned mock paths https://claude.ai/code/session_01Ki7pvEZtJDvqJkmyn6B714
This commit is contained in:
Claude
196
ui/components/scene.js
Normal file
196
ui/components/scene.js
Normal file
@@ -0,0 +1,196 @@
|
||||
// Three.js Scene Setup - WiFi DensePose 3D Visualization
|
||||
// Camera, lights, renderer, OrbitControls
|
||||
|
||||
export class Scene {
|
||||
constructor(container) {
|
||||
this.container = typeof container === 'string'
|
||||
? document.getElementById(container)
|
||||
: container;
|
||||
|
||||
if (!this.container) {
|
||||
throw new Error('Scene container element not found');
|
||||
}
|
||||
|
||||
this.scene = null;
|
||||
this.camera = null;
|
||||
this.renderer = null;
|
||||
this.controls = null;
|
||||
this.clock = null;
|
||||
this.animationId = null;
|
||||
this.updateCallbacks = [];
|
||||
this.isRunning = false;
|
||||
|
||||
this._init();
|
||||
}
|
||||
|
||||
_init() {
|
||||
const width = this.container.clientWidth || 960;
|
||||
const height = this.container.clientHeight || 640;
|
||||
|
||||
// Scene
|
||||
this.scene = new THREE.Scene();
|
||||
this.scene.background = new THREE.Color(0x0a0a1a);
|
||||
this.scene.fog = new THREE.FogExp2(0x0a0a1a, 0.008);
|
||||
|
||||
// Camera - positioned to see the room from a 3/4 angle
|
||||
this.camera = new THREE.PerspectiveCamera(55, width / height, 0.1, 500);
|
||||
this.camera.position.set(8, 7, 10);
|
||||
this.camera.lookAt(0, 1.5, 0);
|
||||
|
||||
// Renderer
|
||||
this.renderer = new THREE.WebGLRenderer({
|
||||
antialias: true,
|
||||
alpha: false,
|
||||
powerPreference: 'high-performance'
|
||||
});
|
||||
this.renderer.setSize(width, height);
|
||||
this.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
|
||||
this.renderer.shadowMap.enabled = true;
|
||||
this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
|
||||
this.renderer.toneMapping = THREE.ACESFilmicToneMapping;
|
||||
this.renderer.toneMappingExposure = 1.0;
|
||||
this.container.appendChild(this.renderer.domElement);
|
||||
|
||||
// OrbitControls
|
||||
this.controls = new THREE.OrbitControls(this.camera, this.renderer.domElement);
|
||||
this.controls.enableDamping = true;
|
||||
this.controls.dampingFactor = 0.08;
|
||||
this.controls.minDistance = 3;
|
||||
this.controls.maxDistance = 30;
|
||||
this.controls.maxPolarAngle = Math.PI * 0.85;
|
||||
this.controls.target.set(0, 1.2, 0);
|
||||
this.controls.update();
|
||||
|
||||
// Lights
|
||||
this._setupLights();
|
||||
|
||||
// Clock for animation delta
|
||||
this.clock = new THREE.Clock();
|
||||
|
||||
// Handle resize
|
||||
this._resizeObserver = new ResizeObserver(() => this._onResize());
|
||||
this._resizeObserver.observe(this.container);
|
||||
window.addEventListener('resize', () => this._onResize());
|
||||
}
|
||||
|
||||
_setupLights() {
|
||||
// Ambient light - subtle blue tint for tech feel
|
||||
const ambient = new THREE.AmbientLight(0x223355, 0.4);
|
||||
this.scene.add(ambient);
|
||||
|
||||
// Hemisphere light - sky/ground gradient
|
||||
const hemi = new THREE.HemisphereLight(0x4488cc, 0x112233, 0.5);
|
||||
hemi.position.set(0, 20, 0);
|
||||
this.scene.add(hemi);
|
||||
|
||||
// Key light - warm directional light from above-right
|
||||
const keyLight = new THREE.DirectionalLight(0xffeedd, 0.8);
|
||||
keyLight.position.set(5, 10, 5);
|
||||
keyLight.castShadow = true;
|
||||
keyLight.shadow.mapSize.width = 1024;
|
||||
keyLight.shadow.mapSize.height = 1024;
|
||||
keyLight.shadow.camera.near = 0.5;
|
||||
keyLight.shadow.camera.far = 30;
|
||||
keyLight.shadow.camera.left = -10;
|
||||
keyLight.shadow.camera.right = 10;
|
||||
keyLight.shadow.camera.top = 10;
|
||||
keyLight.shadow.camera.bottom = -10;
|
||||
this.scene.add(keyLight);
|
||||
|
||||
// Fill light - cool from left
|
||||
const fillLight = new THREE.DirectionalLight(0x88aaff, 0.3);
|
||||
fillLight.position.set(-5, 6, -3);
|
||||
this.scene.add(fillLight);
|
||||
|
||||
// Point light under the body for a soft uplight glow
|
||||
const uplight = new THREE.PointLight(0x0066ff, 0.4, 8);
|
||||
uplight.position.set(0, 0.1, 0);
|
||||
this.scene.add(uplight);
|
||||
}
|
||||
|
||||
// Register a callback that runs each frame with (deltaTime, elapsedTime)
|
||||
onUpdate(callback) {
|
||||
this.updateCallbacks.push(callback);
|
||||
return () => {
|
||||
const idx = this.updateCallbacks.indexOf(callback);
|
||||
if (idx !== -1) this.updateCallbacks.splice(idx, 1);
|
||||
};
|
||||
}
|
||||
|
||||
start() {
|
||||
if (this.isRunning) return;
|
||||
this.isRunning = true;
|
||||
this.clock.start();
|
||||
this._animate();
|
||||
}
|
||||
|
||||
stop() {
|
||||
this.isRunning = false;
|
||||
if (this.animationId !== null) {
|
||||
cancelAnimationFrame(this.animationId);
|
||||
this.animationId = null;
|
||||
}
|
||||
}
|
||||
|
||||
_animate() {
|
||||
if (!this.isRunning) return;
|
||||
this.animationId = requestAnimationFrame(() => this._animate());
|
||||
|
||||
const delta = this.clock.getDelta();
|
||||
const elapsed = this.clock.getElapsedTime();
|
||||
|
||||
// Run registered update callbacks
|
||||
for (const cb of this.updateCallbacks) {
|
||||
cb(delta, elapsed);
|
||||
}
|
||||
|
||||
this.controls.update();
|
||||
this.renderer.render(this.scene, this.camera);
|
||||
}
|
||||
|
||||
_onResize() {
|
||||
const width = this.container.clientWidth;
|
||||
const height = this.container.clientHeight;
|
||||
if (width === 0 || height === 0) return;
|
||||
|
||||
this.camera.aspect = width / height;
|
||||
this.camera.updateProjectionMatrix();
|
||||
this.renderer.setSize(width, height);
|
||||
}
|
||||
|
||||
// Add an object to the scene
|
||||
add(object) {
|
||||
this.scene.add(object);
|
||||
}
|
||||
|
||||
// Remove an object from the scene
|
||||
remove(object) {
|
||||
this.scene.remove(object);
|
||||
}
|
||||
|
||||
// Get the Three.js scene, camera, renderer for external access
|
||||
getScene() { return this.scene; }
|
||||
getCamera() { return this.camera; }
|
||||
getRenderer() { return this.renderer; }
|
||||
|
||||
// Reset camera to default position
|
||||
resetCamera() {
|
||||
this.camera.position.set(8, 7, 10);
|
||||
this.controls.target.set(0, 1.2, 0);
|
||||
this.controls.update();
|
||||
}
|
||||
|
||||
dispose() {
|
||||
this.stop();
|
||||
if (this._resizeObserver) {
|
||||
this._resizeObserver.disconnect();
|
||||
}
|
||||
window.removeEventListener('resize', this._onResize);
|
||||
this.controls.dispose();
|
||||
this.renderer.dispose();
|
||||
if (this.renderer.domElement.parentNode) {
|
||||
this.renderer.domElement.parentNode.removeChild(this.renderer.domElement);
|
||||
}
|
||||
this.updateCallbacks = [];
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user