Public URL (Best for Webflow)

https://my.spline.design/untitled-39d8563195ee11b692feb2e715aa337b/

Viewer Link

https://prod.spline.design/38izIFxayexK7r0b/scene.splinecode

Copy Embed (Best for Framer)

<script type="module" src="<https://unpkg.com/@splinetool/[email protected]/build/spline-viewer.js>"></script>
<spline-viewer url="<https://prod.spline.design/38izIFxayexK7r0b/scene.splinecode>"></spline-viewer>

Code Exports

Vanilla JS

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

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

Three.JS

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import SplineLoader from '@splinetool/loader';

// camera
const camera = new THREE.OrthographicCamera(window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2,  -50000, 10000);
camera.position.set(0, 0, 0);
camera.quaternion.setFromEuler(new THREE.Euler(0, 0, 0));

// scene
const scene = new THREE.Scene();

// spline scene
const loader = new SplineLoader();
loader.load(
  '<https://prod.spline.design/38izIFxayexK7r0b/scene.splinecode>',
  (splineScene) => {
    scene.add(splineScene);
  }
);

// renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setAnimationLoop(animate);
document.body.appendChild(renderer.domElement);

// scene settings
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFShadowMap;

scene.background = new THREE.Color('#000000');
renderer.setClearAlpha(0);

// orbit controls
const controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;
controls.dampingFactor = 0.125;

window.addEventListener('resize', onWindowResize);
function onWindowResize() {
  camera.left = window.innerWidth / - 2;
  camera.right = window.innerWidth / 2;
  camera.top = window.innerHeight / 2;
  camera.bottom = window.innerHeight / - 2;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
}

function animate(time) {
  controls.update();
  renderer.render(scene, camera);
}

React

import Spline from '@splinetool/react-spline';

export default function App() {
  return (
    <Spline scene="<https://prod.spline.design/38izIFxayexK7r0b/scene.splinecode>" />
  );
}