配置3D模型

版权

提示

本文是在 博主兰德胡涂's Blog 文章：《博客添加 3D 在线模型》 基础上增加了自己实践过程的一些细节，转载无需和我联系，但请注明文章来源。如果侵权之处，请联系博主进行删除，谢谢~

效果

前往留言板块 查看或者访官方网站预览，点击跳转

配置

网上冲浪时看到个 3D 模型网站，想着折腾下，就把留言区加上了 3D 模型显示，以下是操作记录

首先打开 3D 模型官网：https://sketchfab.com

选择自己喜欢的模型，比如我选择了：https://sketchfab.com/3d-models/gipsy-danger-9af0ae87238a4840b95a83f9e6c5cdde

打开该模型预览页面，选择 Embed 标签，如下图所示

粘贴标签页中的的 js 代码

• 将代码复制到留言板或者其他 md 文档中

• 大功告成啦！！

这个网站上的模型非常多，而且还有动态的 3D 模型，有兴趣的可以自行尝试。

---

代码

自己这里配置的模型宽度按自己喜好进行调整，将这个在线模型和作者一样放在了自己的留言区这个 markdown 文档里了自己最终代码如下：

<div class="sketchfab-embed-wrapper">
  <iframe
    class="c-viewer__iframe"
    src="https://sketchfab.com/models/9af0ae87238a4840b95a83f9e6c5cdde/embed?autostart=1&amp;"
    id="api-frame"
    allow="autoplay; xr-spatial-tracking"
    xr-spatial-tracking="true"
    allowfullscreen=""
    width="100%"
    height="300"
  ></iframe>
  <p style="font-size: 13px; font-weight: normal; margin: 5px; color: #4A4A4A;">
    <a
      href="https://sketchfab.com/3d-models/gipsy-danger-9af0ae87238a4840b95a83f9e6c5cdde?utm_medium=embed&utm_campaign=share-popup&utm_content=9af0ae87238a4840b95a83f9e6c5cdde"
      target="_blank"
      rel="nofollow"
      style="font-weight: bold; color: #1CAAD9;"
    >
      gipsy danger
    </a>
    by
    <a
      href="https://sketchfab.com/saltmecha?utm_medium=embed&utm_campaign=share-popup&utm_content=9af0ae87238a4840b95a83f9e6c5cdde"
      target="_blank"
      rel="nofollow"
      style="font-weight: bold; color: #1CAAD9;"
    >
      saltmecha
    </a>
    on
    <a
      href="https://sketchfab.com?utm_medium=embed&utm_campaign=share-popup&utm_content=9af0ae87238a4840b95a83f9e6c5cdde"
      target="_blank"
      rel="nofollow"
      style="font-weight: bold; color: #1CAAD9;"
      >Sketchfab</a
    >
  </p>
</div>