https://wenyiblog.top/tags/%E8%A7%86%E8%A7%89%E6%95%88%E6%9E%9C/ Recent content in 视觉效果 on 文艺技术笔记 Hugo -- gohugo.io zh 文艺技术笔记 | 软件工程师文艺 Fri, 05 Jun 2026 09:00:00 +0800 https://wenyiblog.top/2026/06/threejs-particle-galaxy/ Fri, 05 Jun 2026 09:00:00 +0800 https://wenyiblog.top/2026/06/threejs-particle-galaxy/ <h2 id="从曲线到粒子"><a href="#%e4%bb%8e%e6%9b%b2%e7%ba%bf%e5%88%b0%e7%b2%92%e5%ad%90" class="header-anchor"></a>从曲线到粒子 </h2><p>最初版本用 BufferGeometry 画出了完美的螺旋曲线，干净、精准，但用户反馈&quot;太像 logo，缺少宇宙的有机感&quot;。</p> <blockquote> <p>曲线版的问题：太规整、太干净、像工业设计产品，不像真正的星系。</p> </blockquote> <h2 id="粒子系统方案"><a href="#%e7%b2%92%e5%ad%90%e7%b3%bb%e7%bb%9f%e6%96%b9%e6%a1%88" class="header-anchor"></a>粒子系统方案 </h2><h3 id="核心参数"><a href="#%e6%a0%b8%e5%bf%83%e5%8f%82%e6%95%b0" class="header-anchor"></a>核心参数 </h3><div class="highlight"><div class="chroma"> <table class="lntable"><tr><td class="lntd"> <pre tabindex="0" class="chroma"><code><span class="lnt"> 1 </span><span class="lnt"> 2 </span><span class="lnt"> 3 </span><span class="lnt"> 4 </span><span class="lnt"> 5 </span><span class="lnt"> 6 </span><span class="lnt"> 7 </span><span class="lnt"> 8 </span><span class="lnt"> 9 </span><span class="lnt">10 </span><span class="lnt">11 </span></code></pre></td> <td class="lntd"> <pre tabindex="0" class="chroma"><code class="language-javascript" data-lang="javascript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">params</span> <span class="o">=</span> <span class="p">{</span> </span></span><span class="line"><span class="cl"> <span class="nx">count</span><span class="o">:</span> <span class="mi">150000</span><span class="p">,</span> <span class="c1">// 粒子数量 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">size</span><span class="o">:</span> <span class="mf">0.02</span><span class="p">,</span> <span class="c1">// 粒子大小 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">radius</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="c1">// 星系半径 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">branches</span><span class="o">:</span> <span class="mi">5</span><span class="p">,</span> <span class="c1">// 旋臂数量 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">spin</span><span class="o">:</span> <span class="mi">1</span><span class="p">,</span> <span class="c1">// 旋转强度 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">randomness</span><span class="o">:</span> <span class="mf">0.5</span><span class="p">,</span> <span class="c1">// 随机扩散 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">power</span><span class="o">:</span> <span class="mi">3</span><span class="p">,</span> <span class="c1">// 聚集强度 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">insideColor</span><span class="o">:</span> <span class="s1">&#39;#ff6030&#39;</span><span class="p">,</span> <span class="c1">// 内核暖色 </span></span></span><span class="line"><span class="cl"><span class="c1"></span> <span class="nx">outsideColor</span><span class="o">:</span> <span class="s1">&#39;#1b3984&#39;</span><span class="p">,</span> <span class="c1">// 边缘冷色 </span></span></span><span class="line"><span class="cl"><span class="c1"></span><span class="p">}</span> </span></span></code></pre></td></tr></table> </div> </div><h3 id="关键经验"><a href="#%e5%85%b3%e9%94%ae%e7%bb%8f%e9%aa%8c" class="header-anchor"></a>关键经验 </h3><ol> <li><strong>幂函数控制聚集</strong>：<code>Math.pow(randomnessPower, 3)</code> 让粒子在内核更密集</li> <li><strong>双色渐变</strong>：内核用暖色（橙/白），边缘用冷色（蓝/紫），模拟真实星系光谱</li> <li><strong>透明度混合</strong>：<code>depthWrite: false</code> + <code>transparent: true</code> 实现粒子叠加光效</li> </ol> <h2 id="配色迭代"><a href="#%e9%85%8d%e8%89%b2%e8%bf%ad%e4%bb%a3" class="header-anchor"></a>配色迭代 </h2><table> <thead> <tr> <th>版本</th> <th>主色</th> <th>辅色</th> <th>效果</th> </tr> </thead> <tbody> <tr> <td>v1</td> <td>纯白</td> <td>蓝</td> <td>太单调</td> </tr> <tr> <td>v2</td> <td>绿 + 白</td> <td>红/橙/蓝</td> <td>抖音星轨风格</td> </tr> <tr> <td>v3</td> <td>橙 + 白</td> <td>蓝紫</td> <td>接近真实星系</td> </tr> </tbody> </table> <hr> <blockquote> <p>🎨 粒子特效源码已打包，关注后续更新获取。</p> </blockquote>