-
Notifications
You must be signed in to change notification settings - Fork 5
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
More information on contributing and using the repository (#1)
- Loading branch information
Showing
1 changed file
with
20 additions
and
5 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,18 +2,21 @@ | |
|
||
[](https://lernajs.io/) | ||
|
||
A collection of Web Components to compose Three.js web apps. | ||
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 `<three-*>` elements and update their attribute values, driven by and bound to, data structures. | ||
|
||
## Status | ||
|
||
Alpha, early stages of design and implementation. | ||
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 | ||
$ npm install @petitatelier/three-app @petitatelier/three-camera ¬ | ||
@petitatelier/three-scene @petitatelier/three-planet | ||
``` | ||
|
||
The `<three-*>` web components can be used as follow (see also [demos/three-planet.html](demos/three-planet.html)): | ||
|
@@ -29,21 +32,33 @@ The `<three-*>` web components can be used as follow (see also [demos/three-plan | |
|
||
## 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]:olange/three-web-components.git | ||
$ cd three-web-components | ||
|
||
### Setup | ||
|
||
Run at first, and for every new package: | ||
|
||
$ npm run bootstrap | ||
|
||
### Run | ||
### Run the dev server & code | ||
|
||
Start the local HTTP dev server and visit http://localhost:8081/demos/: | ||
|
||
$ npm run dev | ||
|
||
### Publish to NPM | ||
|
||
$ npm run publish | ||
|
||
### Design | ||
|
||
See model in [design intentions](DESIGN.md). | ||
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. |