@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.
- package/LICENSE +21 -21
- package/README.md +84 -84
- package/dist/components/light-component.d.ts +48 -0
- package/dist/components/splat-component.d.ts +0 -13
- package/dist/pwc.cjs +275 -207
- package/dist/pwc.cjs.map +1 -1
- package/dist/pwc.js +275 -207
- package/dist/pwc.js.map +1 -1
- package/dist/pwc.min.js +1 -1
- package/dist/pwc.min.js.map +1 -1
- package/dist/pwc.mjs +276 -208
- package/dist/pwc.mjs.map +1 -1
- package/package.json +76 -66
- package/src/app.ts +612 -606
- package/src/asset.ts +159 -159
- package/src/async-element.ts +46 -46
- package/src/colors.ts +150 -150
- package/src/components/camera-component.ts +557 -557
- package/src/components/collision-component.ts +183 -183
- package/src/components/component.ts +97 -97
- package/src/components/element-component.ts +367 -367
- package/src/components/light-component.ts +570 -466
- package/src/components/listener-component.ts +30 -30
- package/src/components/particlesystem-component.ts +155 -155
- package/src/components/render-component.ts +147 -147
- package/src/components/rigidbody-component.ts +227 -227
- package/src/components/screen-component.ts +157 -157
- package/src/components/script-component.ts +270 -270
- package/src/components/script.ts +90 -90
- package/src/components/sound-component.ts +230 -230
- package/src/components/sound-slot.ts +288 -288
- package/src/components/splat-component.ts +102 -133
- package/src/entity.ts +360 -360
- package/src/index.ts +63 -63
- package/src/material.ts +141 -141
- package/src/model.ts +111 -111
- package/src/module.ts +43 -43
- package/src/scene.ts +217 -217
- package/src/sky.ts +293 -293
- 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
|
-
[](https://www.npmjs.com/package/@playcanvas/web-components)
|
|
4
|
-
[](https://npmtrends.com/@playcanvas/web-components)
|
|
5
|
-
[](https://github.com/playcanvas/web-components/blob/main/LICENSE)
|
|
6
|
-
[](https://discord.gg/RSaMRzg)
|
|
7
|
-
[](https://www.reddit.com/r/PlayCanvas)
|
|
8
|
-
[](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
|
-
[](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
|
+
[](https://www.npmjs.com/package/@playcanvas/web-components)
|
|
4
|
+
[](https://npmtrends.com/@playcanvas/web-components)
|
|
5
|
+
[](https://github.com/playcanvas/web-components/blob/main/LICENSE)
|
|
6
|
+
[](https://discord.gg/RSaMRzg)
|
|
7
|
+
[](https://www.reddit.com/r/PlayCanvas)
|
|
8
|
+
[](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
|
+
[](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
|
}
|