CODEWITHSUNDEEP
javascriptruntime-errorspline
Mario Martínez
Mario Martínez

Reputation: 1

Error Importing by code a Spline Scene into my web (Vanilla js) (Spline Runtime)

When I´m trying to import my Spline 3D model into my web, I get this error: "index.html:1 Uncaught TypeError: Failed to resolve module specifier "@splinetool/runtime". Relative references must start with either "/", "./", or "../"."

My HTML:

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="css/styles.css">
    <title>Vastro - The number one space trips company</title>
</head>
<body>
    <header>
        <div class="container-fluid home" id="home">
            <div class="row align-items-center home">
                <div class="col-6 ps-5 text-center text-white">
                    <h1>WELCOME TO <span class="vastro">VASTRO</span></h1>
                </div>
                <div class="col-6">
                    <canvas id="canvas3d"></canvas>
                </div>
            </div>
        </div>
    </header>

    <script type="module" src="js/spaceship.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
</body>
</html>

And my js:

import { Application } from '@splinetool/runtime';

const canvas = document.getElementById('canvas3d');
const app = new Application(canvas);
app.load('https://prod.spline.design/LwlsBLuKMVE3xr16/scene.splinecode');

I´ve previously installed the dependencies with npm install @splinetool/runtime. Any idea of what could be happening?

I´ve tried deleting all the proyect and doing it again in other directories and hosting with diferents tools (http-server and open live server)

Upvotes: 0

Views: 1160

Answers (2)

Pinkmetal01
Pinkmetal01

Reputation: 1

Use this instead in import line:

import { Application } from './node_modules/@splinetool/runtime/build/runtime.js';

Upvotes: 0

Nate Kling
Nate Kling

Reputation: 1

I ran into this issue and while I couldn't solve it directly, I did have success using the 'download bundled zip(web content)' option from Spline. That zip seems to contain the necessary js scripts in it and I just use the example code provided in the zip and I was able to modify objects , change background colors, etc. from there.

Upvotes: 0

Related Questions