@playcanvas/web-components 0.1.11 → 0.1.12

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 (55) hide show
  1. package/README.md +31 -303
  2. package/dist/app.d.ts +4 -1
  3. package/dist/asset.d.ts +3 -2
  4. package/dist/components/camera-component.d.ts +4 -3
  5. package/dist/components/collision-component.d.ts +4 -3
  6. package/dist/components/element-component.d.ts +84 -3
  7. package/dist/components/light-component.d.ts +4 -3
  8. package/dist/components/listener-component.d.ts +4 -3
  9. package/dist/components/render-component.d.ts +4 -3
  10. package/dist/components/rigidbody-component.d.ts +5 -4
  11. package/dist/components/screen-component.d.ts +4 -3
  12. package/dist/components/script-component.d.ts +4 -3
  13. package/dist/components/sound-component.d.ts +4 -3
  14. package/dist/components/sound-slot.d.ts +2 -2
  15. package/dist/components/splat-component.d.ts +36 -0
  16. package/dist/entity.d.ts +3 -2
  17. package/dist/index.d.ts +2 -2
  18. package/dist/material.d.ts +3 -2
  19. package/dist/model.d.ts +6 -5
  20. package/dist/module.d.ts +3 -2
  21. package/dist/pwc.cjs +238 -65
  22. package/dist/pwc.cjs.map +1 -1
  23. package/dist/pwc.js +238 -65
  24. package/dist/pwc.js.map +1 -1
  25. package/dist/pwc.min.js +1 -1
  26. package/dist/pwc.min.js.map +1 -1
  27. package/dist/pwc.mjs +238 -65
  28. package/dist/pwc.mjs.map +1 -1
  29. package/dist/scene.d.ts +3 -2
  30. package/dist/sky.d.ts +64 -0
  31. package/package.json +23 -23
  32. package/src/app.ts +14 -10
  33. package/src/asset.ts +3 -2
  34. package/src/components/camera-component.ts +4 -3
  35. package/src/components/collision-component.ts +4 -3
  36. package/src/components/element-component.ts +84 -3
  37. package/src/components/light-component.ts +4 -3
  38. package/src/components/listener-component.ts +4 -3
  39. package/src/components/render-component.ts +4 -3
  40. package/src/components/rigidbody-component.ts +5 -4
  41. package/src/components/screen-component.ts +4 -3
  42. package/src/components/script-component.ts +4 -3
  43. package/src/components/sound-component.ts +4 -3
  44. package/src/components/sound-slot.ts +2 -2
  45. package/src/components/{gsplat-component.ts → splat-component.ts} +17 -8
  46. package/src/entity.ts +3 -2
  47. package/src/index.ts +2 -2
  48. package/src/material.ts +6 -5
  49. package/src/model.ts +8 -7
  50. package/src/module.ts +3 -2
  51. package/src/scene.ts +3 -2
  52. package/src/sky.ts +64 -0
  53. package/dist/components/gsplat-component.d.ts +0 -27
  54. package/dist/fog.d.ts +0 -28
  55. package/src/fog.ts +0 -121
package/src/module.ts CHANGED
@@ -2,8 +2,9 @@ import { basisInitialize, WasmModule } from 'playcanvas';
2
2
 
3
3
  /**
4
4
  * The ModuleElement interface provides properties and methods for manipulating
5
- * `<pc-module>` elements. The ModuleElement interface also inherits the properties and
6
- * methods of the {@link HTMLElement} interface.
5
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-module/ | `<pc-module>`} elements.
6
+ * The ModuleElement interface also inherits the properties and methods of the
7
+ * {@link HTMLElement} interface.
7
8
  */
