https://github.com/makimenko/angular-template-for-threejs
Angular Template For Three.js
https://github.com/makimenko/angular-template-for-threejs
3d angular dummies examples template three threejs
Last synced: 3 months ago
JSON representation
Angular Template For Three.js
- Host: GitHub
- URL: https://github.com/makimenko/angular-template-for-threejs
- Owner: makimenko
- License: mit
- Created: 2017-12-12T10:36:54.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2024-10-15T05:57:23.000Z (about 1 year ago)
- Last Synced: 2025-07-31T04:17:38.247Z (3 months ago)
- Topics: 3d, angular, dummies, examples, template, three, threejs
- Language: TypeScript
- Homepage: https://makimenko.github.io/angular-template-for-threejs/storybook
- Size: 121 MB
- Stars: 146
- Watchers: 17
- Forks: 44
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
Awesome Lists containing this project
- awesome-angular - angular-template-for-threejs - Angular Template For Three.js. (Table of contents / Angular)
- fucking-awesome-angular - angular-template-for-threejs - Angular Template For Three.js. (Table of contents / Angular)
- fucking-awesome-angular - angular-template-for-threejs - Angular Template For Three.js. (Table of contents / Angular)
README
[](https://github.com/makimenko/angular-template-for-threejs)
[](https://snyk.io/test/github/makimenko/angular-template-for-threejs)
[](https://codecov.io/gh/makimenko/angular-template-for-threejs)
[](https://badge.fury.io/js/atft)
[](https://makimenko.github.io/angular-template-for-threejs/storybook)
# Angular Template For Three.js (atft)
Leverage [Three.js](https://threejs.org) in your Angular app using simple components:
```html
```
## Storybook
*Explore provided Angular components in isolation!*
Click below to see the demo in a web browser:
## Goals of _this_ repo
- Implement npm [**atft**](https://www.npmjs.com/package/atft) library
- Bindings for Three.js
- SceneComponent with basic usage of scene, camera, lights, helpers, renderer
- Integrated Three.js examples as components (e.g. OrbitControls, OBJLoader, ObjectLoader)
- Develop and test library components in isolation via [**Storybook**](https://makimenko.github.io/angular-template-for-threejs/storybook)
## Usage in your Angular project
1. Set up an Angular project and install dependencies:
```
npm i three dagre atft yaml --save
npm i @types/dagre @types/three --save-dev
```
3. Import library into your module:
```typescript
import { AtftModule } from 'atft';
...
imports: [
...
AtftModule
]
...
```
4. Use atft library components in `src/app.component.html`:
```html
```
5. (optionally) if you want to fit 3D scene canvas into entire screen (horizontally and vertically):
in `src/styles.css`:
```css
html, body {
height: 100%;
margin: 0;
}
```
in `src/app/app.component.css`:
```css
:host {
height: 100%;
display: flex;
}
```
## Used by
Sample [vect](https://github.com/makimenko/vect) project, which is based on atft library:
## Development
### Build Library
1. `git clone https://github.com/makimenko/angular-template-for-threejs.git`
2. `npm install`
3. `ng build atft`
### Run Tests
- `npm test`
### Run Storybook
Run and watch locally: `npm run storybook`
Our storybook config is in [`./storybook`](./.storybook) and our stories in [`./src/stories`](./src/stories).
See the official [Storybook.js documentation](https://storybook.js.org) for more information.
### API Documentation
For mode details see [API documentation](https://makimenko.github.io/angular-template-for-threejs)
### Release and Changelog
- Follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).
- See [standard-version](https://github.com/conventional-changelog/standard-version) guidelines for release and changelog update.
To automatically generate changelog and bump `atft` version:
```
npm run release
```
### Contributors
- [
ComFreek](https://github.com/ComFreek)
- [
makimenko](https://github.com/makimenko)
_Feel free to join us! Just submit your ideas via pull-requests :)_