Vue GLTF UV 编辑器

一个基于 Vue 3 的 GLTF 模型查看和UV贴图实时替换组件。

安装

npm install vue-gltf-uv

基础用法

<template>
  <gltf-uv-editor ref="editor" />
</template>

<script setup>
import { ref } from 'vue'
import { GltfUvEditor } from 'vue-gltf-uv'

const editor = ref(null)
</script>

API 文档

方法

• setGltfModel(url: string, options?: object)

  • 设置 GLTF 模型
  • 参数:
    • url: 模型文件路径
    • options: 可选配置项
      • uvname: string[] - UV 贴图名称列表，默认 []
      • hdr: string - HDR 环境贴图路径，默认 ""
      • onFinish: () => void - 加载完成回调函数
      • onProgress: (progress: number) => void - 加载进度回调函数

• setUV(canvas: HTMLCanvasElement, uvname: string)

  • 更新模型的 UV 贴图
  • 参数:
    • canvas: 包含 UV 贴图的 Canvas 元素
    • uvname: UV 贴图名称

• changeCamera(name: string)

  • 切换相机视角
  • 参数:
    • name: 相机名称

• setAutoRotate(autoRotate: boolean)

  • 设置模型自动旋转
  • 参数:
    • autoRotate: true 开启自动旋转，false 关闭

• setCameraRules(snapshotRule?: RegExp | string, faceRule?: RegExp | string)

  • 设置相机规则
  • 参数:
    • snapshotRule: 快照相机规则（可选）
    • faceRule: 视角相机规则（可选）

• getSnapshot(width?: number, height?: number, useAnimation?: boolean, targetElement?: HTMLElement)

  • 获取模型快照
  • 参数:
    • width: 快照宽度，默认 800
    • height: 快照高度，默认 800
    • useAnimation: 是否使用动画效果，默认 false
    • targetElement: 动画效果最终飞向的目标 DOM 元素，仅在 useAnimation 为 true 时有效
  • 返回: Promise<{blob: Blob, url: string}[]>

• updateTexture(uvname: string)

  • 更新指定贴图
  • 参数:
    • uvname: 贴图名称

• lockCamera(lock: boolean)

  • 锁定/解锁相机移动
  • 参数:
    • lock: true 锁定相机，false 解锁相机

• enableZoom(enabled: boolean)

  • 启用/禁用鼠标滚轮缩放功能
  • 参数:
    • enabled: true 启用滚轮缩放，false 禁用滚轮缩放

• clearAll()

  • 清空渲染画布，恢复到初始状态