Cuttlefish Docs
  • 简体中文

    • spz-model-viewer 3D模型

    支持布局: container

    何时使用

    需要展示交互式的3D模型。

    代码演示

    基本用法

    最基本的用法，直接进入3D模型交互模式。当退出3D模型交互模式时，spz-model-viewer 元素会带有 prevent 属性标识。

    <div class="model-viewer-wrapper">
  <spz-model-viewer
    layout="container"
    src="https://shoplazza-model3d-stg.oss-accelerate.aliyuncs.com/d17da5bc68537fcc881bcd3830d034681667466703480.glb"
    alt="A robot 3D model"
    poster="https://img.staticdj.com/e986c6af0165839c50193078af8902e01667466703170.png"
  ></spz-model-viewer>
</div>

    默认不展示

    默认隐藏3D模型元素，使用 enter 方法来手动进入3D模型交互。

    <button @tap="model-viewer.toggleClass(class='hidden', force=false);model-viewer.enter;">Enter 3D model</button>

<div class="model-viewer-wrapper">
  <spz-model-viewer
    id="model-viewer"
    class="hidden"
    layout="container"
    src="https://shoplazza-model3d-stg.oss-accelerate.aliyuncs.com/d17da5bc68537fcc881bcd3830d034681667466703480.glb"
    alt="A robot 3D model"
    poster="https://img.staticdj.com/e986c6af0165839c50193078af8902e01667466703170.png"
  ></spz-model-viewer>
</div>

    属性

    属性名说明类型默认值是否必需
    poster封面图的srcstring-是
    src3D模型资源链接，资源类型为 glbstring-是
    user-control当存在此属性，且没有任何值时，不显示自定义操作控件--否

    方法

    enter

    进入3D模型操作模式，不需要参数。

    AI 摘要（LLM Ready）

    • 组件标识：spz-model-viewer
    • 用途一句话：展示交互式的3D模型。
    • 可识别属性条目：3
    • 可识别方法小节：1
    • 可识别事件小节：0
    • 关键属性名（Top）：poster、src、user-control
    • 关键方法名（Top）：enter
    • 关键事件名（Top）：无（待补充）
    • 阅读顺序建议：先看「何时使用」与「代码演示」，再核对属性/方法/事件。
    • 关联文档：/guide/actions-and-events/ 、/guide/layouts/