Astro 和 Spline

Question

我想在 Astro 中添加样条动画，但我不知道如何添加。我不想为了使用它而集成 React。有一个 Vanilla JS 示例，但我在导入组件时遇到问题。

我将分享 Spline 提供的代码导出片段，但我不知道如何将其集成到现有的 Astro 组件中。

import { Application } from '@splinetool/runtime';
const canvas = document.getElementById('canvas3d');
const app = new Application(canvas);
app.load('https://prod.spline.design/animation-id/scene.splinecode');

Answer 1

在您

npm install @splinetool/runtime

之后，您应该能够在您的

.astro

组件中使用这样的样条线

<canvas id="canvas3d"></canvas>

<script>
    import { Application } from '@splinetool/runtime';
    const canvas = document.getElementById('canvas3d');

    if (canvas instanceof HTMLCanvasElement) {
        const app = new Application(canvas);
        app.load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode');
    } else {
        console.error('Canvas element not found');
    }
</script>