spz-model-viewer 3D模型

展示交互式的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	封面图的src	string	-	是
src	3D模型资源链接，资源类型为 `glb`	string	-	是
user-control	当存在此属性，且没有任何值时，不显示自定义操作控件	-	-	否

方法

enter

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