Skip to content

Commit 745c6e3

Browse files
committed
fix: expose utils "is"
1 parent be3e7e3 commit 745c6e3

File tree

3 files changed

+58
-20
lines changed

3 files changed

+58
-20
lines changed

README.md

+2-16
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,3 @@
1-
# AngularThree
1+
# AngularThree workspace
22

3-
<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
4-
5-
**This workspace has been generated by [Nx, a Smart, fast and extensible build system.](https://nx.dev)**
6-
7-
## Understand this workspace
8-
9-
Run `nx graph` to see a diagram of the dependencies of the projects.
10-
11-
## Remote caching
12-
13-
Run `npx nx connect-to-nx-cloud` to enable [remote caching](https://nx.app) and make CI faster.
14-
15-
## Further help
16-
17-
Visit the [Nx Documentation](https://nx.dev) to learn more.
3+
Here, you'll find the main `angular-three` library and a `demo` application

libs/angular-three/README.md

+55-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,58 @@
1-
# angular-three
1+
# Angular Renderer for THREE.js
22

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)
44

5-
## Running unit tests
5+
## Installation
66

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

libs/angular-three/src/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export * from './lib/stores/store';
77
export * from './lib/stores/rx-store';
88
export * from './lib/utils/instance';
99
export * from './lib/utils/update';
10+
export * from './lib/utils/is';
1011
export * from './lib/loader';
1112
export * from './lib/di/ref';
1213
export * from './lib/di/destroy';

0 commit comments

Comments
 (0)