Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/sean-bradley/three.js-typescript-boilerplate
Three.js TypeScript Boilerplate
https://github.com/sean-bradley/three.js-typescript-boilerplate
Last synced: 3 days ago
JSON representation
Three.js TypeScript Boilerplate
- Host: GitHub
- URL: https://github.com/sean-bradley/three.js-typescript-boilerplate
- Owner: Sean-Bradley
- License: mit
- Created: 2020-02-02T12:20:59.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-09-12T20:49:10.000Z (5 months ago)
- Last Synced: 2025-02-08T12:03:14.923Z (10 days ago)
- Language: TypeScript
- Size: 44.2 MB
- Stars: 547
- Watchers: 12
- Forks: 171
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# Three.js TypeScript Boilerplate
This boilerplate is supplementary to **ThreeJS and TypeScript** courses at [Udemy](https://www.udemy.com/course/threejs-tutorials/?referralCode=4C7E1DE91C3E42F69D0F) and [YouTube (Channel membership required)](https://www.youtube.com/playlist?list=PLKWUX7aMnlEKTmkBqwjc-tZgULJdNBjEd)
It is only just the beginning of what you will create.
Course Discount Coupons : https://sbcode.net/coupons#threejs
## Boilerplate Overview
When run, the boilerplate shows a green wireframe rotating cube, with OrbitControls included.
[Example](https://sbcode.net/threejs/threejs-typescript-boilerplate/)
It uses webpack-dev-server for the development build, and NodeJS with Express for production build.
Both server and client projects are written in TypeScript.
## Installing
1. Clone Repository
```bash
git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git
```
2. CD into folder
```bash
cd Three.js-TypeScript-Boilerplate
```
3. Install TypeScript
```bash
npm install -g typescript
```
4. Install dependencies
```bash
npm install
```
5. Start it
```bash
npm run dev
```
6. Visit [http://127.0.0.1:8080](http://127.0.0.1:8080)
You should see a rotating green wireframe cube, and be able to rotate it further with your mouse.
7. Edit project in VSCode
```bash
code .
```
## Branches
The default **master** branch does not include **Stats.js**, **Dat.GUI** or **Socket.IO**
### stats.js
To get a version of the boilerplate that includes the **Stats.js** panel then,
```bash
git checkout stats
npm install
npm run dev
```
Visit [http://127.0.0.1:8080](http://127.0.0.1:8080)
### DAT.gui
To get a version of the boilerplate that includes the **Stats** and the **Dat.GUI** panels then,
```bash
git checkout statsgui
npm install
npm run dev
```
Visit [http://127.0.0.1:8080](http://127.0.0.1:8080)
### Socket.IO
To get a version of the boilerplate that includes **Socket.IO** then,
```bash
git checkout socketio
npm install
npm run dev
```
Visit [http://127.0.0.1:8080](http://127.0.0.1:8080)
Open 2 or more browsers, and you can move the cube around and rotate it. You will see the cube mirror itself in the other browsers. Each browser controls there own cube.
### Cannon.js
To get a version of the boilerplate that includes **Cannon.js** then
```bash
git checkout cannonjs
npm install
npm run dev
```
Visit [http://127.0.0.1:8080](http://127.0.0.1:8080)
### Webcam as Texture
To get a version of the boilerplate that uses your webcam as a texture then
```bash
git checkout webcam
npm install
npm run dev
```
Visit [http://127.0.0.1:8080](http://127.0.0.1:8080)
### BSC5 Bright Star Catalog
To get a version of the boilerplate that shows the BSC5 Bright Star Catalog Data with Constellations
```bash
git checkout bsc5
npm install
npm run dev
```
Visit [http://127.0.0.1:8080](http://127.0.0.1:8080)
### The Ball Game
The Ball Game is an example of a multiplayer game using Threejs, SocketIO and server side Cannonjs.
To get The Ball Game branch
```bash
git checkout ballgame
npm install
npm run dev
```
Visit [http://127.0.0.1:8080](http://127.0.0.1:8080)
### Annotations
To get a version of the boilerplate that demonstrates annotations
```bash
git checkout annotations
npm install
npm run dev
```
Visit [http://127.0.0.1:8080](http://127.0.0.1:8080)
### Constructive Solid Geometry
To get a version of the boilerplate that demonstrates Constructive Solid Geometry (CSG)
```bash
git checkout csg
npm install
npm run dev
```
Visit [http://127.0.0.1:8080](http://127.0.0.1:8080)
### WebXR
To get a version of the boilerplate that demonstrates WebXR
```bash
git checkout webxr
npm install
npm run dev
```
Visit [https://127.0.0.1:8080](https://127.0.0.1:8080)
---
## ThreeJS and TypeScript Course Introduction Video
This boilerplate was created as a sub project of my [ThreeJS and TypeScript Course](https://www.udemy.com/course/threejs-tutorials/?referralCode=4C7E1DE91C3E42F69D0F) and is only just the beginning of what you will create.
[](https://youtu.be/cZWAqrJhtvQ)
## Games Created from this Boilerplate
### Straight Car (SC)
Demo : [https://sc.sbcode.net/](https://sc.sbcode.net/)
GitHub : [https://github.com/Sean-Bradley/Straight-Car](https://github.com/Sean-Bradley/Straight-Car)
### Ball-VR
Demo : [https://ball-vr.sbcode.net/](https://ball-vr.sbcode.net/)
GitHub : [https://github.com/Sean-Bradley/Ball-VR](https://github.com/Sean-Bradley/Ball-VR)
## First Car Shooter (FCS)
Demo : [https://fcs.sbcode.net/](https://fcs.sbcode.net/)
GitHub : [https://github.com/Sean-Bradley/First-Car-Shooter](https://github.com/Sean-Bradley/First-Car-Shooter)
## TypeScript Books
To help support my projects, please check out my TypeScript books.
### Design Patterns In TypeScript
https://www.amazon.com/dp/B0948BCH24
https://www.amazon.co.uk/dp/B0948BCH24
https://www.amazon.in/dp/B094716FD6
https://www.amazon.de/dp/B0948BCH24
https://www.amazon.fr/dp/B0948BCH24
https://www.amazon.es/dp/B0948BCH24
https://www.amazon.it/dp/B0948BCH24
https://www.amazon.co.jp/dp/B0948BCH24
https://www.amazon.ca/dp/B0948BCH24
https://www.amazon.com.au/dp/B094716FD6
(ASIN : B0948BCH24 / B094716FD6)