Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/axiomecg/ng-three-starter-kit
Angular 14 Starter Kit for ThreeJS (based on the ThreeJS Journey)
https://github.com/axiomecg/ng-three-starter-kit
3d angular angular14 starter-kit starter-template threejs threejs-example typescript webgl
Last synced: 3 months ago
JSON representation
Angular 14 Starter Kit for ThreeJS (based on the ThreeJS Journey)
- Host: GitHub
- URL: https://github.com/axiomecg/ng-three-starter-kit
- Owner: AxiomeCG
- License: cc0-1.0
- Created: 2022-06-25T18:06:00.000Z (over 2 years ago)
- Default Branch: master
- Last Pushed: 2022-11-14T09:51:37.000Z (about 2 years ago)
- Last Synced: 2023-05-31T11:45:09.894Z (over 1 year ago)
- Topics: 3d, angular, angular14, starter-kit, starter-template, threejs, threejs-example, typescript, webgl
- Language: TypeScript
- Homepage: https://0xAxiome.github.io/docs/ng-three-starter-kit/v0.4.0/
- Size: 43.5 MB
- Stars: 7
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
ng-three-starter-kit
An Angular 14 template for your ThreeJS experiences
# Stack 🧰
- Angular v14
- Threejs (r146)
- @types/three (r146)
# Quick Start 🏁
➡️[ Documentation ](https://0xaxiome.github.io/)⬅️
## How to use this template 🔧
- Click on [***Use this template***](https://github.com/Exomus/ng-three-starter-kit/generate)
- Enter the ✨*awesome*✨ name of your repository
- Choose the visibility of the repo
- Click on ***Create repository from template***
- You are now the owner of a new Angular ThreeJS project. Congratulations !
(You can clone your new repository with `git clone ` in your Terminal)
## Serve the application 👨💻
```shell
npm start
```
or
```shell
ng serve
```
By default, you can access it through: http://localhost:4200/
### What you should see
## Build the application 🏗️
```shell
npm run build
```
or
```shell
ng build
```
A `dist` folder is generated that can be statically hosted.
## Debug and tweak your 3D scene with lil-gui 🐞
By default, you can add `#debug` in the URL to access the debug panel, useful to tweak your scene.
Be sure to give **a reload** if you cannot see it.
### What you can expect to see
# Special Thanks 💖
Huge thanks to [Bruno Simon](https://twitter.com/bruno_simon) for all the inspiration and the lessons
he provides kindly.
This project is highly inspired by the [Threejs Journey](https://threejs-journey.com/) (Highly recommend it by the way).
I reworked the whole thing, so that it would fit in an Angular 14 project, with Typescript, obviously.
# Features 🛠️
- Boilerplate code to set up the Threejs Scene, ready to use.
- 3D Assets to test that the template is working for you with the loaders.
- GLTF Loader: You should see the
famous [GLTF Fox](https://github.com/KhronosGroup/glTF-Sample-Models/tree/master/2.0/Fox) on startup (animated)
- Texture Loader: You should see the floor with both color and normal textures.
- Cube Texture Loader: You should also see that the environment map is loaded and applied on the scene.
- Architecture of the project in many folders to keep it organized
- Debug UI integrated (equivalent to dat-gui) and easily accessible due to static singleton pattern
- Util service
- Executes the animation loop and the resize outside the NgZone to avoid performance issues due to Angular's Change
detection
- Information obtainable easily without painful constructor argument everywhere. (static method)
- Provides a PointerService to handle pointermove events and executes the pointermove callback of the engine outside
the NgZone
# Incoming Features ⚙️
- Jest integration for unit testing (over Karma/Jasmine)
- Draco Compression option handling for the GLTF loader
# Notes 🗒️
You don't need to use the "THREE" namespace in the project as usual.
You can simply put the name of the type you want to use and put the right import.
```typescript
import * as THREE from 'three';
const geometry = new THREE.BoxBufferGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const mesh = new THREE.Mesh(geometry, material);
//...
```
becomes
```typescript
import { BoxBufferGeometry, MeshBasicMaterial, Mesh } from 'three';
const geometry = new BoxBufferGeometry(1, 1, 1);
const material = new MeshBasicMaterial({ color: 0xff0000 });
const mesh = new Mesh(geometry, material);
//...
```
It's, in my opinion, a more angular-friendly way of writing our code.
# Twitter 🐦
You can reach me on Twitter:
[](https://twitter.com/axiom_3d)