spz-model-viewer#

#When to Use

When you need to display interactive 3D models.

#Code Demonstration

#Basic Usage

The most basic usage, directly enter the 3D model interaction mode. When exiting the 3D model interaction mode, the spz-model-viewer element will have a prevent attribute flag.

<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>

#Default Not Displayed

By default, the 3D model element is hidden, use the enter method to manually enter the 3D model interaction.

<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>

#Properties

#Methods

#enter

#Enter the 3D model operation mode, no parameters required.

#AI Summary (LLM Ready)

• Component ID: spz-model-viewer
• One-line purpose: Displays interactive 3D models.
• Detected attribute rows: 0
• Detected method subsections: 1
• Detected event subsections: 0
• Top attribute names: none (needs manual completion)
• Top method names: enter
• Top event names: none (needs manual completion)
• Reading order: start from usage/examples, then verify attributes, methods, and events.
• Related docs: /en/guide/actions-and-events/ , /en/guide/layouts/