JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 349
  • Score
    100M100P100Q88245F
  • License MIT

Web Components for the PlayCanvas Engine

Package Exports

  • @playcanvas/web-components
  • @playcanvas/web-components/dist/pwc.cjs
  • @playcanvas/web-components/dist/pwc.js
  • @playcanvas/web-components/dist/pwc.mjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@playcanvas/web-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PlayCanvas Web Components

NPM Version NPM Downloads License GitHub Actions Build Status

| User Guide | API Reference | Examples | Blog | Forum | Discord |

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:

<!-- A lit sphere -->
<pc-app>
    <pc-scene>
        <pc-entity name="camera" position="0 0 3">
            <pc-camera></pc-camera>
        </pc-entity>
        <pc-entity name="light" rotation="45 45 0">
            <pc-light></pc-light>
        </pc-entity>
        <pc-entity name="ball">
            <pc-render type="sphere"></pc-render>
        </pc-entity>
    </pc-scene>
</pc-app>

Examples

image

See PlayCanvas Web Components in action here: https://playcanvas.github.io/web-components/examples

Usage

Please see the Getting Started Guide for installation and usage instructions.

Development

Setting Up Local Development

  1. Clone the repository:

    git clone https://github.com/playcanvas/web-components.git
    cd web-components
  2. Install dependencies:

    npm install
  3. Build the library in watch mode and start the development server:

    npm run dev
  4. Open http://localhost:3000/examples/ in your browser to see the examples.

Building

To build the library:

npm run build

The built files will be available in the dist directory.

API Documentation

To generate API documentation:

npm run docs

The documentation will be generated in the docs directory.