https://github.com/petitatelier/three-web-components
A collection of Web Components to compose Three.js apps
https://github.com/petitatelier/three-web-components
3d lit-element three webcomponents
Last synced: about 1 month ago
JSON representation
A collection of Web Components to compose Three.js apps
- Host: GitHub
- URL: https://github.com/petitatelier/three-web-components
- Owner: petitatelier
- License: bsd-3-clause
- Created: 2019-02-19T12:29:02.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-05T16:14:58.000Z (over 2 years ago)
- Last Synced: 2025-04-12T02:23:31.360Z (about 1 month ago)
- Topics: 3d, lit-element, three, webcomponents
- Language: JavaScript
- Size: 4.17 MB
- Stars: 46
- Watchers: 4
- Forks: 5
- Open Issues: 31
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Three Web Components
[](https://lernajs.io/) [](https://www.npmjs.com/package/@petitatelier/three-app)
A collection of Web Components to compose Three.js web apps, as simply as dropping them in the DOM and defining their attributes.
Based on [Lit-Element](https://lit-element.polymer-project.org), which allows you to generate a hierarchy of `` elements and update their attribute values, driven by and bound to, data structures.
## Status
Alpha, early stages of design and implementation. Ideas and contributions appreciated and welcomed. Open an issue or submit a PR, if you'd like to participate.
## Usage
Install the packages of the web components you want; they are packaged separately:
```
$ npm install @petitatelier/three-app @petitatelier/three-camera ¬
@petitatelier/three-scene @petitatelier/three-planet
```
The `` web components can be used as follow (see also [demos/three-planet.html](demos/three-planet.html)):
```html
```
## Contributing
This project uses [Lerna](https://lernajs.io) to manage the packages of this mono-repository. You can execute `npx lerna …` to run any Lerna command on the packages.
Lerna basically executes your command on each package of the repository. We commonly use the the following commands, wrapped as NPM scripts for convenience.
### Clone
$ git clone [email protected]:petitatelier/three-web-components.git
$ cd three-web-components
### Setup
Run at first, and for every new package:
$ npm run bootstrap
### Run the dev server & code
Start the local _HTTP dev server_ and visit http://localhost:8081/demos/:
$ npm run dev
Alternatively, to start a mini _OSC relay server_ at same time — to orbit a camera from a remote OSC controller:
$ npm run dev:osc
### Publish to NPM
$ npm run publish
### Design
See model in [design intentions](DESIGN.md), it shows some of the initial ideas.
When creating an app, you would generally create one of more new Web Components, based on the [`ThreeObject`](packages/three-object/three-object.js) class — which itself inherits from `LitElement` — and add it to a scene. See the [packages/three-planet](packages/three-planet/three-planet.js) package for an example.