Jon Snow

15 Sept, 2023

How to embed Spline design

Nowadays 3d animation is the best choice for developers. many 3d animation libraries are built like three js, anime js and many more but today we talk about spline design.

Spline Design

Spline is an easy-to-use 3D design tool for any designer regardless of their 3D experience. It's simpler to learn than full-featured 3D apps - such as Cinema 4D or Blender because it doesn't bog you down with loads and loads of settings and features.

Best of all, it is browser-based and FREE, so literally anyone can use it no matter what computer you have!

Examples

How do I embed a Spline into my website?

Step - 1 From these examples, you can pick any design you like

Spline Design Example

Step - 2 Open it

There is an option to export this design.

This design can be exported in multiple ways

1. Public Url

The "Public URL" link is usually used to share your scene via a link. While the Embed code is used to embed your scene in other tools like Notion, Webflow, WordPress, Framer, Typedream, etc.

• Once you're happy with your scene, press the Export button on the toolbar.
• Select "Public URL" from the left and wait for the URL to be generated.
• A toast notification will appear to let you know that your URL is ready.
• You can copy the Public URL or the Embed code.
• There are multiple properties that can be adjusted under Play settings, such as the camera, toggles for enabling/disabling orbit, pan, zoom, soft orbit, page scroll, and actions on hover, as well as orbit and pan touch settings, orbit limits, pan limits, zoom limits, and animated turntable.
• If there are any additional changes on the scene or export settings, click update for the URL to reflect the latest changes.

Embed code

<iframe
  src="https://my.spline.design/miniroomartcopy-51fb8d8402219e5b621015be7fae806d/"
  frameborder="0"
  width="100%"
  height="100%"
></iframe>

Public url of design

https://my.spline.design/miniroomartcopy-51fb8d8402219e5b621015be7fae806d/

Read More

2. Exporting as Viewer

Spline Viewer is a more flexible way of embedding your Spline scenes into your websites.

<spline-viewer>

Demos

For interactive demos, check out

• viewer.spline.design
• viewer3d.framer.website

Copy embed code

<script
  type="module"
  src="https://unpkg.com/@splinetool/viewer@0.9.374/build/spline-viewer.js"
></script>

<spline-viewer
  url="https://prod.spline.design/S8o9DE-254xyJ0lv/scene.splinecode"
></spline-viewer>

Read More

3. Exporting as Code

Spline allows you to export the code of your scene as:

• Vanilla JS
• Three.js
• React JS
• react-three-fiber

You can copy the code, open it as a CodeSandbox project, or download the local files to host it yourself.

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

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

Read More

You can also export as

4. Exporting as Image
5. Exporting as Frame Video Recording

More Exports

How do I embed a Spline design communities design in website?

https://app.spline.design/community/explore

Step 1: Browsing Community Designs

• Open the Spline design website and navigate to the Community page.
• Explore the various design options available in the community. You can find inspiration or select a design that suits your website's requirements.

Step 2: Applying a Community Design

• Once you've found a design you'd like to use, click on it to view its details.
• Look for the "Remix" button, which allows you to personalize the design for your website.
• Click the "Remix" button to create a copy of the design that you can modify and make your own.

Step 3: Modifying the Design

• After remixing the design, you'll be redirected to the Spline editor where you can make changes.

• Use the Spline editor's tools and features to customize the design according to your preferences.

• Adjust colors, shapes, animations, and other elements to match your website's branding and style.

Step - 4: Export The Design

• I already shared the export options above. You can export the design as a viewer, code, image, video, and gltf.

Thank You ❤

Related Post