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">
<title>小孔成像 · 三维原理演示</title>
<style>
  html,body{margin:0;height:100%;overflow:hidden;background:#07090f;
    font-family:"Microsoft YaHei","PingFang SC",sans-serif;color:#dde6ff;}
  canvas{display:block;}
  #panel{position:fixed;top:14px;left:14px;width:300px;padding:16px 18px;border-radius:14px;
    background:rgba(12,17,30,.84);border:1px solid rgba(110,170,255,.25);
    backdrop-filter:blur(8px);box-shadow:0 8px 30px rgba(0,0,0,.5);z-index:10;}
  #panel h1{margin:0 0 10px;font-size:17px;color:#8fd0ff;letter-spacing:1px;}
  .row{margin:10px 0 2px;}
  .row label{font-size:12.5px;color:#9fb4d8;display:flex;justify-content:space-between;}
  .row label b{color:#ffd28a;}
  input[type=range]{width:100%;accent-color:#4fc3f7;height:18px;}
  .checks{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin:10px 0;font-size:12.5px;color:#b8c8e8;}
  .checks label{display:flex;align-items:center;gap:5px;cursor:pointer;}
  .btns{display:flex;gap:8px;margin-top:10px;}
  button{flex:1;background:#133350;color:#9fd8ff;border:1px solid rgba(90,170,255,.4);
    border-radius:8px;padding:7px 4px;font-size:13px;cursor:pointer;}
  button:hover{background:#1a4a73;}
  #stats{margin-top:12px;font-size:12.5px;line-height:1.8;color:#aebfe2;
    border-top:1px dashed rgba(120,160,220,.3);padding-top:8px;}
  #stats b{color:#ffd28a;}
  #stats .tip{color:#7fd8a6;font-size:11.5px;}
  #explain{position:fixed;right:14px;bottom:14px;max-width:350px;padding:13px 15px;
    font-size:12.5px;line-height:1.8;border-radius:12px;background:rgba(12,17,30,.8);
    border:1px solid rgba(110,170,255,.2);z-index:10;color:#b8c8e8;}
  #explain b{color:#8fd0ff;}
  @media(max-width:760px){#explain{display:none;}#panel{width:250px;}}
</style>
</head>
<body>
<div id="panel">
  <h1>🕯️ 小孔成像 · 三维演示</h1>
  <div class="row"><label>物距 u(蜡烛到小孔)<b id="vu">3.0</b></label>
    <input type="range" id="su" min="1.5" max="6" st.........完整代码请登录后点击上方下载按钮下载查看