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"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.146.js"></script>
  <script type="module">


    // ======= 可调参数 =======
    const PARAMS = {
      planetRadius: 4.2,         // 星球半径
      autoRotateSpeed: 0.02,     // 自动旋转速度
      nodeCount: 140,            // 环绕节点数量
      nodeRingRadius: 7.5,       // 节点环半径
      nodeJitter: 0.45,          // 节点随机抖动
      linkCount: 24,             // 同时存在的动态连线数量
      linkLifetime: 6.5,         // 每条连线寿命（秒）
      glowStrength: 1.1,         // 大气辉光强度（越大越亮）
      starCount: 3000,           // 背景星空数量
      pulseSpeed: 1.0            // 星球表面律动速度
    };

    // ======= 场景基础 =======
    const container = document.getElementById('app');
    const scene = new THREE.Scene();

    const renderer = new THREE.WebGLRenderer({ antialias:true, alpha:true });
    renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.outputColorSpace = THREE.SRGBColorSpace;
    container.appendChild(renderer.domElement);

    const camera = new THREE.PerspectiveCamera(45, window.........完整代码请登录后点击上方下载按钮下载查看