{"id":19610318,"url":"https://github.com/axiomecg/ng-three-starter-kit","last_synced_at":"2025-06-12T10:09:37.296Z","repository":{"id":40594672,"uuid":"507383318","full_name":"AxiomeCG/ng-three-starter-kit","owner":"AxiomeCG","description":"Angular 14 Starter Kit for ThreeJS (based on the ThreeJS Journey)","archived":false,"fork":false,"pushed_at":"2022-11-14T09:51:37.000Z","size":45578,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-11T11:34:48.244Z","etag":null,"topics":["3d","angular","angular14","starter-kit","starter-template","threejs","threejs-example","typescript","webgl"],"latest_commit_sha":null,"homepage":"https://AxiomeCG.github.io/docs/ng-three-starter-kit/v0.5.0/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"cc0-1.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AxiomeCG.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-06-25T18:06:00.000Z","updated_at":"2025-01-01T09:26:00.000Z","dependencies_parsed_at":"2022-07-16T18:16:55.153Z","dependency_job_id":null,"html_url":"https://github.com/AxiomeCG/ng-three-starter-kit","commit_stats":null,"previous_names":["axiomecg/ng-three-starter-kit"],"tags_count":10,"template":true,"template_full_name":null,"purl":"pkg:github/AxiomeCG/ng-three-starter-kit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxiomeCG%2Fng-three-starter-kit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxiomeCG%2Fng-three-starter-kit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxiomeCG%2Fng-three-starter-kit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxiomeCG%2Fng-three-starter-kit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AxiomeCG","download_url":"https://codeload.github.com/AxiomeCG/ng-three-starter-kit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AxiomeCG%2Fng-three-starter-kit/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259444968,"owners_count":22858549,"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","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","angular14","starter-kit","starter-template","threejs","threejs-example","typescript","webgl"],"created_at":"2024-11-11T10:28:11.799Z","updated_at":"2025-06-12T10:09:37.273Z","avatar_url":"https://github.com/AxiomeCG.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n\t\u003cbr\u003e\n    \u003cimg src=\"trivia/ng-three-starter-kit-logo.png\" width=\"200\" height=\"200\"\u003e\n\t\u003ch1\u003eng-three-starter-kit\u003c/h1\u003e\n\t\u003cp\u003e\n\t\t\u003cb\u003eAn Angular 14 template for your ThreeJS experiences\u003c/b\u003e\n\t\u003c/p\u003e\n    \u003cp align=\"center\"\u003e\n        \u003ca src=\"https://sonarcloud.io/summary/new_code?id=Exomus_ng-three-starter-kit\" \u003e\n            \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=Exomus_ng-three-starter-kit\u0026metric=security_rating\" alt=\"SonarCloud Security Badge metric\"/\u003e\n        \u003c/a\u003e\n        \u003ca src=\"https://sonarcloud.io/summary/new_code?id=Exomus_ng-three-starter-kit\" \u003e\n            \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=Exomus_ng-three-starter-kit\u0026metric=sqale_rating\" alt=\"SonarCloud Maintainability Badge metric\"/\u003e\n        \u003c/a\u003e\n        \u003ca src=\"https://sonarcloud.io/summary/new_code?id=Exomus_ng-three-starter-kit\" \u003e\n            \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=Exomus_ng-three-starter-kit\u0026metric=code_smells\" alt=\"SonarCloud Code Smells Badge metric\"/\u003e\n        \u003c/a\u003e\n        \u003ca src=\"https://sonarcloud.io/summary/new_code?id=Exomus_ng-three-starter-kit\" \u003e\n            \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=Exomus_ng-three-starter-kit\u0026metric=ncloc\" alt=\"SonarCloud Number  Badge metric\"/\u003e\n        \u003c/a\u003e\n        \u003ca src=\"https://sonarcloud.io/summary/new_code?id=Exomus_ng-three-starter-kit\" \u003e\n            \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=Exomus_ng-three-starter-kit\u0026metric=sqale_index\"/\u003e\n        \u003c/a\u003e \n        \u003ca src=\"https://sonarcloud.io/summary/new_code?id=Exomus_ng-three-starter-kit\" \u003e\n            \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=Exomus_ng-three-starter-kit\u0026metric=reliability_rating\"/\u003e\n        \u003c/a\u003e\n        \u003ca src=\"https://sonarcloud.io/summary/new_code?id=Exomus_ng-three-starter-kit\" \u003e\n            \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=Exomus_ng-three-starter-kit\u0026metric=duplicated_lines_density\"/\u003e\n        \u003c/a\u003e\n        \u003ca src=\"https://sonarcloud.io/summary/new_code?id=Exomus_ng-three-starter-kit\" \u003e\n            \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=Exomus_ng-three-starter-kit\u0026metric=vulnerabilities\"/\u003e\n        \u003c/a\u003e\n        \u003ca src=\"https://sonarcloud.io/summary/new_code?id=Exomus_ng-three-starter-kit\" \u003e\n            \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=Exomus_ng-three-starter-kit\u0026metric=bugs\"/\u003e\n        \u003c/a\u003e\n        \u003ca src=\"https://0xaxiome.github.io/docs/ng-three-starter-kit/v0.5.0/\"\u003e\n            \u003cimg src=\"https://0xaxiome.github.io/docs/ng-three-starter-kit/v0.5.0/images/coverage-badge-documentation.svg\"\u003e\n        \u003c/a\u003e\n    \u003c/p\u003e\n\u003c/div\u003e\n\u003cbr\u003e\n    \n\u003c/p\u003e\n\n# Stack 🧰\n\n\u003cp\u003e\n    \u003cimg src=\"https://img.shields.io/badge/angular-%23DD0031.svg?style=for-the-badge\u0026logo=angular\u0026logoColor=white\" alt=\"Angular Badge\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/threejs-black?style=for-the-badge\u0026logo=three.js\u0026logoColor=white\" alt=\"ThreeJS Badge\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge\u0026logo=typescript\u0026logoColor=white\" alt=\"Typescript Badge\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/SASS-hotpink.svg?style=for-the-badge\u0026logo=SASS\u0026logoColor=white\" alt=\"SASS Badge\"\u003e\n\u003c/p\u003e\n\n- Angular v14\n- Threejs (r146)\n- @types/three (r146)\n\n# Quick Start 🏁\n\n➡️[ Documentation ](https://0xaxiome.github.io/)⬅️\n\n## How to use this template 🔧\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"trivia/use-template.gif\" width=\"80%\" alt=\"Demonstration about how to use this template in GitHub\"\u003e\n\u003c/p\u003e\n\n- Click on [***Use this template***](https://github.com/Exomus/ng-three-starter-kit/generate)\n- Enter the ✨*awesome*✨ name of your repository\n- Choose the visibility of the repo\n- Click on ***Create repository from template***\n- You are now the owner of a new Angular ThreeJS project. Congratulations !\n\n(You can clone your new repository with `git clone \u003cname-of-your-repository\u003e` in your Terminal)\n\n## Serve the application 👨‍💻\n\n```shell\nnpm start\n```\n\n\u003cp align=\"center\"\u003eor\u003c/p\u003e\n\n```shell\nng serve\n```\n\nBy default, you can access it through: http://localhost:4200/\n\n### What you should see\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"trivia/serve.gif\" width=\"80%\" alt=\"Result of the ng serve: A glTF fox model on a floor. The camera is moving around it.\"\u003e\n\u003c/p\u003e\n\n## Build the application 🏗️\n\n```shell\nnpm run build\n```\n\n\u003cp align=\"center\"\u003eor\u003c/p\u003e\n\n```shell\nng build\n```\n\nA `dist` folder is generated that can be statically hosted.\n\n## Debug and tweak your 3D scene with lil-gui 🐞\n\nBy default, you can add `#debug` in the URL to access the debug panel, useful to tweak your scene.\n\nBe sure to give **a reload** if you cannot see it.\n\n### What you can expect to see\n\n\u003cp align=\"center\"\u003e\n    \u003cimg src=\"trivia/debug.gif\" width=\"80%\" alt=\"Demonstration of adding the #debug to the URL and force the reload of the page. The Debug GUI is now on screen.\"\u003e\n\u003c/p\u003e\n\n# Special Thanks 💖\n\nHuge thanks to [Bruno Simon](https://twitter.com/bruno_simon) for all the inspiration and the lessons\nhe provides kindly.\n\nThis project is highly inspired by the [Threejs Journey](https://threejs-journey.com/) (Highly recommend it by the way).\n\nI reworked the whole thing, so that it would fit in an Angular 14 project, with Typescript, obviously.\n\n# Features 🛠️\n\n- Boilerplate code to set up the Threejs Scene, ready to use.\n- 3D Assets to test that the template is working for you with the loaders.\n    - GLTF Loader: You should see the\n      famous [GLTF Fox](https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Fox) on startup (animated)\n    - Texture Loader: You should see the floor with both color and normal textures.\n    - Cube Texture Loader: You should also see that the environment map is loaded and applied on the scene.\n- Architecture of the project in many folders to keep it organized\n- Debug UI integrated (equivalent to dat-gui) and easily accessible due to static singleton pattern\n- Util service\n    - Executes the animation loop and the resize outside the NgZone to avoid performance issues due to Angular's Change\n      detection\n    - Information obtainable easily without painful constructor argument everywhere. (static method)\n    - Provides a PointerService to handle pointermove events and executes the pointermove callback of the engine outside\n      the NgZone\n\n# Incoming Features ⚙️\n\n- Jest integration for unit testing (over Karma/Jasmine)\n- Draco Compression option handling for the GLTF loader\n\n# Notes 🗒️\n\nYou don't need to use the \"THREE\" namespace in the project as usual.\nYou can simply put the name of the type you want to use and put the right import.\n\n```typescript\nimport * as THREE from 'three';\n\nconst geometry = new THREE.BoxBufferGeometry(1, 1, 1);\nconst material = new THREE.MeshBasicMaterial({ color: 0xff0000 });\n\nconst mesh = new THREE.Mesh(geometry, material);\n//...\n```\n\nbecomes\n\n```typescript\nimport { BoxBufferGeometry, MeshBasicMaterial, Mesh } from 'three';\n\nconst geometry = new BoxBufferGeometry(1, 1, 1);\nconst material = new MeshBasicMaterial({ color: 0xff0000 });\n\nconst mesh = new Mesh(geometry, material);\n//...\n```\n\nIt's, in my opinion, a more angular-friendly way of writing our code.\n\n# Twitter 🐦\n\nYou can reach me on Twitter:\n\n[![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge\u0026logo=Twitter\u0026logoColor=white)](https://twitter.com/axiom_3d)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxiomecg%2Fng-three-starter-kit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Faxiomecg%2Fng-three-starter-kit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Faxiomecg%2Fng-three-starter-kit/lists"}