8
9
  class ModuleElement extends HTMLElement {
9
10
  private loadPromise: Promise<void>;
package/src/scene.ts CHANGED
@@ -5,8 +5,9 @@ import { parseColor } from './utils';
5
5
 
6
6
  /**
7
7
  * The SceneElement interface provides properties and methods for manipulating
8
- * `<pc-scene>` elements. The SceneElement interface also inherits the properties and
9
- * methods of the {@link HTMLElement} interface.
8
+ * {@link https://developer.playcanvas.com/user-manual/engine/web-components/tags/pc-scene/ | `<pc-scene>`} elements.
9
+ * The SceneElement interface also inherits the properties and methods of the
10
+ * {@link HTMLElement} interface.
10
11
  */
11
12
  class SceneElement extends AsyncElement {
12
13
  /**
package/src/sky.ts CHANGED
@@ -100,6 +100,10 @@ class SkyElement extends AsyncElement {
100
100
  this._scene = null;
101
101
  }
102
102
 
103
+ /**
104
+ * Sets the id of the `pc-asset` to use for the skybox.
105
+ * @param value - The asset ID.
106
+ */
103
107
  set asset(value: string) {
104
108
  this._asset = value;
105
109
  if (this.isConnected) {
@@ -107,10 +111,18 @@ class SkyElement extends AsyncElement {
107
111
  }
108
112
  }
109
113
 
114
+ /**
115
+ * Gets the id of the `pc-asset` to use for the skybox.
116
+ * @returns The asset ID.
117
+ */
110
118
  get asset() {
111
119
  return this._asset;
112
120
  }
113
121
 
122
+ /**
123
+ * Sets the center of the skybox.
124
+ * @param value - The center.
125
+ */
114
126
  set center(value: Vec3) {
115
127
  this._center = value;
116
128
  if (this._scene) {
@@ -118,10 +130,18 @@ class SkyElement extends AsyncElement {
118
130
  }
119
131
  }
120
132
 
133
+ /**
134
+ * Gets the center of the skybox.
135
+ * @returns The center.
136
+ */
121
137
  get center() {
122
138
  return this._center;
123
139
  }
124
140
 
141
+ /**
142
+ * Sets the intensity of the skybox.
143
+ * @param value - The intensity.
144
+ */
125
145
  set intensity(value: number) {
126
146
  this._intensity = value;
127
147
  if (this._scene) {
@@ -129,10 +149,18 @@ class SkyElement extends AsyncElement {
129
149
  }
130
150
  }
131
151
 
152
+ /**
153
+ * Gets the intensity of the skybox.
154
+ * @returns The intensity.
155
+ */
132
156
  get intensity() {
133
157
  return this._intensity;
134
158
  }
135
159
 
160
+ /**
161
+ * Sets the mip level of the skybox.
162
+ * @param value - The mip level.
163
+ */
136
164
  set level(value: number) {
137
165
  this._level = value;
138
166
  if (this._scene) {
@@ -140,18 +168,34 @@ class SkyElement extends AsyncElement {
140
168
  }
141
169
  }
142
170
 
171
+ /**
172
+ * Gets the mip level of the skybox.
173
+ * @returns The mip level.
174
+ */
143
175
  get level() {
144
176
  return this._level;
145
177
  }
146
178
 
179
+ /**
180
+ * Sets whether the skybox is used as a light source.
181
+ * @param value - Whether to use lighting.
182
+ */
147
183
  set lighting(value: boolean) {
148
184
  this._lighting = value;
149
185
  }
150
186
 
187
+ /**
188
+ * Gets whether the skybox is used as a light source.
189
+ * @returns Whether to use lighting.
190
+ */
151
191
  get lighting() {
152
192
  return this._lighting;
153
193
  }
154
194
 
195
+ /**
196
+ * Sets the Euler rotation of the skybox.
197
+ * @param value - The rotation.
198
+ */
155
199
  set rotation(value: Vec3) {
156
200
  this._rotation = value;
157
201
  if (this._scene) {
@@ -159,10 +203,18 @@ class SkyElement extends AsyncElement {
159
203
  }
160
204
  }
161
205
 
206
+ /**
207
+ * Gets the Euler rotation of the skybox.
208
+ * @returns The rotation.
209
+ */
162
210
  get rotation() {
163
211
  return this._rotation;
164
212
  }
165
213
 
214
+ /**
215
+ * Sets the scale of the skybox.
216
+ * @param value - The scale.
217
+ */
166
218
  set scale(value: Vec3) {
167
219
  this._scale = value;
168
220
  if (this._scene) {
@@ -170,10 +222,18 @@ class SkyElement extends AsyncElement {
170
222
  }
171
223
  }
172
224
 
225
+ /**
226
+ * Gets the scale of the skybox.
227
+ * @returns The scale.
228
+ */
173
229
  get scale() {
174
230
  return this._scale;
175
231
  }
176
232
 
233
+ /**
234
+ * Sets the type of the skybox.
235
+ * @param value - The type.
236
+ */
177
237
  set type(value: 'box' | 'dome' | 'infinite' | 'none') {
178
238
  this._type = value;
179
239
  if (this._scene) {
@@ -185,6 +245,10 @@ class SkyElement extends AsyncElement {
185
245
  }
186
246
  }
187
247
 
248
+ /**
249
+ * Gets the type of the skybox.
250
+ * @returns The type.
251
+ */
188
252
  get type() {
189
253
  return this._type;
190
254
  }
@@ -1,27 +0,0 @@
1
- import { GSplatComponent } from 'playcanvas';
2
- import { ComponentElement } from './component';
3
- /**
4
- * The GSplatComponentElement interface provides properties and methods for manipulating
5
- * `<pc-splat>` elements. The GSplatComponentElement interface also inherits the properties and
6
- * methods of the {@link HTMLElement} interface.
7
- *
8
- * @category Components
9
- */
10
- declare class GSplatComponentElement extends ComponentElement {
11
- private _asset;
12
- /** @ignore */
13
- constructor();
14
- getInitialComponentData(): {
15
- asset: import("playcanvas").Asset | null | undefined;
16
- };
17
- /**
18
- * Gets the gsplat component.
19
- * @returns The gsplat component.
20
- */
21
- get component(): GSplatComponent | null;
22
- set asset(value: string);
23
- get asset(): string;
24
- static get observedAttributes(): string[];
25
- attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
26
- }
27
- export { GSplatComponentElement };
package/dist/fog.d.ts DELETED
@@ -1,28 +0,0 @@
1
- import { Color } from 'playcanvas';
2
- /**
3
- * The FogElement interface provides properties and methods for manipulating
4
- * `<pc-fog>` elements. The FogElement interface also inherits the properties and
5
- * methods of the {@link HTMLElement} interface.
6
- */
7
- declare class FogElement extends HTMLElement {
8
- private _color;
9
- private _density;
10
- private _end;
11
- private _start;
12
- private _type;
13
- private dispatchFogUpdate;
14
- set color(value: Color);
15
- get color(): Color;
16
- set density(value: number);
17
- get density(): number;
18
- set end(value: number);
19
- get end(): number;
20
- set start(value: number);
21
- get start(): number;
22
- set type(value: 'linear' | 'exp' | 'exp2');
23
- get type(): 'linear' | 'exp' | 'exp2';
24
- static get observedAttributes(): string[];
25
- attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
26
- constructor();
27
- }
28
- export { FogElement };
package/src/fog.ts DELETED
@@ -1,121 +0,0 @@
1
- import { Color } from 'playcanvas';
2
-
3
- import { parseColor } from './utils';
4
-
5
- /**
6
- * The FogElement interface provides properties and methods for manipulating
7
- * `<pc-fog>` elements. The FogElement interface also inherits the properties and
8
- * methods of the {@link HTMLElement} interface.
9
- */
10
- class FogElement extends HTMLElement {
11
- private _color = new Color(0.5, 0.5, 0.5);
12
-
13
- private _density = 0.001;
14
-
15
- private _end = 100;
16
-
17
- private _start = 0;
18
-
19
- private _type: 'linear' | 'exp' | 'exp2' = 'linear';
20
-
21
- private dispatchFogUpdate() {
22
- const event = new CustomEvent('fogupdate', {
23
- bubbles: true,
24
- detail: {
25
- color: this._color,
26
- density: this._density,
27
- end: this._end,
28
- start: this._start,
29
- type: this._type
30
- }
31
- });
32
- this.dispatchEvent(event);
33
- }
34
-
35
- set color(value: Color) {
36
- this._color = value;
37
- this.dispatchFogUpdate();
38
- }
39
-
40
- get color(): Color {
41
- return this._color;
42
- }
43
-
44
- set density(value: number) {
45
- this._density = value;
46
- this.dispatchFogUpdate();
47
- }
48
-
49
- get density(): number {
50
- return this._density;
51
- }
52
-
53
- set end(value: number) {
54
- this._end = value;
55
- this.dispatchFogUpdate();
56
- }
57
-
58
- get end(): number {
59
- return this._end;
60
- }
61
-
62
- set start(value: number) {
63
- this._start = value;
64
- this.dispatchFogUpdate();
65
- }
66
-
67
- get start(): number {
68
- return this._start;
69
- }
70
-
71
- set type(value: 'linear' | 'exp' | 'exp2') {
72
- this._type = value;
73
- this.dispatchFogUpdate();
74
- }
75
-
76
- get type(): 'linear' | 'exp' | 'exp2' {
77
- return this._type;
78
- }
79
-
80
- static get observedAttributes() {
81
- return [
82
- 'color',
83
- 'density',
84
- 'end',
85
- 'start',
86
- 'type'
87
- ];
88
- }
89
-
90
- attributeChangedCallback(name: string, _oldValue: string, newValue: string) {
91
- switch (name) {
92
- case 'color':
93
- this.color = parseColor(newValue);
94
- break;
95
- case 'density':
96
- this.density = parseFloat(newValue);
97
- break;
98
- case 'end':
99
- this.end = parseFloat(newValue);
100
- break;
101
- case 'start':
102
- this.start = parseFloat(newValue);
103
- break;
104
- case 'type':
105
- if (newValue === 'linear' || newValue === 'exp' || newValue === 'exp2') {
106
- this.type = newValue;
107
- }
108
- break;
109
- }
110
- }
111
-
112
- constructor() {
113
- super();
114
- // Dispatch initial fog state
115
- this.dispatchFogUpdate();
116
- }
117
- }
118
-
119
- customElements.define('pc-fog', FogElement);
120
-
121
- export { FogElement };