Tiny Online Tools
把模型放到页面上的四种方式，每一种都是完整的
嵌入 3D 模型属于那类示例代码永远差一点才对的任务。文档里的代码片段漏掉了窗口尺寸变化的处理函数。博客文章忘了写 controls.update()，于是阻尼悄无声息地失效。React 示例跳过了 Suspense 边界，首次渲染就抛错。这个生成器输出的是完整的一整份代码，而且把你实际选择的设置直接写了进去。
<model-viewer>
Google 的 Web 组件是从零到一个可用查看器的最短路径：一个 <script type="module"> 标签加一个自定义元素。相机控制、自动旋转、Android 与 iOS 上的 AR、基于图像的光照以及占位海报图，它都自己搞定。如果你想今天下午就在营销页面上放一个模型，就用它。
生成的标签里带有 touch-action="pan-y"，这一点很容易被忽略，却决定了查看器在手机上是原生般顺手，还是不断与页面滚动打架。
Three.js
适合你要完全掌控的场景。这段代码片段从 three/addons/* 导入——那是 three 包中真实存在的子路径导出，因此在任何打包器下都能用——用 ACES 色调映射和你设定的曝光配置渲染器，通过 PMREMGenerator 与 RoomEnvironment 构建一个中性的影棚环境，加入带阻尼的 OrbitControls，用 GLTFLoader 加载模型，处理尺寸变化，并运行在 renderer.setAnimationLoop() 上而不是裸的 requestAnimationFrame，这样即使页面之后进入 WebXR，同一个循环依然能继续工作。
React Three Fiber
React 版本：用 @react-three/fiber 提供画布，用 @react-three/drei 提供 useGLTF、OrbitControls、Environment 和 ContactShadows。useGLTF.preload() 在组件外部调用，因此在 React 渲染之前请求就已经开始；模型则位于一个 Suspense 边界内，配有由 useProgress 驱动的真实进度回退界面。
独立 HTML 页面
一份完整的 index.html——文档类型声明、viewport meta、样式、CDN 脚本、查看器。保存下来，上传到任意静态托管服务，就完成了。它和第一段代码片段不是一回事：那一段是插入到既有页面里的片段，这一份是一个完整文件。
相机距离
猜相机距离是嵌入模型时最烦人的环节，因为它取决于模型的真实尺度。在本地加载你的文件，工具会测量它的包围球，并计算出模型以少量留白填满 45° 视锥所对应的距离。文件永远不会被上传，也永远不会出现在生成的代码里——出现的只有那个数字。