spz-model-viewer 3D模型

展示交互式的3D模型。

布局

何时使用

需要展示交互式的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	封面图的src	string	-	是
src	3D模型资源链接，资源类型为 `glb`	string	-	是
user-control	当存在此属性，且没有任何值时，不显示自定义操作控件	-	-	否
alt	3D模型的描述文字，用于无障碍访问	string	-	否
ar	当存在此属性时，启用AR（增强现实）功能	-	-	否
ar-mode	AR模式，控制AR展示方式，例如 `webxr scene-viewer quick-look`	string	-	否
seamless-poster	当存在此属性时，在模型加载完成前保持封面图无缝过渡	-	-	否
loading	模型加载策略，控制何时开始加载3D资源	string	-	否
reveal	模型显示时机，控制何时显示模型	string	-	否
auto-rotate	当存在此属性时，启用模型自动旋转	-	-	否

方法

enter

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