three实现三维水管给菜园浇水体验代码-html代码-BFW代码库

three实现三维水管给菜园浇水体验代码

代码语言：html

所属分类：三维

代码描述：three实现三维水管给菜园浇水体验代码，先按红色阀门打开后按空格浇水。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>🥬 三维菜园 · 手动灌溉体验</title>
<style>
  html,body{margin:0;height:100%;overflow:hidden;font-family:"PingFang SC","Microsoft YaHei",system-ui,sans-serif;background:#b9def2;user-select:none;-webkit-user-select:none;}
  canvas{display:block;}
  /* ------- 信息面板 ------- */
  #panel{position:fixed;top:14px;left:14px;width:238px;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);
    border-radius:14px;box-shadow:0 6px 24px rgba(30,60,90,.2);color:#334455;z-index:10;}
  #panelHead{font-weight:700;font-size:15px;padding:10px 14px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;color:#2f6b3a;}
  #panelBody{padding:0 14px 12px;font-size:12.5px;line-height:1.6;}
  .valve b{padding:1px 8px;border-radius:8px;color:#fff;background:#b0bec5;}
  .valve b.on{background:#43a047;}
  .prow{display:flex;justify-content:space-between;align-items:center;margin:4px 0;}
  .pname{width:78px;}
  .bars{display:flex;gap:5px;align-items:center;}
  .bar{display:block;width:66px;height:6px;background:rgba(0,0,0,.12);border-radius:3px;overflow:hidden;}
  .fill{display:block;height:100%;width:0%;border-radius:3px;transition:width .25s;}
  .fill.m{background:linear-gradient(90deg,#7ad0ff,#2196f3);}
  .fill.g{background:linear-gradient(90deg,#b6e36b,#4caf50);}
  .legend{color:#889;font-size:11px;margin-top:2px;}
  .avg{margin-top:6px;font-weight:700;color:#2f6b3a;}
  .help{margin-top:8px;padding-top:8px;border-top:1px dashed #c5d2c5;color:#667;}
  /* ------- 按钮 ------- */
  #topBtns{position:fixed;top:14px;right:14px;display:flex;gap:8px;z-index:10;}
  #topBtns button{border:none;border-radius:10px;padding:8px 12px;font-size:14px;cursor:pointer;
    background:rgba(255,255,255,.88);box-shadow:0 4px 14px rgba(30,60,90,.18);color:#334;}
  #waterBtn{position:fixed;left:50%;bottom:26px;transform:translateX(-50%);z-index:10;border:none;cursor:pointer;
    padding:16px 44px;font-size:19px;font-weight:700;color:#fff;border-radius:40px;
    background:linear-gradient(135deg,#4fc3f7,#0288d1);box-shadow:0 8px 26px rgba(2,136,209,.45);
    touch-action:none;-webkit-touch-callout:none;}
  #waterBtn.active{transform:translateX(-50%) scale(.94);background:linear-gradient(135deg,#29b6f6,#01579b);}
  /* ------- 提示 ------- */
  #toast{position:fixed;top:18px;left:50%;transform:translateX(-50%) translateY(-8px);z-index:20;
    background:rgba(30,45,60,.85);color:#fff;font-size:14px;padding:9px 18px;border-radius:22px;
    opacity:0;pointer-events:none;transition:all .35s;max-width:80%;text-align:center;}
  #toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
  @media (max-width:640px){
    #panel{width:186px;font-size:11px;} #panelBody{font-size:11px;} .bar{width:44px;}
    #waterBtn{padding:13px 32px;font-size:16px;}
  }
</style>
</head>
<body>

<div id="panel">
  <div id="panelHead">🥬 三维菜园 · 手动灌溉 <span id="fold">▾</span></div>
  <div id="panelBody">
    <div class="valve">水源阀门：<b i.........完整代码请登录后点击上方下载按钮下载查看