three实现类似soul的3d星球旋转动画代码-html代码-BFW代码库

three实现类似soul的3d星球旋转动画代码

代码语言：html

所属分类：三维

代码描述：three实现类似soul的3d星球旋转动画代码

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

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <title>Soul-like 3D Planet (Three.js)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
  <style>
    html,body{height:100%;margin:0;background:radial-gradient(1000px 800px at 70% 20%, #1b1f3a 0%, #0b0f1e 60%, #060912 100%);overflow:hidden;font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto;}
    #app{position:fixed;inset:0}
    .hud{
      position:fixed;left:50%;top:36px;transform:translateX(-50%);
      color:#c9d4ff;letter-spacing:.4px;user-select:none;text-align:center;
      padding:10px 14px;border-radius:14px;background:rgba(255,255,255,.04);backdrop-filter: blur(6px);box-shadow:0 10px 30px rgba(0,0,0,.25);
    }
    .hud h1{margin:0;font-size:16px;font-weight:700;opacity:.95}
    .hud p{margin:6px 0 0;font-size:12px;opacity:.7}
    .footer{
      position:fixed;right:16px;bottom:16px;color:#9fb0ff;font-size:12px;opacity:.7;
      background:rgba(255,255,255,.04);padding:6px 10px;border-radius:12px;backdrop-filter: blur(6px);
    }
    .tip{position:fixed;left:16px;bottom:16px;color:#a9b7ff;font-size:12px;opacity:.75}
    canvas{display:block}
  </style>
</head>
<body>
  <div id="app"></div>
  <div class="hud">
    <h1>3D Planet — Soul style</h1>
    <p>拖拽旋转 · 滚轮缩放 · 自动巡航</p>
  </div>
  <div class="tip">节点数与连线等参数可在代码顶部调节</div>
  <div class="footer">Three.js demo</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.160.js"></scrip.........完整代码请登录后点击上方下载按钮下载查看