我对 vue 还很陌生，我一直在尝试使用 spline 3d 制作一个交互式网站。当谈到 React 时，splinetool 有它的用于 ReactJS 的 owm 库。但我找不到 Vue 的。我尝试导入 @splinetool/runtime 并将其导出。它有效，但 3D 场景没有捕获任何事件。我知道这不是一个好方法，我仍在学习。有人可以解释如何将其作为 vue 组件导入或仅将其呈现在 vue 应用程序旁边吗？我们也可以用同样的方法在 Nuxtjs 中使用样条线吗？
main.js
import './assets/main.css'
import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import { Application } from "@splinetool/runtime";
const canvas = document.getElementById("spline3d");
const spline = new Application(canvas);
spline.load('splineUrl')
.then(() => {
const obj = spline.findObjectByName('sphere');
objectToAnimate.emitEvent('follow');
});
const app = createApp(App)
app.use(router)
app.mount('#app')
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<canvas id="spline3d">
</canvas>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
尝试使用 @splinetool/runtime 导入它，因为没有任何 vue 库
我不知道你是否找到了另一种方法，但这对我有用。
<script setup>
import { Application } from '@splinetool/runtime';
// template ref
const canvas = ref(null)
// spline state
const state = reactive({
spline: {
scene: "https://prod.spline.design/<your-spline-scene-url>/scene.splinecode",
app: null,
isLoaded: false,
},
});
onMounted(async () =>{
const app = new Application(canvas.value);
await app.load(state.spline.scene)
state.spline.app = app;
state.spline.isLoaded = true;
})
<script>
<template>
<section>
<canvas ref="canvas" />
</section>
</template>
顺便说一句...我使用
Code export(Beta)