@playcanvas/web-components 0.3.0 → 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 (40) hide show
  1. package/LICENSE +21 -21
  2. package/README.md +84 -84
  3. package/dist/components/light-component.d.ts +48 -0
  4. package/dist/components/splat-component.d.ts +0 -13
  5. package/dist/pwc.cjs +275 -207
  6. package/dist/pwc.cjs.map +1 -1
  7. package/dist/pwc.js +275 -207
  8. package/dist/pwc.js.map +1 -1
  9. package/dist/pwc.min.js +1 -1
  10. package/dist/pwc.min.js.map +1 -1
  11. package/dist/pwc.mjs +276 -208
  12. package/dist/pwc.mjs.map +1 -1
  13. package/package.json +76 -66
  14. package/src/app.ts +612 -606
  15. package/src/asset.ts +159 -159
  16. package/src/async-element.ts +46 -46
  17. package/src/colors.ts +150 -150
  18. package/src/components/camera-component.ts +557 -557
  19. package/src/components/collision-component.ts +183 -183
  20. package/src/components/component.ts +97 -97
  21. package/src/components/element-component.ts +367 -367
  22. package/src/components/light-component.ts +570 -466
  23. package/src/components/listener-component.ts +30 -30
  24. package/src/components/particlesystem-component.ts +155 -155
  25. package/src/components/render-component.ts +147 -147
  26. package/src/components/rigidbody-component.ts +227 -227
  27. package/src/components/screen-component.ts +157 -157
  28. package/src/components/script-component.ts +270 -270
  29. package/src/components/script.ts +90 -90
  30. package/src/components/sound-component.ts +230 -230
  31. package/src/components/sound-slot.ts +288 -288
  32. package/src/components/splat-component.ts +102 -133
  33. package/src/entity.ts +360 -360
  34. package/src/index.ts +63 -63
  35. package/src/material.ts +141 -141
  36. package/src/model.ts +111 -111
  37. package/src/module.ts +43 -43
  38. package/src/scene.ts +217 -217
  39. package/src/sky.ts +293 -293
  40. package/src/utils.ts +71 -71
