@playcanvas/web-components 0.1.3 → 0.1.5

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 (43) hide show
  1. package/README.md +12 -24
  2. package/dist/app.d.ts +11 -4
  3. package/dist/asset.d.ts +0 -1
  4. package/dist/async-element.d.ts +23 -0
  5. package/dist/components/camera-component.d.ts +3 -0
  6. package/dist/components/collision-component.d.ts +9 -1
  7. package/dist/components/component.d.ts +4 -2
  8. package/dist/components/element-component.d.ts +1 -1
  9. package/dist/components/render-component.d.ts +2 -2
  10. package/dist/components/script-component.d.ts +1 -1
  11. package/dist/components/sound-slot.d.ts +2 -1
  12. package/dist/entity.d.ts +2 -1
  13. package/dist/index.d.ts +10 -1
  14. package/dist/model.d.ts +2 -1
  15. package/dist/pwc.cjs +259 -119
  16. package/dist/pwc.cjs.map +1 -1
  17. package/dist/pwc.js +259 -119
  18. package/dist/pwc.js.map +1 -1
  19. package/dist/pwc.min.js +1 -1
  20. package/dist/pwc.min.js.map +1 -1
  21. package/dist/pwc.mjs +260 -121
  22. package/dist/pwc.mjs.map +1 -1
  23. package/dist/scene.d.ts +2 -1
  24. package/dist/sky.d.ts +15 -6
  25. package/dist/utils.d.ts +8 -1
  26. package/package.json +13 -12
  27. package/src/app.ts +13 -16
  28. package/src/asset.ts +1 -3
  29. package/src/async-element.ts +45 -0
  30. package/src/components/camera-component.ts +23 -2
  31. package/src/components/collision-component.ts +37 -3
  32. package/src/components/component.ts +15 -26
  33. package/src/components/element-component.ts +15 -4
  34. package/src/components/render-component.ts +1 -6
  35. package/src/components/screen-component.ts +1 -1
  36. package/src/components/script-component.ts +1 -3
  37. package/src/components/sound-slot.ts +7 -10
  38. package/src/entity.ts +25 -15
  39. package/src/index.ts +11 -0
  40. package/src/model.ts +20 -15
  41. package/src/scene.ts +6 -11
  42. package/src/sky.ts +82 -40
  43. package/src/utils.ts +14 -1
package/README.md CHANGED
@@ -15,13 +15,13 @@ Or you can include it directly in your HTML file from a CDN.
15
15
  ES Modules:
16
16
 
17
17
  ```html
18
- <script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.1.0/dist/pwc.mjs"></script>
18
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.1.4/dist/pwc.mjs"></script>
19
19
  ```
20
20
 
21
21
  UMD:
22
22
 
23
23
  ```html
24
- <script src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.1.0"></script>
24
+ <script src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.1.4"></script>
25
25
  ```
26
26
 
27
27
  ## Tag Reference 📖
@@ -243,10 +243,12 @@ The `pc-sky` tag is used to define a sky component. It must be a direct child of
243
243
  | Attribute | Description |
244
244
  | --- | --- |
245
245
  | `asset` | A string that should match the `id` of a `pc-asset` tag that has a type of `texture`. |
246
+ | `center` | The center of the sky. Specified as a comma-separated list of X, Y, and Z values in the range 0 to 1. If not specified, `0,0.01,0` is used. |
246
247
  | `intensity` | The intensity of the sky. If not specified, `1` is used. |
247
248
  | `level` | The mipmap level used to render the sky. If not specified, `0` is used (base mip level). |
248
249
  | `rotation` | The rotation of the sky. Specified as a comma-separated list of X, Y, and Z values. If not specified, `0,0,0` is used. |
249
- | `solid-color` | Valueless attribute. If present, the skybox itself is not rendered but is still used for environment lighting. |
250
+ | `scale` | The scale of the sky. Specified as a comma-separated list of X, Y, and Z values. If not specified, `100,100,100` is used. |
251
+ | `type` | The type of sky component. Can be `box`, `dome`, `infinite` or `none`. |
250
252
 
251
253
  ### pc-sound
252
254
 
@@ -285,7 +287,7 @@ The `pc-splat` tag is used to define a splat component. It must be a direct chil
285
287
 
286
288
  ## Example
287
289
 
288
- Below is a basic example of how to use PlayCanvas Web Components to create a simple 3D scene (a spinning cube):
290
+ Below is a basic example of how to use PlayCanvas Web Components to create a simple 3D scene (a humble sphere):
289
291
 
