Vue 3 Spline 3d动画加载

1. 如果你使用npm:

   ▼
   bash
   复制代码
   npm install vue3-spline@latest --save
   

2. 如果你使用的是yarn:

   ▼
   bash
   复制代码
   yarn add vue3-spline@latest
   

3. 全局注册组件

   ▼
   js
   复制代码
   // main.js
   import { createApp } from 'vue'
   import Vue3Spline from 'vue3-spline'
   
   createApp(App).use(Vue3Spline).mount('#app')
   

4. 本地导入组件

   ▼
   js
   复制代码
   import { Vue3Spline } from 'vue3-spline'
   
   export default {
     components: {
       Vue3Spline,
     },
   }
   

5. 在模板中使用该组件

   ▼
   js
   复制代码
   <template>
     <Vue3Spline
       :scene="{
         url: 'https://prod.spline.design/VXwvUCucezeKhYSq/scene.splinecode',
       }"
     />
   </template>
   
   <script>
   import { Vue3Spline } from 'vue3-spline'
   
   export default {
     components: {
       Vue3Spline,
     },
   }
   </script>
   

6. 在Spline 3d软件中导出代码或使用url地址，如下图

7. 运行结果