https://github.com/aslepushko/rnder
https://github.com/aslepushko/rnder
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/aslepushko/rnder
- Owner: ASlepushko
- License: mit
- Created: 2023-04-29T21:52:00.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2023-04-29T22:13:51.000Z (about 2 years ago)
- Last Synced: 2025-02-18T21:41:03.393Z (4 months ago)
- Language: TypeScript
- Size: 24.9 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## 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. 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.
```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 [http://127.0.0.1:8080](http://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/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)

### 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)