package/LICENSE CHANGED
@@ -1,21 +1,21 @@
1
- MIT License
2
-
3
- Copyright (c) 2011-2026 PlayCanvas Ltd.
4
-
5
- Permission is hereby granted, free of charge, to any person obtaining a copy
6
- of this software and associated documentation files (the "Software"), to deal
7
- in the Software without restriction, including without limitation the rights
8
- to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
- copies of the Software, and to permit persons to whom the Software is
10
- furnished to do so, subject to the following conditions:
11
-
12
- The above copyright notice and this permission notice shall be included in all
13
- copies or substantial portions of the Software.
14
-
15
- THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
- IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
- FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
- AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
- LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
- OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
- SOFTWARE.
1
+ MIT License
2
+
3
+ Copyright (c) 2011-2026 PlayCanvas Ltd.
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
package/README.md CHANGED
@@ -1,84 +1,84 @@
1
- # PlayCanvas Web Components
2
-
3
- [![NPM Version](https://img.shields.io/npm/v/@playcanvas/web-components)](https://www.npmjs.com/package/@playcanvas/web-components)
4
- [![NPM Downloads](https://img.shields.io/npm/dw/@playcanvas/web-components)](https://npmtrends.com/@playcanvas/web-components)
5
- [![License](https://img.shields.io/npm/l/@playcanvas/web-components)](https://github.com/playcanvas/web-components/blob/main/LICENSE)
6
- [![Discord](https://img.shields.io/badge/Discord-5865F2?style=flat&logo=discord&logoColor=white&color=black)](https://discord.gg/RSaMRzg)
7
- [![Reddit](https://img.shields.io/badge/Reddit-FF4500?style=flat&logo=reddit&logoColor=white&color=black)](https://www.reddit.com/r/PlayCanvas)
8
- [![X](https://img.shields.io/badge/X-000000?style=flat&logo=x&logoColor=white&color=black)](https://x.com/intent/follow?screen_name=playcanvas)
9
-
10
- | [User Manual](https://developer.playcanvas.com//user-manual/web-components) | [API Reference](https://api.playcanvas.com/web-components) | [Examples](https://playcanvas.github.io/web-components/examples) | [Blog](https://blog.playcanvas.com) | [Forum](https://forum.playcanvas.com) |
11
-
12
- PlayCanvas Web Components are a set of custom HTML elements for building 3D interactive web apps. Using the declarative nature of HTML makes it both easy and fun to incorporate 3D into your website. Check out this simple example:
13
-
14
- ```html
15
- <!-- A lit sphere -->
16
- <pc-app>
17
- <pc-scene>
18
- <pc-entity name="camera" position="0 0 3">
19
- <pc-camera></pc-camera>
20
- </pc-entity>
21
- <pc-entity name="light" rotation="45 45 0">
22
- <pc-light></pc-light>
23
- </pc-entity>
24
- <pc-entity name="ball">
25
- <pc-render type="sphere"></pc-render>
26
- </pc-entity>
27
- </pc-scene>
28
- </pc-app>
29
- ```
30
-
31
- ## Examples
32
-
33
- [![image](https://github.com/user-attachments/assets/25ac8dd3-abc9-4d65-8950-3d72ed1f7152)](https://playcanvas.github.io/web-components/examples)
34
-
35
- See PlayCanvas Web Components in action here: https://playcanvas.github.io/web-components/examples
36
-
37
- ## Usage
38
-
39
- Please see the [Getting Started Guide](https://developer.playcanvas.com/user-manual/web-components/getting-started/) for installation and usage instructions.
40
-
41
- ## Development
42
-
43
- ### Setting Up Local Development
44
-
45
- 1. Clone the repository:
46
-
47
- ```bash
48
- git clone https://github.com/playcanvas/web-components.git
49
- cd web-components
50
- ```
51
-
52
- 2. Install dependencies:
53
-
54
- ```bash
55
- npm install
56
- ```
57
-
58
- 3. Build the library in watch mode and start the development server:
59
-
60
- ```bash
61
- npm run dev
62
- ```
63
-
64
- 4. Open http://localhost:3000/examples/ in your browser to see the examples.
65
-
66
- ### Building
67
-
68
- To build the library:
69
-
70
- ```bash
71
- npm run build
72
- ```
73
-
74
- The built files will be available in the `dist` directory.
75
-
76
- ### API Documentation
77
-
78
- To generate API documentation:
79
-
80
- ```bash
81
- npm run docs
82
- ```
83
-
84
- The documentation will be generated in the `docs` directory.
1
+ # PlayCanvas Web Components
2
+
3
+ [![NPM Version](https://img.shields.io/npm/v/@playcanvas/web-components)](https://www.npmjs.com/package/@playcanvas/web-components)
4
+ [![NPM Downloads](https://img.shields.io/npm/dw/@playcanvas/web-components)](https://npmtrends.com/@playcanvas/web-components)
5
+ [![License](https://img.shields.io/npm/l/@playcanvas/web-components)](https://github.com/playcanvas/web-components/blob/main/LICENSE)
6
+ [![Discord](https://img.shields.io/badge/Discord-5865F2?style=flat&logo=discord&logoColor=white&color=black)](https://discord.gg/RSaMRzg)
7
+ [![Reddit](https://img.shields.io/badge/Reddit-FF4500?style=flat&logo=reddit&logoColor=white&color=black)](https://www.reddit.com/r/PlayCanvas)
8
+ [![X](https://img.shields.io/badge/X-000000?style=flat&logo=x&logoColor=white&color=black)](https://x.com/intent/follow?screen_name=playcanvas)
9
+
10
+ | [User Manual](https://developer.playcanvas.com//user-manual/web-components) | [API Reference](https://api.playcanvas.com/web-components) | [Examples](https://playcanvas.github.io/web-components/examples) | [Blog](https://blog.playcanvas.com) | [Forum](https://forum.playcanvas.com) |
11
+
12
+ PlayCanvas Web Components are a set of custom HTML elements for building 3D interactive web apps. Using the declarative nature of HTML makes it both easy and fun to incorporate 3D into your website. Check out this simple example:
13
+
14
+ ```html
15
+ <!-- A lit sphere -->
16
+ <pc-app>
17
+ <pc-scene>
18
+ <pc-entity name="camera" position="0 0 3">
19
+ <pc-camera></pc-camera>
20
+ </pc-entity>
21
+ <pc-entity name="light" rotation="45 45 0">
22
+ <pc-light></pc-light>
23
+ </pc-entity>
24
+ <pc-entity name="ball">
25
+ <pc-render type="sphere"></pc-render>
26
+ </pc-entity>
27
+ </pc-scene>
28
+ </pc-app>
29
+ ```
30
+
31
+ ## Examples
32
+
33
+ [![image](https://github.com/user-attachments/assets/25ac8dd3-abc9-4d65-8950-3d72ed1f7152)](https://playcanvas.github.io/web-components/examples)
34
+
35
+ See PlayCanvas Web Components in action here: https://playcanvas.github.io/web-components/examples
36
+
37
+ ## Usage
38
+
39
+ Please see the [Getting Started Guide](https://developer.playcanvas.com/user-manual/web-components/getting-started/) for installation and usage instructions.
40
+
41
+ ## Development
42
+
43
+ ### Setting Up Local Development
44
+
45
+ 1. Clone the repository:
46
+
47
+ ```bash
48
+ git clone https://github.com/playcanvas/web-components.git
49
+ cd web-components
50
+ ```
51
+
52
+ 2. Install dependencies:
53
+
54
+ ```bash
55
+ npm install
56
+ ```
57
+
58
+ 3. Build the library in watch mode and start the development server:
59
+
60
+ ```bash
61
+ npm run dev
62
+ ```
63
+
64
+ 4. Open http://localhost:3000/examples/ in your browser to see the examples.
65
+
66
+ ### Building
67
+
68
+ To build the library:
69
+
70
+ ```bash
71
+ npm run build
72
+ ```
73
+
74
+ The built files will be available in the `dist` directory.
75
+
76
+ ### API Documentation
77
+
78
+ To generate API documentation:
79
+
80
+ ```bash
81
+ npm run docs
82
+ ```
83
+
84
+ The documentation will be generated in the `docs` directory.
@@ -24,6 +24,10 @@ declare class LightComponentElement extends ComponentElement {
24
24
  private _type;
25
25
  private _vsmBias;
26
26
  private _vsmBlurSize;
27
+ private _penumbraSize;
28
+ private _penumbraFalloff;
29
+ private _shadowSamples;
30
+ private _shadowBlockerSamples;
27
31
  /** @ignore */
28
32
  constructor();
29
33
  getInitialComponentData(): {
@@ -33,11 +37,15 @@ declare class LightComponentElement extends ComponentElement {
33
37
  intensity: number;
34
38
  normalOffsetBias: number;
35
39
  outerConeAngle: number;
40
+ penumbraFalloff: number;
41
+ penumbraSize: number;
36
42
  range: number;
37
43
  shadowBias: number;
44
+ shadowBlockerSamples: number;
38
45
  shadowDistance: number;
39
46
  shadowIntensity: number;
40
47
  shadowResolution: number;
48
+ shadowSamples: number;
41
49
  shadowType: 0 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | undefined;
42
50
  type: string;
43
51
  vsmBias: number;
@@ -208,6 +216,46 @@ declare class LightComponentElement extends ComponentElement {
208
216
  * @returns The VSM blur size.
209
217
  */
210
218
  get vsmBlurSize(): number;
219
+ /**
220
+ * Sets the penumbra size of the light. Used for PCSS shadows.
221
+ * @param value - The penumbra size.
222
+ */
223
+ set penumbraSize(value: number);
224
+ /**
225
+ * Gets the penumbra size of the light.
226
+ * @returns The penumbra size.
227
+ */
228
+ get penumbraSize(): number;
229
+ /**
230
+ * Sets the penumbra falloff of the light. Used for PCSS shadows.
231
+ * @param value - The penumbra falloff.
232
+ */
233
+ set penumbraFalloff(value: number);
234
+ /**
235
+ * Gets the penumbra falloff of the light.
236
+ * @returns The penumbra falloff.
237
+ */
238
+ get penumbraFalloff(): number;
239
+ /**
240
+ * Sets the number of shadow samples. Used for PCSS shadows.
241
+ * @param value - The number of shadow samples.
242
+ */
243
+ set shadowSamples(value: number);
244
+ /**
245
+ * Gets the number of shadow samples.
246
+ * @returns The number of shadow samples.
247
+ */
248
+ get shadowSamples(): number;
249
+ /**
250
+ * Sets the number of shadow blocker samples. Used for PCSS shadows.
251
+ * @param value - The number of shadow blocker samples.
252
+ */
253
+ set shadowBlockerSamples(value: number);
254
+ /**
255
+ * Gets the number of shadow blocker samples.
256
+ * @returns The number of shadow blocker samples.
257
+ */
258
+ get shadowBlockerSamples(): number;
211
259
  static get observedAttributes(): string[];
212
260
  attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
213
261
  }
@@ -11,13 +11,11 @@ import { ComponentElement } from './component';
11
11
  declare class SplatComponentElement extends ComponentElement {
12
12
  private _asset;
13
13
  private _castShadows;
14
- private _unified;
15
14
  /** @ignore */
16
15
  constructor();
17
16
  getInitialComponentData(): {
18
17
  asset: import("playcanvas").Asset | null | undefined;
19
18
  castShadows: boolean;
20
- unified: boolean;
21
19
  };
22
20
  /**
23
21
  * Gets the underlying PlayCanvas splat component.
@@ -44,17 +42,6 @@ declare class SplatComponentElement extends ComponentElement {
44
42
  * @returns Whether the splat casts shadows.
45
43
  */
46
44
  get castShadows(): boolean;
47
- /**
48
- * Sets whether the splat supports global sorting and LOD streaming. This property can only be
49
- * changed when the component is disabled.
50
- * @param value - Whether the splat supports global sorting and LOD streaming.
51
- */
52
- set unified(value: boolean);
53
- /**
54
- * Gets whether the splat supports global sorting and LOD streaming.
55
- * @returns Whether the splat supports global sorting and LOD streaming.
56
- */
57
- get unified(): boolean;
58
45
  static get observedAttributes(): string[];
59
46
  attributeChangedCallback(name: string, _oldValue: string, newValue: string): void;
60
47
  }