如何在Cargo作品集网站使用<model-viewer>加载并显示3D模型？

一、基础配置必查项 #

• 先嵌入官方脚本：在Cargo页面的自定义代码区域（比如头部代码栏）直接加这段代码，不需要单独存成HTML文件上传：

  <script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
  

• 检查标签的核心属性：
  • src：必须填Cargo媒体库上传模型后生成的绝对URL，本地路径或无效链接会导致模型加载失败
  • 必须设置width和height，比如width="800" height="600"，否则可能因尺寸为0无法显示
  • 建议加上alt文本和交互属性（比如auto-rotate、camera-controls）

示例可用代码：

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>
<model-viewer src="https://your-cargo-model-link.glb" alt="作品3D模型" width="800" height="600" auto-rotate camera-controls></model-viewer>

二、常见失败排查点 #

• 模型格式：仅支持glTF（.glb/.gltf）、USDZ格式，其他格式（如.obj）需转换后再上传
• 跨域问题：优先用Cargo自带的媒体库存储模型，避免用外部未开启CORS的服务器链接
• 脚本顺序：确保脚本代码放在标签之前加载（比如页面<head>区域）
• 浏览器兼容性：用Chrome、Firefox等最新版浏览器测试，旧版浏览器可能不支持

三、关于脚本的疑问解答 #

不需要把指定链接的脚本代码保存为HTML文件上传。直接在Cargo的自定义代码栏嵌入<script type="module" src="..."></script>即可，Cargo会自动加载远程的脚本资源。

内容的提问来源于stack exchange，提问作者mel