<model-viewer /> 将模型重置到初始状态

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
const model = ref(null)
const renderKey = ref(0)
const router = useRouter()

const resetModel = () => {
  renderKey.value += 1
}
</script>

<template>
  <div class="model-viewer">
    <div class="back" @click="router.push('/')"></div>
    <model-viewer
      ref="model"
      src="../../public/tmodel.glb"
      class="model-viewer"
      alt="A 3D model of something"
      ar
      camera-controls
      shadow-intensity="1"
      max-camera-orbit="auto auto auto"
      min-camera-orbit="auto auto 0"
      auto-rotate
      :key="renderKey"
    >
    </model-viewer>
    <div class="reset-btn" @click="resetModel"></div>
    <!-- <ModelPreview /> -->
  </div>
</template>

只需要将model-viewer重新渲染即可