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>
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>" />
);
}