@playcanvas/web-components 0.2.12 → 0.5.0

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.
Files changed (41) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +84 -84
  3. package/dist/components/element-component.d.ts +12 -0
  4. package/dist/components/light-component.d.ts +48 -0
  5. package/dist/components/splat-component.d.ts +0 -13
  6. package/dist/pwc.cjs +298 -207
  7. package/dist/pwc.cjs.map +1 -1
  8. package/dist/pwc.js +298 -207
  9. package/dist/pwc.js.map +1 -1
  10. package/dist/pwc.min.js +1 -1
  11. package/dist/pwc.min.js.map +1 -1
  12. package/dist/pwc.mjs +299 -208
  13. package/dist/pwc.mjs.map +1 -1
  14. package/package.json +76 -64
  15. package/src/app.ts +612 -606
  16. package/src/asset.ts +159 -159
  17. package/src/async-element.ts +46 -46
  18. package/src/colors.ts +150 -150
  19. package/src/components/camera-component.ts +557 -557
  20. package/src/components/collision-component.ts +183 -183
  21. package/src/components/component.ts +97 -97
  22. package/src/components/element-component.ts +367 -341
  23. package/src/components/light-component.ts +570 -466
  24. package/src/components/listener-component.ts +30 -30
  25. package/src/components/particlesystem-component.ts +155 -155
  26. package/src/components/render-component.ts +147 -147
  27. package/src/components/rigidbody-component.ts +227 -227
  28. package/src/components/screen-component.ts +157 -157
  29. package/src/components/script-component.ts +270 -270
  30. package/src/components/script.ts +90 -90
  31. package/src/components/sound-component.ts +230 -230
  32. package/src/components/sound-slot.ts +288 -288
  33. package/src/components/splat-component.ts +102 -133
  34. package/src/entity.ts +360 -360
  35. package/src/index.ts +63 -63
  36. package/src/material.ts +141 -141
  37. package/src/model.ts +111 -111
  38. package/src/module.ts +43 -43
  39. package/src/scene.ts +217 -217
  40. package/src/sky.ts +293 -293
  41. package/src/utils.ts +71 -71
