|
1 |
| -# angular-three |
| 1 | +# Angular Renderer for THREE.js |
2 | 2 |
|
3 |
| -This library was generated with [Nx](https://nx.dev). |
| 3 | +Leverage your [Angular](https://angular.io) to build 3D applications with [THREE.js](https://threejs.org) |
4 | 4 |
|
5 |
| -## Running unit tests |
| 5 | +## Installation |
6 | 6 |
|
7 |
| -Run `nx test angular-three` to execute the unit tests. |
| 7 | +```shell |
| 8 | +npm i angular-three three |
| 9 | +``` |
| 10 | + |
| 11 | +```shell |
| 12 | +npm i -D @types/three |
| 13 | +``` |
| 14 | + |
| 15 | +> Typically, we'd want to keep `three` and `@types/three` on the same minor version. Eg: `0.147`, `0.148` etc.. |
| 16 | +
|
| 17 | +## Simple usage |
| 18 | + |
| 19 | +1. Create a `Scene` component as a Standalone Component |
| 20 | + |
| 21 | +```ts |
| 22 | +import { extend } from 'angular-three'; |
| 23 | +import { Mesh, BoxGeometry, MeshBasicMaterial } from 'three'; |
| 24 | + |
| 25 | +extend({ Mesh, BoxGeometry, MeshBasicMaterial }); |
| 26 | + |
| 27 | +@Component({ |
| 28 | + standalone: true, |
| 29 | + template: ` |
| 30 | + <ngt-mesh> |
| 31 | + <ngt-box-geometry /> |
| 32 | + <ngt-mesh-basic-material color="darkred" /> |
| 33 | + </ngt-mesh> |
| 34 | + `, |
| 35 | + schemas: [CUSTOM_ELEMENTS_SCHEMA], |
| 36 | +}) |
| 37 | +export class Scene {} |
| 38 | +``` |
| 39 | + |
| 40 | +- `extend` will add the THREE entities to `angular-three` catalogue which allows the renderer to recognize the custom tags: `ngt-mesh`, `ngt-box-geometry` etc.. |
| 41 | +- Custom Element tags follow this rule: `ngt-` + THREE classes in **kebab-case**. `Mesh` -> `ngt-mesh` |
| 42 | +- `schemas: [CUSTOM_ELEMENTS_SCHEMA]` allows us to use custom tags on the template. This is Angular's limitation at the moment |
| 43 | + |
| 44 | +2. Render `<ngt-canvas>` component, use `Scene` component above to pass into `[scene]` input on `<ngt-canvas>` |
| 45 | + |
| 46 | +```html |
| 47 | +<ngt-canvas [scene]="Scene" /> |
| 48 | +``` |
| 49 | + |
| 50 | +- `ngt-canvas` creates the basic building blocks of THREE.js: a default `WebGLRenderer`, a default `Scene`, and a default `PerspectiveCamera` |
| 51 | + |
| 52 | +## Documentations |
| 53 | + |
| 54 | +Read more about Angular Three usages in [TBD Documentations]() |
| 55 | + |
| 56 | +## Contributions |
| 57 | + |
| 58 | +Contributions are welcomed |
0 commit comments