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.0">
<title>打光效果 - 三维打光控制示意图</title>
<style>
  *{box-sizing:border-box;margin:0;padding:0}
  body{background:#0b0b0d;color:#eee;font-family:system-ui,"PingFang SC","Microsoft YaHei",sans-serif;min-height:100vh}
  .app{max-width:980px;margin:0 auto;padding:28px 26px}
  .title{font-size:18px;font-weight:600;margin-bottom:18px}
  .card{display:flex;gap:26px;background:linear-gradient(180deg,#141416,#101013);border:1px solid #232326;border-radius:16px;padding:24px}
  .left{flex:1.15;display:flex;flex-direction:column;gap:12px;min-width:0}
  .view-toggle{display:inline-flex;background:#1d1d20;border:1px solid #2a2a2e;border-radius:10px;padding:4px;width:max-content}
  .view-toggle button{padding:6px 20px;border:none;background:transparent;color:#bbb;border-radius:8px;cursor:pointer;font-size:13px}
  .view-toggle button.active{background:#f5f5f7;color:#111;font-weight:600}
  #scene{width:100%;height:360px;display:block;cursor:grab;touch-action:none}
  #scene.dragging{cursor:grabbing}
  .hint{font-size:12px;color:#666;text-align:center;transition:opacity .3s}
  .divider{width:1px;background:#26262a}
  .right{flex.........完整代码请登录后点击上方下载按钮下载查看