Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aurailus/orca2023
https://github.com/aurailus/orca2023
Last synced: 27 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/aurailus/orca2023
- Owner: Aurailus
- Created: 2024-02-21T18:04:56.000Z (9 months ago)
- Default Branch: master
- Last Pushed: 2024-02-21T18:05:27.000Z (9 months ago)
- Last Synced: 2024-05-02T03:05:02.427Z (7 months ago)
- Language: TypeScript
- Size: 49.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Three.js TypeScript Boilerplate
This boilerplate is supplementary to my book titled **Three.js and TypeScript** (ASIN : B09GYTKRCH)
https://www.amazon.com/dp/B09GYTKRCH
https://www.amazon.co.uk/dp/B09GYTKRCH
https://www.amazon.in/dp/B09GYTKRCH
https://www.amazon.de/dp/B09GYTKRCH
https://www.amazon.fr/dp/B09GYTKRCH
https://www.amazon.es/dp/B09GYTKRCH
https://www.amazon.it/dp/B09GYTKRCH
https://www.amazon.nl/dp/B09GYTKRCH
https://www.amazon.co.jp/dp/B09GYTKRCH
https://www.amazon.ca/dp/B09GYTKRCH
https://www.amazon.com.br/dp/B09GYTKRCH
https://www.amazon.com.mx/dp/B09GYTKRCH
https://www.amazon.com.au/dp/B09GYTKRCHand my **ThreeJS and TypeScript** courses at [Udemy](https://www.udemy.com/course/threejs-tutorials/?referralCode=4C7E1DE91C3E42F69D0F), [YouTube (Channel membership required)](https://www.youtube.com/playlist?list=PLKWUX7aMnlEKTmkBqwjc-tZgULJdNBjEd) and [Skillshare](https://skl.sh/2uxctEP)
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.
![](docs/screengrab1.jpg)
## 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)
![With Stats.js](docs/with-stats.jpg)
### 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)
![With Stats.js and Dat.GUI](docs/with-stats-gui.jpg)
### 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)
![With SocketIO](docs/with-socketio.jpg)
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)
![With Cannon.js](docs/with-cannonjs.jpg)
### 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)
![With Webcam as Texture](docs/with-webcam.jpg)
### 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)
![With BSC5 Bright Star Catalog](docs/with-bsc5.jpg)
### 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)
![The Ball Game](docs/theballgame.jpg)
### 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)
![With Annotations](docs/annotations.jpg)
### 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)
![With CSG](docs/with-csg.jpg)
### 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)
![With WebXR](docs/with-webxr.jpg)
---
## 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.
[![ThreeJS and TypeScript Course](docs/threejs-course-image.png)](https://youtu.be/fS4H7gm7gK4)
## Design Patterns In TypeScript
To help support my TypeScript projects, please check out my book titled **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)
## 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)
![Straight Car](/docs/sc-demo.gif)
### 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)
![Ball-VR](/docs/ball-vr-demo.gif)
## 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)
![First Car Shooter](/docs/fcs-demo.gif)