{"id":13406601,"url":"https://github.com/makimenko/angular-template-for-threejs","last_synced_at":"2025-08-07T19:59:18.050Z","repository":{"id":27451698,"uuid":"113977444","full_name":"makimenko/angular-template-for-threejs","owner":"makimenko","description":"Angular Template For Three.js","archived":false,"fork":false,"pushed_at":"2024-10-15T05:57:23.000Z","size":126734,"stargazers_count":146,"open_issues_count":18,"forks_count":44,"subscribers_count":17,"default_branch":"master","last_synced_at":"2025-07-31T04:17:38.247Z","etag":null,"topics":["3d","angular","dummies","examples","template","three","threejs"],"latest_commit_sha":null,"homepage":"https://makimenko.github.io/angular-template-for-threejs/storybook","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/makimenko.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"makimenko"}},"created_at":"2017-12-12T10:36:54.000Z","updated_at":"2024-10-02T12:49:02.000Z","dependencies_parsed_at":"2023-12-07T21:24:19.994Z","dependency_job_id":"8e372d3c-6758-4765-81cf-2f678f8e2a1b","html_url":"https://github.com/makimenko/angular-template-for-threejs","commit_stats":{"total_commits":811,"total_committers":12,"mean_commits":67.58333333333333,"dds":"0.38347718865598024","last_synced_commit":"6d69426e799b379a6aba73ef157c10ebc3b2ca9b"},"previous_names":[],"tags_count":30,"template":false,"template_full_name":null,"purl":"pkg:github/makimenko/angular-template-for-threejs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makimenko%2Fangular-template-for-threejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makimenko%2Fangular-template-for-threejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makimenko%2Fangular-template-for-threejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makimenko%2Fangular-template-for-threejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/makimenko","download_url":"https://codeload.github.com/makimenko/angular-template-for-threejs/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/makimenko%2Fangular-template-for-threejs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":269316909,"owners_count":24396831,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-07T02:00:09.698Z","response_time":73,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","angular","dummies","examples","template","three","threejs"],"created_at":"2024-07-30T19:02:34.522Z","updated_at":"2025-08-07T19:59:18.010Z","avatar_url":"https://github.com/makimenko.png","language":"TypeScript","funding_links":["https://github.com/sponsors/makimenko"],"categories":["TypeScript","Table of contents"],"sub_categories":["Angular"],"readme":"[![GitHub repo](https://img.shields.io/github/stars/makimenko/angular-template-for-threejs?label=GitHub\u0026style=social)](https://github.com/makimenko/angular-template-for-threejs)\n![CI build status](https://github.com/makimenko/angular-template-for-threejs/workflows/CI/badge.svg)\n[![Known Vulnerabilities](https://snyk.io/test/github/makimenko/angular-template-for-threejs/badge.svg)](https://snyk.io/test/github/makimenko/angular-template-for-threejs)\n[![Code coverage by codecov.io](https://codecov.io/gh/makimenko/angular-template-for-threejs/branch/master/graph/badge.svg)](https://codecov.io/gh/makimenko/angular-template-for-threejs)\n[![npm version](https://badge.fury.io/js/atft.svg)](https://badge.fury.io/js/atft)\n[![Storybook link](https://raw.githubusercontent.com/storybooks/brand/master/badge/badge-storybook.svg?sanitize=true)](https://makimenko.github.io/angular-template-for-threejs/storybook)\n\n\n# Angular Template For Three.js (atft)\n\nLeverage [Three.js](https://threejs.org) in your Angular app using simple components:\n\n```html\n\u003catft-orbit-controls [rotateSpeed]=1 [zoomSpeed]=1.2\u003e\n  \u003catft-renderer-canvas\u003e\n    \u003catft-perspective-camera\n      [fov]=60 [near]=1 [far]=1100\n      positionX=20 [positionY]=50 [positionZ]=50\u003e\n    \u003c/atft-perspective-camera\u003e\n    \u003catft-scene\u003e\n      \u003catft-axes-helper [size]=200\u003e\u003c/atft-axes-helper\u003e\n      \u003catft-grid-helper [size]=100 [divisions]=10\u003e\u003c/atft-grid-helper\u003e\n    \u003c/atft-scene\u003e\n  \u003c/atft-renderer-canvas\u003e\n\u003c/atft-orbit-controls\u003e\n```\n\n## Storybook\n\n*Explore provided Angular components in isolation!*\n\nClick below to see the demo in a web browser:\u003cbr\u003e\n\u003ca href=\"https://makimenko.github.io/angular-template-for-threejs/storybook\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/makimenko/files/master/angular-template-for-threejs/images/storybook.gif\"\u003e\n\u003c/a\u003e\n\n## Goals of _this_ repo\n\n- Implement npm [**atft**](https://www.npmjs.com/package/atft) library\n  - Bindings for Three.js\n  - SceneComponent with basic usage of scene, camera, lights, helpers, renderer\n  - Integrated Three.js examples as components (e.g. OrbitControls, OBJLoader, ObjectLoader)\n- Develop and test library components in isolation via [**Storybook**](https://makimenko.github.io/angular-template-for-threejs/storybook)\n\n## Usage in your Angular project\n\n1. Set up an Angular project and install dependencies:\n   ```\n   npm i three dagre atft yaml --save\n   npm i @types/dagre @types/three --save-dev\n   ```\n3. Import library into your module:\n   ```typescript\n   import { AtftModule } from 'atft';\n   ...\n     imports: [\n       ...\n       AtftModule\n     ]\n    ...\n   ```\n4. Use atft library components in `src/app.component.html`:\n    ```html\n    \u003catft-orbit-controls [rotateSpeed]=1 [zoomSpeed]=1.2\u003e\n      \u003catft-renderer-canvas #mainRenderer\u003e\n        \u003catft-perspective-camera\n          [fov]=60 [near]=1 [far]=1100\n          [positionX]=20 [positionY]=50 [positionZ]=50\u003e\n        \u003c/atft-perspective-camera\u003e\n        \u003catft-scene\u003e\n          \u003catft-axes-helper [size]=200\u003e\u003c/atft-axes-helper\u003e\n          \u003catft-grid-helper [size]=100 [divisions]=10\u003e\u003c/atft-grid-helper\u003e\n        \u003c/atft-scene\u003e\n      \u003c/atft-renderer-canvas\u003e\n    \u003c/atft-orbit-controls\u003e\n    ```\n5. (optionally) if you want to fit 3D scene canvas into entire screen (horizontally and vertically):\n\n   in `src/styles.css`:\n   ```css\n    html, body {\n        height: 100%;\n        margin: 0;\n    }  \n    ```\n   in `src/app/app.component.css`:\n   ```css\n    :host {\n        height: 100%;\n        display: flex;\n    } \n    ```\n\n## Used by\nSample [vect](https://github.com/makimenko/vect) project, which is based on atft library:\n\n\u003ca href=\"https://github.com/makimenko/vect\"\u003e\n\u003cimg src=\"https://raw.githubusercontent.com/makimenko/files/master/vect/images/demo.gif\"\u003e\n\u003c/a\u003e\n\n## Development\n\n### Build Library\n\n1. `git clone https://github.com/makimenko/angular-template-for-threejs.git`\n2. `npm install`\n3. `ng build atft`\n\n### Run Tests\n\n- `npm test`\n\n### Run Storybook\n\nRun and watch locally: `npm run storybook`\n\nOur storybook config is in [`./storybook`](./.storybook) and our stories in [`./src/stories`](./src/stories).\nSee the official [Storybook.js documentation](https://storybook.js.org) for more information.\n\n### API Documentation\n\nFor mode details see [API documentation](https://makimenko.github.io/angular-template-for-threejs)\n\n### Release and Changelog\n- Follow [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).\n- See [standard-version](https://github.com/conventional-changelog/standard-version) guidelines for release and changelog update.\n\nTo automatically generate changelog and bump `atft` version:\n```\nnpm run release\n```\n\n### Contributors\n\n- [\u003cimg src=\"https://avatars0.githubusercontent.com/u/1827709?s=20\"\u003e ComFreek](https://github.com/ComFreek)\n- [\u003cimg src=\"https://avatars1.githubusercontent.com/u/11466819?s=20\"\u003e makimenko](https://github.com/makimenko)\n\n_Feel free to join us! Just submit your ideas via pull-requests :)_ \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakimenko%2Fangular-template-for-threejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmakimenko%2Fangular-template-for-threejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmakimenko%2Fangular-template-for-threejs/lists"}