|
|
<!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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
<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> |
|
|
|
|
|
|
|
|
<div id="popup-info"></div> |
|
|
|
|
|
|
|
|
<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> |
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
const controls = new THREE.OrbitControls(camera, renderer.domElement); |
|
|
controls.target.set(0, 1, 0); |
|
|
controls.update(); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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 }), |
|
|
tilapia: new THREE.MeshPhongMaterial({ color: 0xFF5722, shininess: 70 }), |
|
|
eel: new THREE.MeshPhongMaterial({ color: 0x222211, shininess: 90 }), |
|
|
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 }) |
|
|
}; |
|
|
|
|
|
|
|
|
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]); |
|
|
}); |
|
|
|
|
|
|
|
|
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;} |
|
|
|
|
|
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; |
|
|
|
|
|
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; |
|
|
} |
|
|
|
|
|
|
|
|
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)); |
|
|
|
|
|
|
|
|
[[-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=>{ |
|
|
|
|
|
[ -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); |
|
|
}); |
|
|
|
|
|
[ -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); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
|
|
|
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); |
|
|
|
|
|
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); |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
let tilapiaFish=[]; let eelFish=[]; |
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
}); |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
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); |
|
|
} |
|
|
|
|
|
|
|
|
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]; |
|
|
|
|
|
let btn = document.getElementById(name+'-toggle'); |
|
|
if(btn){ btn.classList.toggle('active',groupState[name]); btn.classList.toggle('off',!groupState[name]); } |
|
|
} |
|
|
|
|
|
Object.keys(groups).forEach(k=>groups[k].visible=true); |
|
|
|
|
|
|
|
|
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(); } |
|
|
|
|
|
|
|
|
function animate(){ |
|
|
requestAnimationFrame(animate); |
|
|
|
|
|
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;} |
|
|
}); |
|
|
|
|
|
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; |
|
|
}); |
|
|
|
|
|
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(); |
|
|
|
|
|
|
|
|
window.addEventListener('resize',()=>{ |
|
|
camera.aspect=window.innerWidth/window.innerHeight; camera.updateProjectionMatrix(); |
|
|
renderer.setSize(window.innerWidth,window.innerHeight); |
|
|
}); |
|
|
|
|
|
|
|
|
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'; } |
|
|
|
|
|
|
|
|
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; |
|
|
|
|
|
while (obj && !obj.onClick && obj.parent) obj = obj.parent; |
|
|
if (obj && obj.onClick) obj.onClick(); |
|
|
} |
|
|
}); |
|
|
|
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
