/tags/3d/Recent content in 3d on Feynman 的博客Hugozh-CNTue, 07 Jul 2026 10:00:00 +0800/posts/threejs-project-architecture/Tue, 07 Jul 2026 10:00:00 +0800/posts/threejs-project-architecture/<blockquote class="blockquote-regular"> <p>Three.js 的一切始于三个对象：Scene（舞台）、Camera（镜头）、Renderer（投影仪）。掌握这三件套，就掌握了 3D 世界的入场券。</p> </blockquote> <h2 id="01-学习目标">01 学习目标</h2> <p>本节课从零搭建一个完整的 Three.js 项目，目标是：</p> <ul> <li>搭建 Vite + TypeScript + Three.js 项目脚手架</li> <li>理解 Scene / Camera / Renderer 三件套的职责</li> <li>掌握 requestAnimationFrame + delta time 动画循环</li> <li>学会窗口自适应和像素比设置</li> </ul> <h2 id="02-threejs-三件套">02 Three.js 三件套</h2> <p>Three.js 的一切始于三个对象：</p> <table> <thead> <tr> <th>对象</th> <th>类比</th> <th>职责</th> </tr> </thead> <tbody> <tr> <td><strong>Scene</strong></td> <td>舞台</td> <td>放置所有物体、灯光、相机的容器</td> </tr> <tr> <td><strong>Camera</strong></td> <td>摄像机</td> <td>决定观众看到什么（位置、角度、范围）</td> </tr> <tr> <td><strong>Renderer</strong></td> <td>投影仪</td> <td>把 3D 场景计算成 2D 像素画到 canvas 上</td> </tr> </tbody> </table> <div class="highlight"><pre tabindex="0" class="chroma"><code class="language-typescript" data-lang="typescript"><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">scene</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">Scene</span><span class="p">()</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">camera</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">PerspectiveCamera</span><span class="p">(</span><span class="mi">75</span><span class="p">,</span> <span class="nx">width</span><span class="o">/</span><span class="nx">height</span><span class="p">,</span> <span class="mf">0.1</span><span class="p">,</span> <span class="mi">1000</span><span class="p">)</span> </span></span><span class="line"><span class="cl"><span class="kr">const</span> <span class="nx">renderer</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">THREE</span><span class="p">.</span><span class="nx">WebGLRenderer</span><span class="p">({</span> <span class="nx">canvas</span> <span class="p">})</span> </span></span></code></pre></div><h2 id="03-动画循环--delta-time">03 动画循环 + Delta Time</h2> <p><strong>为什么需要 delta time？</strong></p> <p>不同设备帧率不同（60fps vs 144fps）。如果直接写 <code>rotation += 0.01</code>，144fps 的设备转速是 60fps 的 2.4 倍。</p>