@splinetool/viewer 0.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +63 -0
- package/build/viewer.js +56785 -0
- package/package.json +49 -0
- package/src/constants.ts +1 -0
- package/src/spline-viewer.ts +221 -0
- package/src/test/spline-viewer_test.ts +43 -0
package/README.md
ADDED
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
# `<spline-viewer>`
|
|
2
|
+
|
|
3
|
+
## Quickstart
|
|
4
|
+
|
|
5
|
+
```html
|
|
6
|
+
<!-- Import the component -->
|
|
7
|
+
<script
|
|
8
|
+
type="module"
|
|
9
|
+
src="https://unpkg.com/@splinetool/spline-viewer/dist/spline-viewer.min.js"
|
|
10
|
+
></script>
|
|
11
|
+
|
|
12
|
+
<!-- Use it like any other HTML element -->
|
|
13
|
+
<spline-viewer
|
|
14
|
+
url="https://prod.spline.design/iEAs8HJFu91daMOq/scene.splinecode"
|
|
15
|
+
></spline-viewer>
|
|
16
|
+
```
|
|
17
|
+
|
|
18
|
+
## Installing
|
|
19
|
+
|
|
20
|
+
The `<spline-viewer>` web component can be installed from [NPM](https://npmjs.org):
|
|
21
|
+
|
|
22
|
+
```sh
|
|
23
|
+
npm install @splinetool/spline-viewer
|
|
24
|
+
```
|
|
25
|
+
|
|
26
|
+
It can also be used directly from various free CDNs such as [unpkg.com](https://unpkg.com):
|
|
27
|
+
|
|
28
|
+
```html
|
|
29
|
+
<script
|
|
30
|
+
type="module"
|
|
31
|
+
src="https://unpkg.com/@splinetool/spline-viewer/dist/spline-viewer.min.js"
|
|
32
|
+
></script>
|
|
33
|
+
```
|
|
34
|
+
|
|
35
|
+
## Options
|
|
36
|
+
|
|
37
|
+
### `url`
|
|
38
|
+
|
|
39
|
+
The url of your Spline export. ex: `https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode`.
|
|
40
|
+
|
|
41
|
+
### `width` (optional)
|
|
42
|
+
|
|
43
|
+
The desired width of the viewer in pixels. Ex: `width="400"`.
|
|
44
|
+
|
|
45
|
+
### `height` (optional)
|
|
46
|
+
|
|
47
|
+
The desired height of the viewer in pixels. Ex: `height="400"`
|
|
48
|
+
|
|
49
|
+
### `background` (optional)
|
|
50
|
+
|
|
51
|
+
A css like color that will override the background color of your scene as it was set in the editor. Ex: `background="#ff0000"`.
|
|
52
|
+
|
|
53
|
+
### `loading` (optional)
|
|
54
|
+
|
|
55
|
+
This option controls the agressiveness of the preload of your scene. Possible values are `auto`, `lazy` and `eager`. By default (`auto`) the behavior is to `lazy` load the scene and only start to preload when the tag enters the viewport. If you need to start loading immediately then you can set `loading="eager"` instead.
|
|
56
|
+
|
|
57
|
+
## Exporting for `<spline-viewer` from Spline editor
|
|
58
|
+
|
|
59
|
+
If you want a scene to be loaded by the `<spline-viewer>` component, you need to export it from Spline editor using the `Spline Viewer` export type. First click on the Export button from the toolbar, then click on the `Spline Viewer` tab on the sidebar of the export modal. Finally click on update and when export is done you can copy paste the code snippet or the exported URL.
|
|
60
|
+
|
|
61
|
+
## Listening for events outside of the canvas
|
|
62
|
+
|
|
63
|
+
In case you need the events to be able to listen for your movements outside of the canvas (exemple: a look at event that follow your mouse outside of the canvas), you can set the `Mouse Events` option to `From full window` inside the `Spline Viewer` export options.
|