290
292
  ```html
291
293
  <!DOCTYPE html>
@@ -293,30 +295,19 @@ Below is a basic example of how to use PlayCanvas Web Components to create a sim
293
295
  <head>
294
296
  <meta charset="UTF-8">
295
297
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
296
- <title>PlayCanvas Web Components - Spinning Cube</title>
298
+ <title>PlayCanvas Web Components - Sphere</title>
297
299
  <script type="importmap">
298
300
  {
299
301
  "imports": {
300
- "playcanvas": "https://esm.run/playcanvas@2.1.0"
302
+ "playcanvas": "https://esm.run/playcanvas@2.2.2"
301
303
  }
302
304
  }
303
305
  </script>
304
- <script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.1.0/dist/pwc.mjs"></script>
306
+ <script type="module" src="https://cdn.jsdelivr.net/npm/@playcanvas/web-components@0.1.4/dist/pwc.mjs"></script>
305
307
  <link rel="stylesheet" href="styles.css">
306
308
  </head>
307
309
  <body>
308
310
  <pc-app>
309
- <script type="module">
310
- import { registerScript, Script } from 'playcanvas';
311
-
312
- class Rotate extends Script {
313
- update(dt) {
314
- this.entity.rotate(10 * dt, 20 * dt, 30 * dt);
315
- }
316
- }
317
-
318
- registerScript(Rotate, 'rotate');
319
- </script>
320
311
  <pc-scene>
321
312
  <!-- Camera -->
322
313
  <pc-entity name="camera" position="0,0,3">
@@ -326,12 +317,9 @@ Below is a basic example of how to use PlayCanvas Web Components to create a sim
326
317
  <pc-entity name="light" rotation="45,0,0">
327
318
  <pc-light></pc-light>
328
319
  </pc-entity>
329
- <!-- Cube -->
330
- <pc-entity name="cube">
331
- <pc-render type="box"></pc-render>
332
- <pc-scripts>
333
- <pc-script name="rotate"></pc-script>
334
- </pc-scripts>
320
+ <!-- Sphere -->
321
+ <pc-entity name="sphere">
322
+ <pc-render type="sphere"></pc-render>
335
323
  </pc-entity>
336
324
  </pc-scene>
337
325
  </pc-app>
package/dist/app.d.ts CHANGED
@@ -1,14 +1,13 @@
1
1
  import { Application } from 'playcanvas';
2
+ import { AsyncElement } from './async-element';
2
3
  /**
3
4
  * The main application element.
4
5
  */
5
- declare class AppElement extends HTMLElement {
6
+ declare class AppElement extends AsyncElement {
6
7
  /**
7
8
  * The canvas element.
8
9
  */
9
10
  private _canvas;
10
- private appReadyPromise;
11
- private appReadyResolve;
12
11
  private _highResolution;
13
12
  /**
14
13
  * The PlayCanvas application instance.
@@ -20,9 +19,17 @@ declare class AppElement extends HTMLElement {
20
19
  constructor();
21
20
  connectedCallback(): Promise<void>;
22
21
  disconnectedCallback(): void;
23
- getApplication(): Promise<Application>;
24
22
  _onWindowResize(): void;
23
+ /**
24
+ * Sets the high resolution flag. When true, the application will render at the device's
25
+ * physical resolution. When false, the application will render at CSS resolution.
26
+ * @param value - The high resolution flag.
27
+ */
25
28
  set highResolution(value: boolean);
29
+ /**
30
+ * Gets the high resolution flag.
31
+ * @returns The high resolution flag.
32
+ */
26
33
  get highResolution(): boolean;
27
34
  static get observedAttributes(): string[];
28
35
  attributeChangedCallback(name: string, _oldValue: string, _newValue: string): void;
package/dist/asset.d.ts CHANGED
@@ -8,7 +8,6 @@ declare class AssetElement extends HTMLElement {
8
8
  * The asset that is loaded.
9
9
  */
10
10
  asset: Asset | null;
11
- connectedCallback(): Promise<void>;
12
11
  disconnectedCallback(): void;
13
12
  createAsset(): void;
14
13
  destroyAsset(): void;
package/dist/async-element.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ import { AppElement } from './app';
2
+ import { EntityElement } from './entity';
3
+ /**
4
+ * Base class for all PlayCanvas web components that initialize asynchronously.
5
+ */
6
+ declare class AsyncElement extends HTMLElement {
7
+ private _readyPromise;
8
+ private _readyResolve;
9
+ constructor();
10
+ get closestApp(): AppElement;
11
+ get closestEntity(): EntityElement;
12
+ /**
13
+ * Called when the element is fully initialized and ready.
14
+ * Subclasses should call this when they're ready.
15
+ */
16
+ protected _onReady(): void;
17
+ /**
18
+ * Returns a promise that resolves with this element when it's ready.
19
+ * @returns A promise that resolves with this element when it's ready.
20
+ */
21
+ ready(): Promise<this>;
22
+ }
23
+ export { AsyncElement };
package/dist/components/camera-component.d.ts CHANGED
@@ -42,6 +42,9 @@ declare class CameraComponentElement extends ComponentElement {
42
42
  rect: Vec4;
43
43
  scissorRect: Vec4;
44
44
  };
45
+ get xrAvailable(): boolean | null | undefined;
46
+ startXr(type: 'immersive-ar' | 'immersive-vr', space: 'bounded-floor' | 'local' | 'local-floor' | 'unbounded' | 'viewer'): void;
47
+ endXr(): void;
45
48
  /**
46
49
  * Gets the camera component.
47
50
  * @returns The camera component.
package/dist/components/collision-component.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { CollisionComponent, Vec3 } from 'playcanvas';
1
+ import { CollisionComponent, Quat, Vec3 } from 'playcanvas';
2
2
  import { ComponentElement } from './component';
3
3
  /**
4
4
  * Represents a collision component in the PlayCanvas engine.
@@ -6,10 +6,12 @@ import { ComponentElement } from './component';
6
6
  * @category Components
7
7
  */
8
8
  declare class CollisionComponentElement extends ComponentElement {
9
+ private _angularOffset;
9
10
  private _axis;
10
11
  private _convexHull;
11
12
  private _halfExtents;
12
13
  private _height;
14
+ private _linearOffset;
13
15
  private _radius;
14
16
  private _type;
15
17
  /**
@@ -18,9 +20,11 @@ declare class CollisionComponentElement extends ComponentElement {
18
20
  constructor();
19
21
  getInitialComponentData(): {
20
22
  axis: number;
23
+ angularOffset: Quat;
21
24
  convexHull: boolean;
22
25
  halfExtents: Vec3;
23
26
  height: number;
27
+ linearOffset: Vec3;
24
28
  radius: number;
25
29
  type: string;
26
30
  };
@@ -29,6 +33,8 @@ declare class CollisionComponentElement extends ComponentElement {
29
33
  * @returns The collision component.
30
34
  */
31
35
  get component(): CollisionComponent | null;
36
+ set angularOffset(value: Quat);
37
+ get angularOffset(): Quat;
32
38
  set axis(value: number);
33
39
  get axis(): number;
34
40
  set convexHull(value: boolean);
@@ -37,6 +43,8 @@ declare class CollisionComponentElement extends ComponentElement {
37
43
  get halfExtents(): Vec3;
38
44
  set height(value: number);
39
45
  get height(): number;
46
+ set linearOffset(value: Vec3);
47
+ get linearOffset(): Vec3;
40
48
  set radius(value: number);
41
49
  get radius(): number;
42
50
  set type(value: string);
package/dist/components/component.d.ts CHANGED
@@ -1,10 +1,11 @@
1
1
  import { Component } from 'playcanvas';
2
+ import { AsyncElement } from '../async-element';
2
3
  /**
3
4
  * Represents a component in the PlayCanvas engine.
4
5
  *
5
6
  * @category Components
6
7
  */
7
- declare class ComponentElement extends HTMLElement {
8
+ declare class ComponentElement extends AsyncElement {
8
9
  private _componentName;
9
10
  private _enabled;
10
11
  private _component;
@@ -14,8 +15,9 @@ declare class ComponentElement extends HTMLElement {
14
15
  */
15
16
  constructor(componentName: string);
16
17
  getInitialComponentData(): {};
18
+ addComponent(): Promise<void>;
19
+ initComponent(): void;
17
20
  connectedCallback(): Promise<void>;
18
- addComponent(): void;
19
21
  disconnectedCallback(): void;
20
22
  get component(): Component | null;
21
23
  /**
package/dist/components/element-component.d.ts CHANGED
@@ -18,7 +18,7 @@ declare class ElementComponentElement extends ComponentElement {
18
18
  private _width;
19
19
  private _wrapLines;
20
20
  constructor();
21
- connectedCallback(): Promise<void>;
21
+ initComponent(): void;
22
22
  getInitialComponentData(): {
23
23
  anchor: Vec4;
24
24
  autoWidth: boolean;
package/dist/components/render-component.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { RenderComponent } from 'playcanvas';
1
+ import { RenderComponent, StandardMaterial } from 'playcanvas';
2
2
  import { ComponentElement } from './component';
3
3
  /**
4
4
  * Represents a render component in the PlayCanvas engine.
@@ -11,10 +11,10 @@ declare class RenderComponentElement extends ComponentElement {
11
11
  private _receiveShadows;
12
12
  private _type;
13
13
  constructor();
14
- connectedCallback(): Promise<void>;
15
14
  getInitialComponentData(): {
16
15
  type: "box" | "asset" | "capsule" | "cone" | "cylinder" | "plane" | "sphere";
17
16
  castShadows: boolean;
17
+ material: StandardMaterial | null | undefined;
18
18
  receiveShadows: boolean;
19
19
  };
20
20
  /**
package/dist/components/script-component.d.ts CHANGED
@@ -24,7 +24,7 @@ declare global {
24
24
  declare class ScriptComponentElement extends ComponentElement {
25
25
  private observer;
26
26
  constructor();
27
- connectedCallback(): Promise<void>;
27
+ initComponent(): void;
28
28
  private applyAttributes;
29
29
  private handleScriptAttributesChange;
30
30
  private handleScriptEnableChange;
package/dist/components/sound-slot.d.ts CHANGED
@@ -1,9 +1,10 @@
1
1
  import { SoundSlot } from 'playcanvas';
2
+ import { AsyncElement } from '../async-element';
2
3
  import { SoundComponentElement } from './sound-component';
3
4
  /**
4
5
  * Represents a sound slot in the PlayCanvas engine.
5
6
  */
6
- declare class SoundSlotElement extends HTMLElement {
7
+ declare class SoundSlotElement extends AsyncElement {
7
8
  private _asset;
8
9
  private _autoPlay;
9
10
  private _duration;
package/dist/entity.d.ts CHANGED
@@ -1,8 +1,9 @@
1
1
  import { Entity, Vec3 } from 'playcanvas';
2
+ import { AsyncElement } from './async-element';
2
3
  /**
3
4
  * Represents an entity in the PlayCanvas engine.
4
5
  */
5
- declare class EntityElement extends HTMLElement {
6
+ declare class EntityElement extends AsyncElement {
6
7
  /**
7
8
  * Whether the entity is enabled.
8
9
  */
package/dist/index.d.ts CHANGED
@@ -1,3 +1,12 @@
1
+ /**
2
+ * The Engine Web Components module provides a set of Web Components for the PlayCanvas Engine.
3
+ * While these components are normally instantiated in a declarative fashion using HTML, this
4
+ * reference covers the TypeScript/JavaScript API that allows these components to be created
5
+ * programmatically.
6
+ *
7
+ * @module EngineWebComponents
8
+ */
9
+ import { AsyncElement } from './async-element';
1
10
  import { ModuleElement } from './module';
2
11
  import { AppElement } from './app';
3
12
  import { EntityElement } from './entity';
@@ -20,4 +29,4 @@ import { MaterialElement } from './material';
20
29
  import { ModelElement } from './model';
21
30
  import { SceneElement } from './scene';
22
31
  import { SkyElement } from './sky';
23
- export { ModuleElement, AppElement, EntityElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, RenderComponentElement, RigidBodyComponentElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, SoundComponentElement, SoundSlotElement, MaterialElement, ModelElement, SceneElement, SkyElement };
32
+ export { AsyncElement, ModuleElement, AppElement, EntityElement, AssetElement, CameraComponentElement, CollisionComponentElement, ComponentElement, ElementComponentElement, GSplatComponentElement, LightComponentElement, ListenerComponentElement, RenderComponentElement, RigidBodyComponentElement, ScreenComponentElement, ScriptComponentElement, ScriptElement, SoundComponentElement, SoundSlotElement, MaterialElement, ModelElement, SceneElement, SkyElement };
package/dist/model.d.ts CHANGED
@@ -1,7 +1,8 @@
1
+ import { AsyncElement } from './async-element';
1
2
  /**
2
3
  * Represents a model in the PlayCanvas engine.
3
4
  */
4
- declare class ModelElement extends HTMLElement {
5
+ declare class ModelElement extends AsyncElement {
5
6
  private _asset;
6
7
  connectedCallback(): Promise<void>;
7
8
  _loadModel(): void;