Spaces:

CVNSS
/

3DAqua

Running

App Files Files Community

CVNSS commited on Jul 24, 2025

Commit

bf931b9

verified ·

1 Parent(s): 96485c7

Update index.html

Browse files

Files changed (1) hide show

index.html +442 -18

index.html CHANGED Viewed

@@ -1,19 +1,443 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Aquaponics 3D Pilot 20m² – Anguilla & Lettuce</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <style>
+        html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background: linear-gradient(135deg, #1a1a2e, #16213e);
+            color: #fff;
+        }
+        #container { width: 100vw; height: 100vh; }
+        #dashboard {
+            position: absolute; top: 20px; right: 20px; width: 350px; z-index: 10;
+            background: rgba(10,20,40,0.95); border-radius: 14px; border: 2px solid #00bcd4;
+            box-shadow: 0 8px 32px rgba(0,188,212,0.2);
+            padding: 18px 22px 16px 22px;
+        }
+        #dashboard h3 {
+            color: #00bcd4; text-align: center; margin: 0 0 12px 0; font-size: 17px;
+            letter-spacing: 1px; font-weight: bold;
+        }
+        .section { margin-bottom: 14px; }
+        .section label { font-size: 12px; font-weight: bold; color: #4CAF50; }
+        .toggle-btn {
+            display: block; width: 100%; margin: 5px 0 0 0; padding: 8px 0;
+            border: none; border-radius: 16px; font-size: 12px;
+            background: linear-gradient(45deg, #2196F3, #00bcd4);
+            color: #fff; cursor: pointer; transition: all 0.2s;
+            font-weight: 600;
+        }
+        .toggle-btn.active { background: linear-gradient(45deg, #4CAF50, #8BC34A);}
+        .toggle-btn.off   { background: linear-gradient(45deg, #f44336, #ff5722);}
+        .sensor-row { display: flex; justify-content: space-between; padding: 2px 0;}
+        .sensor-label { color: #eee; font-size: 12px;}
+        .sensor-value { font-family: 'Courier New', monospace; font-weight: bold; color: #00bcd4;}
+        #view-controls {
+            position: absolute; bottom: 25px; left: 25px; z-index: 11;
+            background: rgba(10,20,40,0.92); border-radius: 8px; border: 1px solid #00bcd4;
+            padding: 14px 10px 10px 12px;
+        }
+        #view-controls button {
+            margin: 0 2px 4px 0; padding: 7px 12px; border-radius: 5px;
+            background: linear-gradient(45deg, #673AB7, #9C27B0); color: #fff; border: none;
+            font-size: 11px; font-weight: 500; cursor: pointer;
+            transition: 0.2s;
+        }
+        #view-controls button:hover { box-shadow: 0 4px 10px #9C27B040; }
+        #info-panel {
+            position: absolute; top: 18px; left: 20px; z-index: 10; width: 310px;
+            background: rgba(0,0,0,0.72); border-radius: 10px; padding: 14px 20px 10px 20px;
+            font-size: 12px; border: 1px solid #4CAF50;
+            color: #fafafa;
+        }
+        .legend { margin-top: 12px; border-top: 1px solid #222; padding-top: 10px;}
+        .color-box { display: inline-block; width: 11px; height: 11px; border-radius: 2px;
+            margin-right: 5px; vertical-align: middle;}
+        .group-btn { display: inline-block; margin: 1px 2px 2px 0; }
+        #popup-info {
+            display:none; position:fixed; left:50%; top:40%; z-index:999;
+            min-width:200px; max-width:360px;
+            background:rgba(15,30,50,0.97); color:#fff; border:2px solid #00bcd4;
+            border-radius: 14px; padding: 18px 22px;
+            box-shadow: 0 8px 32px rgba(0,188,212,0.15);
+            transform:translate(-50%, -50%);
+        }
+        #popup-info h4 { margin:0 0 6px 0; color:#4CAF50;}
+        #popup-info button { background:#00bcd4;color:#fff;border:none;padding:4px 12px;border-radius:8px;margin-top:10px;}
+        @media (max-width:900px) {
+            #dashboard,#info-panel { width: 90vw; max-width: 99vw; left: 0; right: 0; margin: auto;}
+        }
+    </style>
+</head>
+<body>
+    <div id="container"></div>
+    <!-- DASHBOARD -->
+    <div id="dashboard">
+        <h3>🌱 Aquaponics IoT Dashboard</h3>
+        <div class="section">
+            <label>🌡️ Sensor Monitor</label>
+            <div class="sensor-row"><span class="sensor-label">pH:</span> <span class="sensor-value" id="ph">6.8</span></div>
+            <div class="sensor-row"><span class="sensor-label">EC (μS/cm):</span> <span class="sensor-value" id="ec">1240</span></div>
+            <div class="sensor-row"><span class="sensor-label">TDS (ppm):</span> <span class="sensor-value" id="tds">620</span></div>
+            <div class="sensor-row"><span class="sensor-label">Temp (°C):</span> <span class="sensor-value" id="temp">24.6</span></div>
+            <div class="sensor-row"><span class="sensor-label">DO (mg/L):</span> <span class="sensor-value" id="do">6.2</span></div>
+            <div class="sensor-row"><span class="sensor-label">NO₃⁻ (mg/L):</span> <span class="sensor-value" id="no3">85</span></div>
+            <div class="sensor-row"><span class="sensor-label">Salinity (ppt):</span> <span class="sensor-value" id="sal">3</span></div>
+        </div>
+        <div class="section">
+            <label>⚙️ System Controls</label>
+            <button class="toggle-btn active" id="led-toggle" onclick="toggleGroup('lighting')">LED Grow Lights</button>
+            <button class="toggle-btn active" id="water-toggle" onclick="toggleGroup('waterFlow')">Water Flow</button>
+            <button class="toggle-btn active" id="drip-toggle" onclick="toggleGroup('pumps')">Drip/Pump</button>
+            <button class="toggle-btn active" id="sensor-toggle" onclick="toggleGroup('sensors')">Sensor Display</button>
+        </div>
+        <div class="section">
+            <label>🌿 Biology Groups</label>
+            <button class="toggle-btn active group-btn" id="plants-toggle" onclick="toggleGroup('plants')">Lettuce (Rau xà lách)</button>
+            <button class="toggle-btn active group-btn" id="tilapia-toggle" onclick="toggleGroup('tilapia')">Tilapia</button>
+            <button class="toggle-btn active group-btn" id="eel-toggle" onclick="toggleGroup('eels')">Anguilla marmorata</button>
+        </div>
+        <div class="section">
+            <label>🔧 Show/Hide</label>
+            <button class="toggle-btn active group-btn" id="pipes-toggle" onclick="toggleGroup('nftSystem')">NFT Pipes</button>
+            <button class="toggle-btn active group-btn" id="frame-toggle" onclick="toggleGroup('frame')">Frame</button>
+            <button class="toggle-btn active group-btn" id="tank-toggle" onclick="toggleGroup('tank')">Fish Tank</button>
+            <button class="toggle-btn active group-btn" id="filters-toggle" onclick="toggleGroup('filters')">Filter Boxes</button>
+        </div>
+    </div>
+    <!-- VIEW CONTROLS -->
+    <div id="view-controls">
+        <div style="color:#00bcd4; font-weight:bold; margin-bottom:8px;">📷 View</div>
+        <button onclick="setCamera('isometric')">Isometric</button>
+        <button onclick="setCamera('top')">Top</button>
+        <button onclick="setCamera('side')">Side</button>
+        <button onclick="setCamera('front')">Front</button>
+        <button onclick="resetCamera()">Reset</button>
+    </div>
+    <!-- INFO PANEL -->
+    <div id="info-panel">
+        <h3>🔹 3D Aquaponics Pilot 20m²</h3>
+        <p><b>System:</b> 5m × 4m × 2.4m. <b>Tank:</b> 2×1×1m. <b>Pipes:</b> 12×NFT. <b>Plants:</b> 216 Lettuce. <b>Fish:</b> 58 Tilapia + 9 Anguilla. <b>Sensor:</b> 7.</p>
+        <div class="legend">
+            <b>Water Path:</b>
+            <div><span class="color-box" style="background: #2196F3;"></span>Tank→Filter</div>
+            <div><span class="color-box" style="background: #4CAF50;"></span>Biofilter</div>
+            <div><span class="color-box" style="background: #FF9800;"></span>Pump→NFT</div>
+            <div><span class="color-box" style="background: #9C27B0;"></span>Return</div>
+        </div>
+        <div class="legend">
+            <b>IoT Sensors:</b>
+            <span style="color:#2196F3;">● Water</span>
+            <span style="color:#FFEB3B;">● Temp</span>
+            <span style="color:#4CAF50;">● pH/EC</span>
+            <span style="color:#F44336;">● Flow</span>
+            <span style="color:#9C27B0;">● LED</span>
+            <span style="color:#00bcd4;">● Salinity</span>
+        </div>
+    </div>
+    <!-- POPUP INFO (TÍNH NĂNG SẼ BỔ SUNG) -->
+    <div id="popup-info"></div>
+    <!-- THREE.JS + CONTROLS -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/three@0.128.0/examples/js/controls/OrbitControls.min.js"></script>
+    <script>
+        // ====== THREE.JS SCENE SETUP ======
+        const scene = new THREE.Scene();
+        scene.background = new THREE.Color(0x1a1a2e);
+        const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+        let defaultCameraPos = new THREE.Vector3(8, 6, 8);
+        camera.position.copy(defaultCameraPos);
+        camera.lookAt(0, 1, 0);
+        const renderer = new THREE.WebGLRenderer({ antialias: true });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        renderer.shadowMap.enabled = true;
+        renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+        document.getElementById('container').appendChild(renderer.domElement);
+        // Orbit controls (mouse drag, zoom, rotate)
+        const controls = new THREE.OrbitControls(camera, renderer.domElement);
+        controls.target.set(0, 1, 0);
+        controls.update();
+        // Lighting
+        const ambientLight = new THREE.AmbientLight(0x404040, 0.7);
+        scene.add(ambientLight);
+        const dirLight = new THREE.DirectionalLight(0xffffff, 1.3);
+        dirLight.position.set(10, 16, 10);
+        dirLight.castShadow = true;
+        scene.add(dirLight);
+        // ===== MATERIALS =====
+        const materials = {
+            steel: new THREE.MeshPhongMaterial({ color: 0x666666, shininess: 110 }),
+            tank: new THREE.MeshPhongMaterial({ color: 0x2196F3, transparent: true, opacity: 0.38, shininess: 120 }),
+            water: new THREE.MeshPhongMaterial({ color: 0x1976D2, transparent: true, opacity: 0.74, shininess: 200 }),
+            filter: new THREE.MeshPhongMaterial({ color: 0x795548, shininess: 55 }),
+            pipe: new THREE.MeshPhongMaterial({ color: 0x424242, shininess: 80 }),
+            nftPipe: new THREE.MeshPhongMaterial({ color: 0x607D8B, shininess: 85 }),
+            plant: new THREE.MeshPhongMaterial({ color: 0x92f58b, shininess: 26 }), // lettuce: light green
+            tilapia: new THREE.MeshPhongMaterial({ color: 0xFF5722, shininess: 70 }),
+            eel: new THREE.MeshPhongMaterial({ color: 0x222211, shininess: 90 }), // base color for eel
+            sensor: new THREE.MeshPhongMaterial({ color: 0x9C27B0, shininess: 140 }),
+            led: new THREE.MeshBasicMaterial({ color: 0xffffff, transparent: true, opacity: 0.85 }),
+            ground: new THREE.MeshLambertMaterial({ color: 0x3E2723 }),
+            manifold: new THREE.MeshPhongMaterial({ color: 0x37474F, shininess: 70 })
+        };
+        // ===== GROUPS =====
+        const groups = {};
+        ['frame','tank','filters','pumps','pipes','nftSystem','plants','tilapia','eels','sensors','lighting','waterFlow'].forEach(k=>{
+            groups[k]=new THREE.Group(); scene.add(groups[k]);
+        });
+        // ===== HELPERS =====
+        function createBox(w,h,d,m){const g=new THREE.BoxGeometry(w,h,d);const o=new THREE.Mesh(g,m);o.castShadow=o.receiveShadow=true;return o;}
+        function createCylinder(r1,r2,h,m){const g=new THREE.CylinderGeometry(r1,r2,h,20);const o=new THREE.Mesh(g,m);o.castShadow=o.receiveShadow=true;return o;}
+        function createSphere(r,m){const g=new THREE.SphereGeometry(r,18,16);const o=new THREE.Mesh(g,m);o.castShadow=o.receiveShadow=true;return o;}
+        // Create a "spotted eel" by combining a dark cylinder + random white spots
+        function createMarbledEel(length=0.18){
+            let group = new THREE.Group();
+            let body = createCylinder(0.024,0.03,length,materials.eel);
+            body.rotation.z = Math.PI/2;
+            // Random spots (simulate marble pattern)
+            for(let s=0;s<10;s++){
+                let spot = createSphere(0.009,new THREE.MeshPhongMaterial({color:0xffffff,shininess:200}));
+                let phi = Math.random()*Math.PI*2;
+                let dz = (Math.random()-0.5)*length*0.95;
+                let dx = Math.cos(phi)*0.022;
+                let dy = Math.sin(phi)*0.02;
+                spot.position.set(dx,dz,dy);
+                spot.rotation.z = Math.PI/2;
+                body.add(spot);
+            }
+            group.add(body);
+            return group;
+        }
+        // ===== GROUND + AXES + GRID =====
+        const ground = new THREE.Mesh(new THREE.PlaneGeometry(15,15), materials.ground);
+        ground.rotation.x = -Math.PI/2; ground.position.y = -0.01; ground.receiveShadow = true; scene.add(ground);
+        scene.add(new THREE.GridHelper(15,30,0x444444,0x333333));
+        scene.add(new THREE.AxesHelper(2.5));
+        // ===== 1. FRAME STRUCTURE =====
+        [[-2,-1.5],[2,-1.5],[2,1.5],[-2,1.5]].forEach(([x,z])=>{
+            let post = createBox(0.04,2.4,0.04,materials.steel); post.position.set(x,1.2,z); groups.frame.add(post);
+        });
+        [0.4,1.2,2.0].forEach(h=>{
+            // X
+            [ -1.5, 1.5 ].forEach(z=>{
+                let rail = createBox(4.0,0.04,0.04,materials.steel);
+                rail.position.set(0,h,z); groups.frame.add(rail);
+            });
+            // Z
+            [ -2.0, 2.0 ].forEach(x=>{
+                let rail = createBox(0.04,0.04,3.0,materials.steel);
+                rail.position.set(x,h,0); groups.frame.add(rail);
+            });
+        });
+        // ===== 2. FISH TANK (2x1x1m) =====
+        let tank = createBox(2.0,1.0,1.0,materials.tank); tank.position.set(0,0.5,0); groups.tank.add(tank);
+        let water = createBox(1.95,0.85,0.95,materials.water); water.position.set(0,0.5,0); groups.tank.add(water);
+        // ===== 3. FILTER BOXES =====
+        let swirl = createBox(0.8,0.8,0.8,materials.filter); swirl.position.set(-2.5,0.4,0); groups.filters.add(swirl);
+        let bf1 = createBox(1.0,0.4,0.5,materials.filter); bf1.position.set(-0.5,0.2,0); groups.filters.add(bf1);
+        let bf2 = createBox(1.0,0.4,0.5,materials.filter); bf2.position.set(0.5,0.2,0); groups.filters.add(bf2);
+        // ===== 4. PUMP/DRIP SYSTEM =====
+        let pump = createBox(0.3,0.3,0.3,materials.pipe); pump.position.set(1.5,0.15,-0.5); groups.pumps.add(pump);
+        let aerator = createBox(0.2,0.2,0.2,materials.pipe); aerator.position.set(1.2,0.1,0.5); groups.pumps.add(aerator);
+        // ===== 5. NFT PIPES SYSTEM (12) + LETTUCE PLANTS (216) =====
+        for(let row=0; row<2; row++){
+            for(let i=0; i<6; i++){
+                let pipe = createCylinder(0.05,0.05,3.5,materials.nftPipe);
+                pipe.position.set(0,1.2+(i*0.25),row?0.8:-0.8);
+                pipe.rotation.z=Math.PI/2; pipe.rotation.y=-0.052; groups.nftSystem.add(pipe);
+                // Lettuce plants
+                for(let j=0;j<18;j++){
+                    let lettuce = createSphere(0.045,materials.plant);
+                    lettuce.position.set(-1.6+(j*0.18),1.2+(i*0.25)+0.08,row?0.8:-0.8);
+                    lettuce.userData = { type: 'plant', name: 'Lettuce', info: 'Rau xà lách (Lactuca sativa)' };
+                    lettuce.cursor = 'pointer';
+                    lettuce.onClick = () => showInfo({ title: "Lettuce (Rau xà lách)", content: "NFT Lettuce (Lactuca sativa). Aquaponics crop." });
+                    groups.plants.add(lettuce);
+                }
+            }
+        }
+        // ===== 6. FISH POPULATION =====
+        let tilapiaFish=[]; let eelFish=[];
+        // Tilapia (as before)
+        for(let i=0;i<58;i++){
+            let sz=0.03+Math.random()*0.04,fish=createSphere(sz,materials.tilapia);
+            let x=(Math.random()-0.5)*1.8, y=0.2+Math.random()*0.6, z=(Math.random()-0.5)*0.9;
+            fish.position.set(x,y,z);
+            fish.userData = { type: 'fish', name: 'Tilapia', info: 'Oreochromis spp.' };
+            fish.cursor = 'pointer';
+            fish.onClick = () => showInfo({ title: "Tilapia", content: "Tilapia (Oreochromis spp.)" });
+            tilapiaFish.push({mesh:fish,velocity:new THREE.Vector3((Math.random()-0.5)*0.003,(Math.random()-0.5)*0.002,(Math.random()-0.5)*0.003)});
+            groups.tilapia.add(fish);
+        }
+        // Anguilla marmorata (marbled eel): show as large marbled eel with white spots, bottom dweller
+        for(let i=0;i<9;i++){
+            let eelObj = createMarbledEel(0.16+Math.random()*0.05);
+            eelObj.position.set((Math.random()-0.5)*1.5,0.12+Math.random()*0.1,(Math.random()-0.5)*0.7);
+            eelObj.userData = { type: 'eel', name: 'Anguilla marmorata', info: 'Cá chình bông - Marbled eel' };
+            eelObj.cursor = 'pointer';
+            eelObj.onClick = () => showInfo({ title: "Cá chình bông", content: "Anguilla marmorata (Marbled eel) – đặc điểm: thân có vệt trắng, sống đáy, chịu mặn tốt." });
+            eelFish.push({mesh:eelObj,velocity:new THREE.Vector3((Math.random()-0.5)*0.001,0,(Math.random()-0.5)*0.001)});
+            groups.eels.add(eelObj);
+        }
+        // ===== 7. SENSORS =====
+        let sensorMap = [
+            { id:'ph',name:'pH',pos:[-0.8,0.5,0.3],color:0xFF9800, value:6.8 },
+            { id:'ec',name:'EC',pos:[0.8,0.5,-0.3],color:0x2196F3, value:1240 },
+            { id:'tds',name:'TDS',pos:[0,0.8,0],color:0x9C27B0, value:620 },
+            { id:'temp',name:'Temp',pos:[-0.5,0.3,0],color:0xF44336, value:24.6 },
+            { id:'do',name:'DO',pos:[0.5,0.6,0.4],color:0x00BCD4, value:6.2 },
+            { id:'no3',name:'NO₃⁻',pos:[0.5,0.2,0],color:0x4CAF50, value:85 },
+            { id:'sal',name:'Salinity',pos:[-0.8,0.18,-0.2],color:0x00bcd4, value:3 }
+        ];
+        sensorMap.forEach(s=>{
+            let device = createBox(0.05,0.05,0.05,materials.sensor);
+            device.position.set(...s.pos); device.userData = { type: "sensor", name: s.name, info: `${s.name} sensor` };
+            device.cursor = 'pointer';
+            device.onClick = () => showInfo({ title: s.name, content: `Sensor value: ${s.value} ${s.name === 'Salinity' ? 'ppt' : ''}` });
+            groups.sensors.add(device);
+            let led = createSphere(0.01,new THREE.MeshBasicMaterial({color:s.color}));
+            led.position.set(s.pos[0],s.pos[1]+0.04,s.pos[2]);
+            groups.sensors.add(led);
+        });
+        // ===== 8. LIGHTING =====
+        for(let i=0;i<4;i++){
+            let light = createBox(0.8,0.05,0.1,materials.led);
+            light.position.set(-1.5+(i*1.0),2.2,0); groups.lighting.add(light);
+        }
+        // ===== 9. WATER FLOW VISUALIZATION =====
+        let waterFlowParticles=[],flowColors=[0x2196F3,0x4CAF50,0xFF9800,0x9C27B0];
+        for(let i=0;i<80;i++){
+            let particle = createSphere(0.008,new THREE.MeshBasicMaterial({
+                color:flowColors[i%flowColors.length],transparent:true,opacity:0.78
+            }));
+            particle.userData={pathIndex:Math.floor(Math.random()*8),progress:Math.random(),speed:0.006+Math.random()*0.009};
+            waterFlowParticles.push(particle); groups.waterFlow.add(particle);
+        }
+        // ===== GROUP VISIBILITY TOGGLES =====
+        let groupState={
+            lighting:true,waterFlow:true,pumps:true,sensors:true,plants:true,tilapia:true,eels:true,nftSystem:true,frame:true,tank:true,filters:true
+        };
+        function toggleGroup(name){
+            groupState[name]=!groupState[name];
+            groups[name].visible=groupState[name];
+            // Change button style:
+            let btn = document.getElementById(name+'-toggle');
+            if(btn){ btn.classList.toggle('active',groupState[name]); btn.classList.toggle('off',!groupState[name]); }
+        }
+        // Initialize all as visible:
+        Object.keys(groups).forEach(k=>groups[k].visible=true);
+        // ===== VIEW CONTROLS =====
+        function setCamera(view){
+            if(view==='isometric'){camera.position.set(8,6,8);}
+            else if(view==='top'){camera.position.set(0,16,0);}
+            else if(view==='side'){camera.position.set(10,2,0);}
+            else if(view==='front'){camera.position.set(0,2,10);}
+            camera.lookAt(0,1,0);
+            controls.target.set(0,1,0); controls.update();
+        }
+        function resetCamera(){ camera.position.copy(defaultCameraPos); camera.lookAt(0,1,0); controls.target.set(0,1,0); controls.update(); }
+        // ===== ANIMATION LOOP =====
+        function animate(){
+            requestAnimationFrame(animate);
+            // Animate tilapia
+            tilapiaFish.forEach(f=>{
+                f.mesh.position.add(f.velocity);
+                let p=f.mesh.position;
+                if(p.x>0.9||p.x<-0.9)f.velocity.x*=-1;
+                if(p.y>1.0||p.y<0.12)f.velocity.y*=-1;
+                if(p.z>0.48||p.z<-0.48)f.velocity.z*=-1;
+                if(Math.random()<0.012){f.velocity.x+=(Math.random()-0.5)*0.0015;f.velocity.z+=(Math.random()-0.5)*0.0015;}
+            });
+            // Animate eels
+            eelFish.forEach(e=>{
+                e.mesh.position.add(e.velocity);
+                let p=e.mesh.position;
+                if(p.x>0.8||p.x<-0.8)e.velocity.x*=-1;
+                if(p.z>0.45||p.z<-0.45)e.velocity.z*=-1;
+            });
+            // Animate water flow
+            if(groupState.waterFlow){
+                waterFlowParticles.forEach(p=>{
+                    let d=p.userData; d.progress+=d.speed;
+                    if(d.progress>=1){ d.progress=0; d.pathIndex=(d.pathIndex+1)%8;}
+                    let pts=[
+                        [0.95,0.65,0],[ -2.5,0.65,0],[ -0.5,0.2,0],[ 0.5,0.2,0],
+                        [1.5,0.15,-0.5],[1.75,1.3,0],[-1.7,1.8,0],[0,0.5,0]
+                    ];
+                    let curr=pts[d.pathIndex], nxt=pts[(d.pathIndex+1)%pts.length];
+                    p.position.lerpVectors(new THREE.Vector3(...curr),new THREE.Vector3(...nxt),d.progress);
+                });
+            }
+            renderer.render(scene,camera);
+        }
+        animate();
+        // ===== HANDLE WINDOW RESIZE =====
+        window.addEventListener('resize',()=>{
+            camera.aspect=window.innerWidth/window.innerHeight; camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth,window.innerHeight);
+        });
+        // ======= POPUP (HOOK sẵn) =======
+        function showInfo(obj){
+            const el = document.getElementById('popup-info');
+            el.innerHTML = `<h4>${obj.title}</h4><div>${obj.content}</div>
+                <button onclick="hideInfo()">OK</button>`;
+            el.style.display = 'block';
+        }
+        function hideInfo(){ document.getElementById('popup-info').style.display='none'; }
+        // ======= PICK/CLICK EVENTS – sẽ cập nhật chi tiết sau =======
+        renderer.domElement.addEventListener('click', (event) => {
+            let mouse = new THREE.Vector2(
+                (event.clientX / renderer.domElement.clientWidth) * 2 - 1,
+                -(event.clientY / renderer.domElement.clientHeight) * 2 + 1
+            );
+            let raycaster = new THREE.Raycaster();
+            raycaster.setFromCamera(mouse, camera);
+            let intersects = raycaster.intersectObjects(
+                [].concat(
+                    groups.sensors.children,
+                    groups.plants.children,
+                    groups.tilapia.children,
+                    groups.eels.children
+                ), true);
+            if (intersects.length > 0) {
+                let obj = intersects[0].object;
+                // Find topmost userData
+                while (obj && !obj.onClick && obj.parent) obj = obj.parent;
+                if (obj && obj.onClick) obj.onClick();
+            }
+        });
+    </script>
+</body>
 </html>