代码语言：html

所属分类：三维

代码描述：three实现三维可视化调节摄像机角度参数生成镜头提示词代码

代码标签： 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>
  :root{
    --ink:#1e293b;
    --ink-2:#64748b;
    --brand:#3b82f6;
    --brand-soft:#dbeafe;
  }
  *{ box-sizing:border-box; }
  html,body{
    margin:0; height:100%; overflow:hidden;
    background:#e9eef6;
    color:var(--ink);
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",system-ui,sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  #app{ position:fixed; inset:0; }
  canvas{ display:block; }

  /* ---------- 控制面板 ---------- */
  .panel{
    position:fixed; top:20px; left:20px; width:322px;
    max-height:calc(100vh - 40px);
    overflow-y:auto;
    padding:18px 18px 16px;
    border-radius:18px;
    background:rgba(255,255,255,.86);
    backdrop-filter:blur(18px) saturate(140%);
    -webkit-backdrop-filter:blur(18px) saturate(140%);
    box-shadow:0 16px 44px rgba(15,23,42,.12), 0 0 0 1px rgba(15,23,42,.06);
    z-index:10;
  }
  .panel::-webkit-scrollbar{ width:6px; }
  .panel::-webkit-scrollbar-thumb{ background:#cfd9e6; border-radius:3px; }

  .panel h1{
    margin:0 0 2px; font-size:15px; font-weight:700; letter-spacing:.02em;
  }
  .panel .sub{
    margin:0 0 14px; font-size:11.5px; color:var(--ink-2); line-height:1.5;
  }

  .field{ margin-bottom:12px; }
  .field .row{
    display:flex; justify-content:space-between; align-items:baseline;
    font-size:12px; color:var(--ink-2); margin-bottom:5px;
  }
  .field .row b{
    font-size:12px; color:var(--brand); font-variant-numeric:tabular-nums;
    font-weight:700;
  }

  input[type=range]{
    -webkit-appearance:none; appearance:none;
    width:100%; height:18px; background:transparent; cursor:pointer; display:block;
  }
  input[type=range]::-webkit-slider-runnable-track{
    height:5px; border-radius:3px; background:#e3e9f2;
  }
  input[type=range]::-webkit-slider-thumb{
    -webkit-appearance:none; width:15px; height:15px; margin-top:-5px;
    border-radius:50%; background:#fff; border:3px solid var(--brand);
    box-shadow:0 1px 5px rgba(59,130,246,.4); transition:transform .12s;
  }
  input[type=range]::-webkit-slider-thumb:hover{ transform:scale(1.12); }
  input[type=range]::-moz-range-track{
    height:5px; border-radius:3px; background:#e3e9f2;
  }
  input[type=range]::-moz-range-thumb{
    width:15px; height:15px; border-radius:50%; background:#fff;
    border:3px solid var(--brand); box-shadow:0 1px 5px rgba(59,130,246,.4);
  }

  .presets{ display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 12px; }
  .presets button{
    flex:1 1 auto; min-width:64px;
    padding:7px 8px; border-radius:9px; cursor:pointer;
    font-size:11.5px; font-family:inherit; font-weight:600;
    color:#41536b; background:#f1f5fb; b.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论