如果你想在你的网站中展示3d模型，你可以使用 `threejs` 这个库，不过你还是需要写一点代码去加载你的3d模型的，还有处理鼠标的视角操作等 那么怎么可以方便的展示你的模型呢 你可以使用 `model-viewer` 这个库，只需要下面几行代码，就可以在你的网站显示3d模型 ```html <!-- Import the component --> <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script> <!-- Use it like any other HTML element --> <model-viewer alt="Neil Armstrong's Spacesuit from the Smithsonian Digitization Programs Office and National Air and Space Museum" src="shared-assets/models/NeilArmstrong.glb" ar ar-modes="webxr scene-viewer quick-look" environment-image="shared-assets/environments/moon_1k.hdr" poster="shared-assets/models/NeilArmstrong.webp" seamless-poster shadow-intensity="1" camera-controls enable-pan></model-viewer> ``` 预览 <iframe width="100%" height="500px" style="border:0;margin:10px" src="https://modelviewer.dev/examples/twitter/player.html?src=https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb"></iframe> 具体文档可以去官方的[文档](https://modelviewer.dev/)查看，这里就不详细说明了 如果你和我一样，是打算在自己的博客里展示模型，你可能会遇到一点问题，比如 js 脚本无法正确加载。如果你的博客系统允许你在博客中使用 `iframe`的话，你可以采用下面我的做法。 `model-viewer` 官方有个网站，你只需要后面拼接上模型地址，就可以显示对应的模型。像是下面这样 ```url https://modelviewer.dev/examples/twitter/player.html?src=https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb ``` 参数`src` 就是模型的地址，你只需要在iframe 输入这个 url就可以展示你的模型 ```html <iframe width="100%" height="500px" style="border:0;margin:10px" src="https://modelviewer.dev/examples/twitter/player.html?src=https://modelviewer.dev/shared-assets/models/NeilArmstrong.glb"> </iframe> ``` 另外，我觉得每次上传自己的模型到服务器还是蛮麻烦的，你可以使用 [catbox](https://catbox.moe) 的服务，它可以允许你上传 `200m` 以内的文件，然后生成直链，你只需把直链替换到上面的 `url` 即可。 最后，这种方案其实和上传一个图片相比，也没有复杂多少，几乎不需要你做什么事情，就可以展示你的模型，局限性可能就是如果你相对你的模型进行一些自定义操作比较麻烦，还是需要去使用类似 `threejs` 之类的库。