@splinetool/vue-spline

vue-spline

vue-spline allows you to export and use spline scenes directly in your vue websites.

🌈 Spline is a friendly 3d collaborative design tool for the web.

Website — Twitter — Discord — Documentation

Table of Contents

• Install
• Usage
  • Read and modify Spline objects
  • Listen to events
  • Trigger Spline events from outside
• API
  • Spline Component Props
  • Spline App Methods
  • Spline Events
• Contributing

Install

yarn add @splinetool/vue-spline @splinetool/runtime

or

npm install @splinetool/vue-spline @splinetool/runtime

Usage

To use vue-spline, first you have to go to the Spline editor, click on the Export button and select "Vue.js".

Spline generates links for Development (Drafts) and Production.

Drafts are generated each time you press on "Generate Draft". This will create a new link with the current content of the scene. All previous drafts are stored under the "Drafts" tab.

You can use the drafts to try ideas, and once you are ready, you can promote your drafts to production.

Once you have a draft or production URL, you can start using the vue-spline component in vue.

<template>
  <Spline scene="[DRAFT OR PROD URL]" />
</template>

<script>
import Spline from '@splinetool/vue-spline';
export default {
  name: 'App',
  components: {
    Spline,
  },
};
</script>

Read and modify Spline objects

You can query any Spline object via findObjectById or findObjectByName.

(You can get the ID of the object in the Develop pane of the right sidebar).

<template>
  <Spline scene="/scene.spline" @spline-loaded="onSplineLoaded" />
  <button @click="onClick">Move</button>
</template>

<script>
import Spline from '@splinetool/vue-spline';
export default {
  name: 'App',
  components: {
    Spline,
  },
  data() {
    return {
      obj: null,
    };
  },
  methods: {
    onSplineLoaded(spline) {
      this.obj = spline.findObjectById('8E8C2DDD-18B6-4C54-861D-7ED2519DE20E');
    },
    onClick() {
      if (this.obj) {
        console.log(this.obj); // Spline Object => { name: 'my object', id:'8E8C2DDD-18B6-4C54-861D-7ED2519DE20E', position: {}, ... }
        // move the object in 3D space
        this.obj.position.x += 10;
      }
    },
  },
};
</script>

Listen to events

You can listen to any Spline Event you set in the Events panel of the editor by attaching a listener to the Spline component.

<template>
  <Spline scene="/scene.spline" @spline-mousedown="onMouseDown" />
</template>

<script>
import Spline from '@splinetool/vue-spline';
export default {
  name: 'App',
  components: {
    Spline,
  },
  data() {
    return {
      obj: null,
    };
  },
  methods: {
    onMouseDown(e) {
      if (e.target.id === '8E8C2DDD-18B6-4C54-861D-7ED2519DE20E') {
        // doSomething();
      }
    },
  },
};
</script>

You can find a list of all of the Spline Event listeners in the Spline Component Props section.

Trigger Spline events from outside

You can trigger any animation Event you set in the Events panel in the Spline Editor.

You can use the emitEvent function via the spline ref, passing the event type and the ID of your object.

(You can get the ID of the object in the Develop pane of the right sidebar).

<template>
  <Spline scene="/scene.spline" @spline-loaded="onSplineLoaded" />
  <button @onClick="triggerAnimation">Trigger Spline Animation</button>
</template>

<script>
import Spline from '@splinetool/vue-spline';
export default {
  name: 'App',
  components: {
    Spline,
  },
  data() {
    return {
      spline: null,
    };
  },
  methods: {
    onSplineLoaded(spline) {
      this.spline = spline;
    },
    triggerAnimation({ target }) {
      this.spline.emitEvent(
        'mouseHover',
        '8E8C2DDD-18B6-4C54-861D-7ED2519DE20E'
      );
    },
  },
};
</script>

Or you can query the spline object first, and then trigger the event:

<template>
  <Spline scene="/scene.spline" @spline-loaded="onSplineLoaded" />
  <button @onClick="triggerAnimation">Trigger Spline Animation</button>
</template>

<script>
import Spline from '@splinetool/vue-spline';
export default {
  name: 'App',
  components: {
    Spline,
  },
  data() {
    return {
      obj: null,
    };
  },
  methods: {
    onSplineLoaded(spline) {
      this.obj = spline.findObjectById('8E8C2DDD-18B6-4C54-861D-7ED2519DE20E');
    },
    triggerAnimation({ target }) {
      this.obj.emitEvent('mouseHover');
    },
  },
};
</script>

You can find a list of all of the Spline Events you can pass to the emitEvent function in the Spline Events section.

API

Spline Component Props

These are all the props you can pass to the <Spline /> component.

Name	Type	Description
scene	string	Scene file
id?	string	Canvas id
auto-render?	boolean	Auto render canvas

Spline Component events

These are all the props you can pass to the <Spline /> component.

Name	Type	Description
@spline-loaded	(spline: Application) => void	Gets called once the scene has loaded. The spline parameter is an instance of the Spline Application
@spline-wheel	(e: SplineEvent) => void	Gets called on the wheel event on the canvas
@spline-mousedown	(e: SplineEvent) => void	Gets called once a Spline Mouse Down event is fired
@spline-mousehover	(e: SplineEvent) => void	Gets called once a Spline Mouse Hover event is fired
@spline-mouseup	(e: SplineEvent) => void	Gets called once a Spline Mouse Up event is fired
@spline-keydown	(e: SplineEvent) => void	Gets called once a Spline Key Down event is fired
@spline-keyup	(e: SplineEvent) => void	Gets called once a Spline Key Up event is fired
@spline-start	(e: SplineEvent) => void	Gets called once a Spline Start event is fired
@spline-lookat	(e: SplineEvent) => void	Gets called once a Spline Look At event is fired
@spline-follow	(e: SplineEvent) => void	Gets called once a Spline Mouse Up event is fired

Spline App Methods

The object exposed as a first argument of the onLoad function, is a Spline Application. You can call all these different methods on it.

Name	Type	Description
emitEvent	(eventName: SplineEventName, uuid: string) => void	Triggers a Spline event associated to an object with provided uuid in reverse order. Starts from first state to last state.
emitEventReverse	(eventName: SplineEventName, uuid: string) => void	Triggers a Spline event associated to an object with provided uuid in reverse order. Starts from last state to first state.
findObjectById	(uuid: string) => SPEObject	Searches through scene's children and returns the object with that uuid.
findObjectByName	(name: string) => SPEObject	Searches through scene's children and returns the first object with that name
setZoom	(zoom: number) => void	Sets the initial zoom of the scene.

Spline Events

These are all the Spline event types that you can pass to the emitEvent or emitEventReverse function.

Name	Description
mouseDown	Refers to the Spline Mouse Down event type
mouseHover	Refers to the Spline Mouse Hover event type
mouseUp	Refers to the Spline Mouse Up event type
keyDown	Refers to the Spline Key Down event type
keyUp	Refers to the Spline Key Up event type
start	Refers to the Spline Start event type
lookAt	Refers to the Spline Look At event type
follow	Refers to the Spline Mouse Up event type

Contributing

We use yarn, install the dependencies like this:

yarn

Development

Serve the example folder at localhost:3000

yarn dev

Build Library

yarn build

Publish on npm

yarn deploy