Spaces:

CVNSS
/

3DAqua

Running

File size: 24,104 Bytes

<!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>