@@ -1,90 +1,90 @@
1
- /**
2
- * The ScriptElement interface provides properties and methods for manipulating
3
- * `<pc-script>` elements. The ScriptElement interface also inherits the properties and
4
- * methods of the {@link HTMLElement} interface.
5
- */
6
- class ScriptElement extends HTMLElement {
7
- private _attributes: string = '{}';
8
-
9
- private _enabled: boolean = true;
10
-
11
- private _name: string = '';
12
-
13
- /**
14
- * Sets the attributes of the script.
15
- * @param value - The attributes of the script.
16
- */
17
- set scriptAttributes(value: string) {
18
- this._attributes = value;
19
- this.dispatchEvent(new CustomEvent('scriptattributeschange', {
20
- detail: { attributes: value },
21
- bubbles: true
22
- }));
23
- }
24
-
25
- /**
26
- * Gets the attributes of the script.
27
- * @returns The attributes of the script.
28
- */
29
- get scriptAttributes() {
30
- return this._attributes;
31
- }
32
-
33
- /**
34
- * Sets the enabled state of the script.
35
- * @param value - The enabled state of the script.
36
- */
37
- set enabled(value: boolean) {
38
- this._enabled = value;
39
- this.dispatchEvent(new CustomEvent('scriptenablechange', {
40
- detail: { enabled: value },
41
- bubbles: true
42
- }));
43
- }
44
-
45
- /**
46
- * Gets the enabled state of the script.
47
- * @returns The enabled state of the script.
48
- */
49
- get enabled() {
50
- return this._enabled;
51
- }
52
-
53
- /**
54
- * Sets the name of the script to create.
55
- * @param value - The name.
56
- */
57
- set name(value: string) {
58
- this._name = value;
59
- }
60
-
61
- /**
62
- * Gets the name of the script.
63
- * @returns The name.
64
- */
65
- get name() {
66
- return this._name;
67
- }
68
-
69
- static get observedAttributes() {
70
- return ['attributes', 'enabled', 'name'];
71
- }
72
-
73
- attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
74
- switch (name) {
75
- case 'attributes':
76
- this.scriptAttributes = newValue;
77
- break;
78
- case 'enabled':
79
- this.enabled = newValue !== 'false';
80
- break;
81
- case 'name':
82
- this.name = newValue;
83
- break;
84
- }
85
- }
86
- }
87
-
88
- customElements.define('pc-script', ScriptElement);
89
-
90
- export { ScriptElement };
1
+ /**
2
+ * The ScriptElement interface provides properties and methods for manipulating
3
+ * `<pc-script>` elements. The ScriptElement interface also inherits the properties and
4
+ * methods of the {@link HTMLElement} interface.
5
+ */
6
+ class ScriptElement extends HTMLElement {
7
+ private _attributes: string = '{}';
8
+
9
+ private _enabled: boolean = true;
10
+
11
+ private _name: string = '';
12
+
13
+ /**
14
+ * Sets the attributes of the script.
15
+ * @param value - The attributes of the script.
16
+ */
17
+ set scriptAttributes(value: string) {
18
+ this._attributes = value;
19
+ this.dispatchEvent(new CustomEvent('scriptattributeschange', {
20
+ detail: { attributes: value },
21
+ bubbles: true
22
+ }));
23
+ }
24
+
25
+ /**
26
+ * Gets the attributes of the script.
27
+ * @returns The attributes of the script.
28
+ */
29
+ get scriptAttributes() {
30
+ return this._attributes;
31
+ }
32
+
33
+ /**
34
+ * Sets the enabled state of the script.
35
+ * @param value - The enabled state of the script.
36
+ */
37
+ set enabled(value: boolean) {
38
+ this._enabled = value;
39
+ this.dispatchEvent(new CustomEvent('scriptenablechange', {
40
+ detail: { enabled: value },
41
+ bubbles: true
42
+ }));
43
+ }
44
+
45
+ /**
46
+ * Gets the enabled state of the script.
47
+ * @returns The enabled state of the script.
48
+ */
49
+ get enabled() {
50
+ return this._enabled;
51
+ }
52
+
53
+ /**
54
+ * Sets the name of the script to create.
55
+ * @param value - The name.
56
+ */
57
+ set name(value: string) {
58
+ this._name = value;
59
+ }
60
+
61
+ /**
62
+ * Gets the name of the script.
63
+ * @returns The name.
64
+ */
65
+ get name() {
66
+ return this._name;
67
+ }
68
+
69
+ static get observedAttributes() {
70
+ return ['attributes', 'enabled', 'name'];
71
+ }
72
+
73
+ attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
74
+ switch (name) {
75
+ case 'attributes':
76
+ this.scriptAttributes = newValue;
77
+ break;
78
+ case 'enabled':
79
+ this.enabled = newValue !== 'false';
80
+ break;
81
+ case 'name':
82
+ this.name = newValue;
83
+ break;
84
+ }
85
+ }
86
+ }
87
+
88
+ customElements.define('pc-script', ScriptElement);
89
+
90
+ export { ScriptElement };
@@ -1,230 +1,230 @@
1
- import { SoundComponent } from 'playcanvas';
2
-
3
- import { ComponentElement } from './component';
4
-
5
- /**
6
- * The SoundComponentElement interface provides properties and methods for manipulating
7
- * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-sounds/ | `<pc-sounds>`} elements.
8
- * The SoundComponentElement interface also inherits the properties and methods of the
9
- * {@link HTMLElement} interface.
10
- *
11
- * @category Components
12
- */
13
- class SoundComponentElement extends ComponentElement {
14
- private _distanceModel: 'exponential' | 'inverse' | 'linear' = 'linear';
15
-
16
- private _maxDistance: number = 10000;
17
-
18
- private _pitch: number = 1;
19
-
20
- private _positional: boolean = false;
21
-
22
- private _refDistance: number = 1;
23
-
24
- private _rollOffFactor: number = 1;
25
-
26
- private _volume: number = 1;
27
-
28
- /** @ignore */
29
- constructor() {
30
- super('sound');
31
- }
32
-
33
- getInitialComponentData() {
34
- return {
35
- distanceModel: this._distanceModel,
36
- maxDistance: this._maxDistance,
37
- pitch: this._pitch,
38
- positional: this._positional,
39
- refDistance: this._refDistance,
40
- rollOffFactor: this._rollOffFactor,
41
- volume: this._volume
42
- };
43
- }
44
-
45
- /**
46
- * Gets the underlying PlayCanvas sound component.
47
- * @returns The sound component.
48
- */
49
- get component(): SoundComponent | null {
50
- return super.component as SoundComponent | null;
51
- }
52
-
53
- /**
54
- * Sets which algorithm to use to reduce the volume of the sound as it moves away from the listener.
55
- * @param value - The distance model.
56
- */
57
- set distanceModel(value: 'exponential' | 'inverse' | 'linear') {
58
- this._distanceModel = value;
59
- if (this.component) {
60
- this.component.distanceModel = value;
61
- }
62
- }
63
-
64
- /**
65
- * Gets which algorithm to use to reduce the volume of the sound as it moves away from the listener.
66
- * @returns The distance model.
67
- */
68
- get distanceModel(): 'exponential' | 'inverse' | 'linear' {
69
- return this._distanceModel;
70
- }
71
-
72
- /**
73
- * Sets the maximum distance from the listener at which audio falloff stops.
74
- * @param value - The max distance.
75
- */
76
- set maxDistance(value: number) {
77
- this._maxDistance = value;
78
- if (this.component) {
79
- this.component.maxDistance = value;
80
- }
81
- }
82
-
83
- /**
84
- * Gets the maximum distance from the listener at which audio falloff stops.
85
- * @returns The max distance.
86
- */
87
- get maxDistance() {
88
- return this._maxDistance;
89
- }
90
-
91
- /**
92
- * Sets the pitch of the sound.
93
- * @param value - The pitch.
94
- */
95
- set pitch(value: number) {
96
- this._pitch = value;
97
- if (this.component) {
98
- this.component.pitch = value;
99
- }
100
- }
101
-
102
- /**
103
- * Gets the pitch of the sound.
104
- * @returns The pitch.
105
- */
106
- get pitch() {
107
- return this._pitch;
108
- }
109
-
110
- /**
111
- * Sets the positional flag of the sound.
112
- * @param value - The positional flag.
113
- */
114
- set positional(value: boolean) {
115
- this._positional = value;
116
- if (this.component) {
117
- this.component.positional = value;
118
- }
119
- }
120
-
121
- /**
122
- * Gets the positional flag of the sound.
123
- * @returns The positional flag.
124
- */
125
- get positional() {
126
- return this._positional;
127
- }
128
-
129
- /**
130
- * Sets the reference distance for reducing volume as the sound source moves further from the listener. Defaults to 1.
131
- * @param value - The ref distance.
132
- */
133
- set refDistance(value: number) {
134
- this._refDistance = value;
135
- if (this.component) {
136
- this.component.refDistance = value;
137
- }
138
- }
139
-
140
- /**
141
- * Gets the reference distance for reducing volume as the sound source moves further from the listener.
142
- * @returns The ref distance.
143
- */
144
- get refDistance() {
145
- return this._refDistance;
146
- }
147
-
148
- /**
149
- * Sets the factor used in the falloff equation. Defaults to 1.
150
- * @param value - The roll-off factor.
151
- */
152
- set rollOffFactor(value: number) {
153
- this._rollOffFactor = value;
154
- if (this.component) {
155
- this.component.rollOffFactor = value;
156
- }
157
- }
158
-
159
- /**
160
- * Gets the factor used in the falloff equation.
161
- * @returns The roll-off factor.
162
- */
163
- get rollOffFactor() {
164
- return this._rollOffFactor;
165
- }
166
-
167
- /**
168
- * Sets the volume of the sound.
169
- * @param value - The volume.
170
- */
171
- set volume(value: number) {
172
- this._volume = value;
173
- if (this.component) {
174
- this.component.volume = value;
175
- }
176
- }
177
-
178
- /**
179
- * Gets the volume of the sound.
180
- * @returns The volume.
181
- */
182
- get volume() {
183
- return this._volume;
184
- }
185
-
186
- static get observedAttributes() {
187
- return [
188
- ...super.observedAttributes,
189
- 'distance-model',
190
- 'max-distance',
191
- 'pitch',
192
- 'positional',
193
- 'ref-distance',
194
- 'roll-off-factor',
195
- 'volume'
196
- ];
197
- }
198
-
199
- attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
200
- super.attributeChangedCallback(name, _oldValue, newValue);
201
-
202
- switch (name) {
203
- case 'distance-model':
204
- this.distanceModel = newValue as 'exponential' | 'inverse' | 'linear';
205
- break;
206
- case 'max-distance':
207
- this.maxDistance = parseFloat(newValue);
208
- break;
209
- case 'pitch':
210
- this.pitch = parseFloat(newValue);
211
- break;
212
- case 'positional':
213
- this.positional = this.hasAttribute('positional');
214
- break;
215
- case 'ref-distance':
216
- this.refDistance = parseFloat(newValue);
217
- break;
218
- case 'roll-off-factor':
219
- this.rollOffFactor = parseFloat(newValue);
220
- break;
221
- case 'volume':
222
- this.volume = parseFloat(newValue);
223
- break;
224
- }
225
- }
226
- }
227
-
228
- customElements.define('pc-sounds', SoundComponentElement);
229
-
230
- export { SoundComponentElement };
1
+ import { SoundComponent } from 'playcanvas';
2
+
3
+ import { ComponentElement } from './component';
4
+
5
+ /**
6
+ * The SoundComponentElement interface provides properties and methods for manipulating
7
+ * {@link https://developer.playcanvas.com/user-manual/web-components/tags/pc-sounds/ | `<pc-sounds>`} elements.
8
+ * The SoundComponentElement interface also inherits the properties and methods of the
9
+ * {@link HTMLElement} interface.
10
+ *
11
+ * @category Components
12
+ */
13
+ class SoundComponentElement extends ComponentElement {
14
+ private _distanceModel: 'exponential' | 'inverse' | 'linear' = 'linear';
15
+
16
+ private _maxDistance: number = 10000;
17
+
18
+ private _pitch: number = 1;
19
+
20
+ private _positional: boolean = false;
21
+
22
+ private _refDistance: number = 1;
23
+
24
+ private _rollOffFactor: number = 1;
25
+
26
+ private _volume: number = 1;
27
+
28
+ /** @ignore */
29
+ constructor() {
30
+ super('sound');
31
+ }
32
+
33
+ getInitialComponentData() {
34
+ return {
35
+ distanceModel: this._distanceModel,
36
+ maxDistance: this._maxDistance,
37
+ pitch: this._pitch,
38
+ positional: this._positional,
39
+ refDistance: this._refDistance,
40
+ rollOffFactor: this._rollOffFactor,
41
+ volume: this._volume
42
+ };
43
+ }
44
+
45
+ /**
46
+ * Gets the underlying PlayCanvas sound component.
47
+ * @returns The sound component.
48
+ */
49
+ get component(): SoundComponent | null {
50
+ return super.component as SoundComponent | null;
51
+ }
52
+
53
+ /**
54
+ * Sets which algorithm to use to reduce the volume of the sound as it moves away from the listener.
55
+ * @param value - The distance model.
56
+ */
57
+ set distanceModel(value: 'exponential' | 'inverse' | 'linear') {
58
+ this._distanceModel = value;
59
+ if (this.component) {
60
+ this.component.distanceModel = value;
61
+ }
62
+ }
63
+
64
+ /**
65
+ * Gets which algorithm to use to reduce the volume of the sound as it moves away from the listener.
66
+ * @returns The distance model.
67
+ */
68
+ get distanceModel(): 'exponential' | 'inverse' | 'linear' {
69
+ return this._distanceModel;
70
+ }
71
+
72
+ /**
73
+ * Sets the maximum distance from the listener at which audio falloff stops.
74
+ * @param value - The max distance.
75
+ */
76
+ set maxDistance(value: number) {
77
+ this._maxDistance = value;
78
+ if (this.component) {
79
+ this.component.maxDistance = value;
80
+ }
81
+ }
82
+
83
+ /**
84
+ * Gets the maximum distance from the listener at which audio falloff stops.
85
+ * @returns The max distance.
86
+ */
87
+ get maxDistance() {
88
+ return this._maxDistance;
89
+ }
90
+
91
+ /**
92
+ * Sets the pitch of the sound.
93
+ * @param value - The pitch.
94
+ */
95
+ set pitch(value: number) {
96
+ this._pitch = value;
97
+ if (this.component) {
98
+ this.component.pitch = value;
99
+ }
100
+ }
101
+
102
+ /**
103
+ * Gets the pitch of the sound.
104
+ * @returns The pitch.
105
+ */
106
+ get pitch() {
107
+ return this._pitch;
108
+ }
109
+
110
+ /**
111
+ * Sets the positional flag of the sound.
112
+ * @param value - The positional flag.
113
+ */
114
+ set positional(value: boolean) {
115
+ this._positional = value;
116
+ if (this.component) {
117
+ this.component.positional = value;
118
+ }
119
+ }
120
+
121
+ /**
122
+ * Gets the positional flag of the sound.
123
+ * @returns The positional flag.
124
+ */
125
+ get positional() {
126
+ return this._positional;
127
+ }
128
+
129
+ /**
130
+ * Sets the reference distance for reducing volume as the sound source moves further from the listener. Defaults to 1.
131
+ * @param value - The ref distance.
132
+ */
133
+ set refDistance(value: number) {
134
+ this._refDistance = value;
135
+ if (this.component) {
136
+ this.component.refDistance = value;
137
+ }
138
+ }
139
+
140
+ /**
141
+ * Gets the reference distance for reducing volume as the sound source moves further from the listener.
142
+ * @returns The ref distance.
143
+ */
144
+ get refDistance() {
145
+ return this._refDistance;
146
+ }
147
+
148
+ /**
149
+ * Sets the factor used in the falloff equation. Defaults to 1.
150
+ * @param value - The roll-off factor.
151
+ */
152
+ set rollOffFactor(value: number) {
153
+ this._rollOffFactor = value;
154
+ if (this.component) {
155
+ this.component.rollOffFactor = value;
156
+ }
157
+ }
158
+
159
+ /**
160
+ * Gets the factor used in the falloff equation.
161
+ * @returns The roll-off factor.
162
+ */
163
+ get rollOffFactor() {
164
+ return this._rollOffFactor;
165
+ }
166
+
167
+ /**
168
+ * Sets the volume of the sound.
169
+ * @param value - The volume.
170
+ */
171
+ set volume(value: number) {
172
+ this._volume = value;
173
+ if (this.component) {
174
+ this.component.volume = value;
175
+ }
176
+ }
177
+
178
+ /**
179
+ * Gets the volume of the sound.
180
+ * @returns The volume.
181
+ */
182
+ get volume() {
183
+ return this._volume;
184
+ }
185
+
186
+ static get observedAttributes() {
187
+ return [
188
+ ...super.observedAttributes,
189
+ 'distance-model',
190
+ 'max-distance',
191
+ 'pitch',
192
+ 'positional',
193
+ 'ref-distance',
194
+ 'roll-off-factor',
195
+ 'volume'
196
+ ];
197
+ }
198
+
199
+ attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
200
+ super.attributeChangedCallback(name, _oldValue, newValue);
201
+
202
+ switch (name) {
203
+ case 'distance-model':
204
+ this.distanceModel = newValue as 'exponential' | 'inverse' | 'linear';
205
+ break;
206
+ case 'max-distance':
207
+ this.maxDistance = parseFloat(newValue);
208
+ break;
209
+ case 'pitch':
210
+ this.pitch = parseFloat(newValue);
211
+ break;
212
+ case 'positional':
213
+ this.positional = this.hasAttribute('positional');
214
+ break;
215
+ case 'ref-distance':
216
+ this.refDistance = parseFloat(newValue);
217
+ break;
218
+ case 'roll-off-factor':
219
+ this.rollOffFactor = parseFloat(newValue);
220
+ break;
221
+ case 'volume':
222
+ this.volume = parseFloat(newValue);
223
+ break;
224
+ }
225
+ }
226
+ }
227
+
228
+ customElements.define('pc-sounds', SoundComponentElement);
229
+
230
+ export { SoundComponentElement };