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, which allows you to generate a hierarchy of <three-*> elements and update their attribute values, driven by and bound to, data structures.
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.
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 <three-*> web components can be used as follow (see also demos/three-planet.html):
<three-app fps="24" camera="c01" scene="s01">
<three-camera id="c01" type="perspective" controls="osc orbitter"></three-camera>
<three-scene id="s01">
<three-planet id="earth" animate></three-planet>
</three-scene>
</three-app>
This project uses Lerna 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.
$ git clone git@github.com:petitatelier/three-web-components.git
$ cd three-web-components
Run at first, and for every new package:
$ npm run bootstrap
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
$ npm run publish
See model in design intentions, 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 class — which itself inherits from LitElement — and add it to a scene. See the packages/three-planet package for an example.