@splinetool/runtime 0.9.72 → 0.9.75
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 +21 -21
- package/build/runtime.cjs +1190 -1191
- package/build/runtime.js +1190 -1191
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -27,8 +27,8 @@ import { Application } from '@splinetool/runtime';
|
|
|
27
27
|
const canvas = document.getElementById('canvas3d');
|
|
28
28
|
|
|
29
29
|
// start the application and load the scene
|
|
30
|
-
const
|
|
31
|
-
|
|
30
|
+
const spline = new Application(canvas);
|
|
31
|
+
spline.load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode');
|
|
32
32
|
```
|
|
33
33
|
|
|
34
34
|
You should be able to see the scene you exported in your canvas.
|
|
@@ -45,15 +45,15 @@ _(You can get the ID of the object in the `Develop` pane of the right sidebar)._
|
|
|
45
45
|
import { Application } from '@splinetool/runtime';
|
|
46
46
|
|
|
47
47
|
const canvas = document.getElementById('canvas3d');
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
.load('https://prod.spline.design/
|
|
48
|
+
const spline = new Application(canvas);
|
|
49
|
+
spline
|
|
50
|
+
.load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode')
|
|
51
51
|
.then(() => {
|
|
52
|
-
const obj = spline.findObjectByName('
|
|
52
|
+
const obj = spline.findObjectByName('Cube');
|
|
53
53
|
// or
|
|
54
|
-
// const obj = spline.findObjectById('
|
|
54
|
+
// const obj = spline.findObjectById('7AF5EBC0-09BB-4720-B045-F478F8053AA4');
|
|
55
55
|
|
|
56
|
-
console.log(obj); // Spline Object => { name: '
|
|
56
|
+
console.log(obj); // Spline Object => { name: 'Cube', id: '7AF5EBC0-09BB-4720-B045-F478F8053AA4', position: {}, ... }
|
|
57
57
|
|
|
58
58
|
// move the object in 3D space
|
|
59
59
|
obj.position.x += 10;
|
|
@@ -68,12 +68,12 @@ You can listen to any Spline Event you set in the Events panel of the editor by
|
|
|
68
68
|
import { Application } from '@splinetool/runtime';
|
|
69
69
|
|
|
70
70
|
const canvas = document.getElementById('canvas3d');
|
|
71
|
-
const
|
|
72
|
-
|
|
73
|
-
.load('https://prod.spline.design/
|
|
71
|
+
const spline = new Application(canvas);
|
|
72
|
+
spline
|
|
73
|
+
.load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode')
|
|
74
74
|
.then(() => {
|
|
75
|
-
|
|
76
|
-
if (e.target.name === '
|
|
75
|
+
spline.addEventListener('mousedown', (e) => {
|
|
76
|
+
if (e.target.name === 'Cube') {
|
|
77
77
|
console.log('I have been clicked!');
|
|
78
78
|
}
|
|
79
79
|
});
|
|
@@ -94,11 +94,11 @@ _(You can get the ID of the object in the `Develop` pane of the right sidebar)._
|
|
|
94
94
|
import { Application } from '@splinetool/runtime';
|
|
95
95
|
|
|
96
96
|
const canvas = document.getElementById('canvas3d');
|
|
97
|
-
const
|
|
98
|
-
|
|
99
|
-
.load('https://prod.spline.design/
|
|
97
|
+
const spline = new Application(canvas);
|
|
98
|
+
spline
|
|
99
|
+
.load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode')
|
|
100
100
|
.then(() => {
|
|
101
|
-
|
|
101
|
+
spline.emitEvent('mouseHover', 'Cube');
|
|
102
102
|
});
|
|
103
103
|
```
|
|
104
104
|
|
|
@@ -108,11 +108,11 @@ Or you can query the spline object first, and then trigger the event:
|
|
|
108
108
|
import { Application } from '@splinetool/runtime';
|
|
109
109
|
|
|
110
110
|
const canvas = document.getElementById('canvas3d');
|
|
111
|
-
const
|
|
112
|
-
|
|
113
|
-
.load('https://prod.spline.design/
|
|
111
|
+
const spline = new Application(canvas);
|
|
112
|
+
spline
|
|
113
|
+
.load('https://prod.spline.design/6Wq1Q7YGyM-iab9i/scene.splinecode')
|
|
114
114
|
.then(() => {
|
|
115
|
-
const obj = spline.findObjectByName('
|
|
115
|
+
const obj = spline.findObjectByName('Cube');
|
|
116
116
|
objectToAnimate.emitEvent('mouseHover');
|
|
117
117
|
});
|
|
118
118
|
```
|