UFUse（1.6.2）

Appearance

On this page

SplineView ​

Spline 在 Vue 组件上的实现

依赖项：@splinetool/runtime

使用 ​

vue
<script setup lang="ts">
/* eslint-disable no-console */
import type { SplineEvent } from '@splinetool/runtime'
import type { SplineViewInstance } from 'ufuse/src/components/SplineView/types'
import SplineView from 'ufuse/src/components/SplineView/index.vue'
import { onMounted, ref } from 'vue'
import scene from './scene.splinecode?url'

const splineView = ref<SplineViewInstance>()

function handleMouseDown(event: SplineEvent) {
  if (event.target.name === 'Little')
    console.log('Little clicked!')
  if (event.target.name === 'Big')
    console.log('Big clicked!')
}

onMounted(async () => {
  try {
    const spline = await splineView.value!.getSpline()
    console.log(spline)
  }
  catch (err) { }
})
</script>

<template>
  <div
    class="demo"
    @wheel.prevent
    @touchmove.prevent
  >
    <div class="w-full h-[300px]">
      <SplineView
        ref="splineView"
        :scene="scene"
        @mouse-down="handleMouseDown"
      />
    </div>
  </div>
</template>

预览 ​

API ​

ts
import type { Application, SplineEvent } from '@splinetool/runtime'

export interface SplineViewProps {
  /**
   * splinecode 文件地址
   */
  scene: string
  onMouseDown?: (event: SplineEvent) => void
  onMouseHover?: (event: SplineEvent) => void
  onMouseUp?: (event: SplineEvent) => void
  onKeyDown?: (event: SplineEvent) => void
  onKeyUp?: (event: SplineEvent) => void
  onStart?: (event: SplineEvent) => void
  onLookAt?: (event: SplineEvent) => void
  onFollow?: (event: SplineEvent) => void
  onScroll?: (event: SplineEvent) => void
}

export interface SplineViewInstance {
  /**
   * 获取已成功加载 scene 的 spline 实例
   * 若加载 scene 发生错误，promise 会被 reject
   */
  getSpline(): Promise<Application>
}

贡献者 ​

xieyuhang