├── .github └── FUNDING.yml ├── .gitignore ├── .prettierrc ├── LICENSE ├── README.md ├── dist ├── client │ ├── bundle.js │ ├── bundle.js.LICENSE.txt │ ├── favicon.ico │ └── index.html └── server │ └── server.js ├── docs ├── annotations.jpg ├── ball-vr-demo.gif ├── dp-in-typescript.jpg ├── fcs-demo.gif ├── flag_au.gif ├── flag_br.gif ├── flag_ca.gif ├── flag_de.gif ├── flag_es.gif ├── flag_fr.gif ├── flag_in.gif ├── flag_it.gif ├── flag_jp.gif ├── flag_mx.gif ├── flag_nl.gif ├── flag_uk.gif ├── flag_us.gif ├── sc-demo.gif ├── screengrab1.jpg ├── theballgame.jpg ├── threejs-course-image.png ├── threejs-typescript-250.jpg ├── with-bsc5.jpg ├── with-cannonjs.jpg ├── with-csg.jpg ├── with-socketio.jpg ├── with-stats-gui.jpg ├── with-stats.jpg ├── with-webcam.jpg └── with-webxr.jpg ├── package.json └── src ├── client ├── client.ts ├── tsconfig.json ├── webpack.common.js ├── webpack.dev.js └── webpack.prod.js ├── server ├── server.ts └── tsconfig.json └── typings └── README.md /.github/FUNDING.yml: -------------------------------------------------------------------------------- 1 | # These are supported funding model platforms 2 | 3 | github: [Sean-Bradley]# Replace with up to 4 GitHub Sponsors-enabled usernames e.g., [user1, user2] 4 | patreon: seanwasere 5 | open_collective: # Replace with a single Open Collective username 6 | ko_fi: sean_bradley 7 | tidelift: # Replace with a single Tidelift platform-name/package-name e.g., npm/babel 8 | community_bridge: # Replace with a single Community Bridge project-name e.g., cloud-foundry 9 | liberapay: # Replace with a single Liberapay username 10 | issuehunt: # Replace with a single IssueHunt username 11 | otechie: # Replace with a single Otechie username 12 | custom: # Replace with up to 4 custom sponsorship URLs e.g., ['link1', 'link2'] 13 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | package-lock.json -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "arrowParens": "always", 3 | "bracketSpacing": true, 4 | "embeddedLanguageFormatting": "auto", 5 | "htmlWhitespaceSensitivity": "css", 6 | "insertPragma": false, 7 | "jsxBracketSameLine": false, 8 | "jsxSingleQuote": false, 9 | "printWidth": 100, 10 | "proseWrap": "preserve", 11 | "quoteProps": "as-needed", 12 | "requirePragma": false, 13 | "semi": false, 14 | "singleQuote": true, 15 | "tabWidth": 4, 16 | "trailingComma": "es5", 17 | "useTabs": false 18 | } -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 Sean Bradley 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Three.js TypeScript Boilerplate 2 | 3 | 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) 4 | 5 | It is only just the beginning of what you will create. 6 | 7 | Course Discount Coupons : https://sbcode.net/coupons#threejs 8 | 9 | ## Boilerplate Overview 10 | 11 | When run, the boilerplate shows a green wireframe rotating cube, with OrbitControls included. 12 | 13 | [Example](https://sbcode.net/threejs/threejs-typescript-boilerplate/) 14 | 15 | It uses webpack-dev-server for the development build, and NodeJS with Express for production build. 16 | 17 | Both server and client projects are written in TypeScript. 18 | 19 | ![](docs/screengrab1.jpg) 20 | 21 | ## Installing 22 | 23 | 1. Clone Repository 24 | 25 | ```bash 26 | git clone https://github.com/Sean-Bradley/Three.js-TypeScript-Boilerplate.git 27 | ``` 28 | 29 | 2. CD into folder 30 | 31 | ```bash 32 | cd Three.js-TypeScript-Boilerplate 33 | ``` 34 | 35 | 3. Install TypeScript 36 | 37 | ```bash 38 | npm install -g typescript 39 | ``` 40 | 41 | 4. Install dependencies 42 | 43 | ```bash 44 | npm install 45 | ``` 46 | 47 | 5. Start it 48 | 49 | ```bash 50 | npm run dev 51 | ``` 52 | 53 | 6. Visit [http://127.0.0.1:8080](http://127.0.0.1:8080) 54 | 55 | You should see a rotating green wireframe cube, and be able to rotate it further with your mouse. 56 | 57 | 7. Edit project in VSCode 58 | 59 | ```bash 60 | code . 61 | ``` 62 | 63 | ## Branches 64 | 65 | The default **master** branch does not include **Stats.js**, **Dat.GUI** or **Socket.IO** 66 | 67 | ### stats.js 68 | 69 | To get a version of the boilerplate that includes the **Stats.js** panel then, 70 | 71 | ```bash 72 | git checkout stats 73 | npm install 74 | npm run dev 75 | ``` 76 | 77 | Visit [http://127.0.0.1:8080](http://127.0.0.1:8080) 78 | 79 | ![With Stats.js](docs/with-stats.jpg) 80 | 81 | ### DAT.gui 82 | 83 | To get a version of the boilerplate that includes the **Stats** and the **Dat.GUI** panels then, 84 | 85 | ```bash 86 | git checkout statsgui 87 | npm install 88 | npm run dev 89 | ``` 90 | 91 | Visit [http://127.0.0.1:8080](http://127.0.0.1:8080) 92 | 93 | ![With Stats.js and Dat.GUI](docs/with-stats-gui.jpg) 94 | 95 | ### Socket.IO 96 | 97 | To get a version of the boilerplate that includes **Socket.IO** then, 98 | 99 | ```bash 100 | git checkout socketio 101 | npm install 102 | npm run dev 103 | ``` 104 | 105 | Visit [http://127.0.0.1:8080](http://127.0.0.1:8080) 106 | 107 | ![With SocketIO](docs/with-socketio.jpg) 108 | 109 | 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. 110 | 111 | ### Cannon.js 112 | 113 | To get a version of the boilerplate that includes **Cannon.js** then 114 | 115 | ```bash 116 | git checkout cannonjs 117 | npm install 118 | npm run dev 119 | ``` 120 | 121 | Visit [http://127.0.0.1:8080](http://127.0.0.1:8080) 122 | 123 | ![With Cannon.js](docs/with-cannonjs.jpg) 124 | 125 | ### Webcam as Texture 126 | 127 | To get a version of the boilerplate that uses your webcam as a texture then 128 | 129 | ```bash 130 | git checkout webcam 131 | npm install 132 | npm run dev 133 | ``` 134 | 135 | Visit [http://127.0.0.1:8080](http://127.0.0.1:8080) 136 | 137 | ![With Webcam as Texture](docs/with-webcam.jpg) 138 | 139 | ### BSC5 Bright Star Catalog 140 | 141 | To get a version of the boilerplate that shows the BSC5 Bright Star Catalog Data with Constellations 142 | 143 | ```bash 144 | git checkout bsc5 145 | npm install 146 | npm run dev 147 | ``` 148 | 149 | Visit [http://127.0.0.1:8080](http://127.0.0.1:8080) 150 | 151 | ![With BSC5 Bright Star Catalog](docs/with-bsc5.jpg) 152 | 153 | ### The Ball Game 154 | 155 | The Ball Game is an example of a multiplayer game using Threejs, SocketIO and server side Cannonjs. 156 | 157 | To get The Ball Game branch 158 | 159 | ```bash 160 | git checkout ballgame 161 | npm install 162 | npm run dev 163 | ``` 164 | 165 | Visit [http://127.0.0.1:8080](http://127.0.0.1:8080) 166 | 167 | ![The Ball Game](docs/theballgame.jpg) 168 | 169 | ### Annotations 170 | 171 | To get a version of the boilerplate that demonstrates annotations 172 | 173 | ```bash 174 | git checkout annotations 175 | npm install 176 | npm run dev 177 | ``` 178 | 179 | Visit [http://127.0.0.1:8080](http://127.0.0.1:8080) 180 | 181 | ![With Annotations](docs/annotations.jpg) 182 | 183 | ### Constructive Solid Geometry 184 | 185 | To get a version of the boilerplate that demonstrates Constructive Solid Geometry (CSG) 186 | 187 | ```bash 188 | git checkout csg 189 | npm install 190 | npm run dev 191 | ``` 192 | 193 | Visit [http://127.0.0.1:8080](http://127.0.0.1:8080) 194 | 195 | ![With CSG](docs/with-csg.jpg) 196 | 197 | ### WebXR 198 | 199 | To get a version of the boilerplate that demonstrates WebXR 200 | 201 | ```bash 202 | git checkout webxr 203 | npm install 204 | npm run dev 205 | ``` 206 | 207 | Visit [https://127.0.0.1:8080](https://127.0.0.1:8080) 208 | 209 | ![With WebXR](docs/with-webxr.jpg) 210 | 211 | --- 212 | 213 | ## ThreeJS and TypeScript Course Introduction Video 214 | 215 | 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. 216 | 217 | [![ThreeJS and TypeScript Course](docs/threejs-course-image.png)](https://youtu.be/cZWAqrJhtvQ) 218 | 219 | ## Games Created from this Boilerplate 220 | 221 | ### Straight Car (SC) 222 | 223 | Demo : [https://sc.sbcode.net/](https://sc.sbcode.net/) 224 | 225 | GitHub : [https://github.com/Sean-Bradley/Straight-Car](https://github.com/Sean-Bradley/Straight-Car) 226 | 227 | ![Straight Car](/docs/sc-demo.gif) 228 | 229 | ### Ball-VR 230 | 231 | Demo : [https://ball-vr.sbcode.net/](https://ball-vr.sbcode.net/) 232 | 233 | GitHub : [https://github.com/Sean-Bradley/Ball-VR](https://github.com/Sean-Bradley/Ball-VR) 234 | 235 | ![Ball-VR](/docs/ball-vr-demo.gif) 236 | 237 | ## First Car Shooter (FCS) 238 | 239 | Demo : [https://fcs.sbcode.net/](https://fcs.sbcode.net/) 240 | 241 | GitHub : [https://github.com/Sean-Bradley/First-Car-Shooter](https://github.com/Sean-Bradley/First-Car-Shooter) 242 | 243 | ![First Car Shooter](/docs/fcs-demo.gif) 244 | 245 | ## TypeScript Books 246 | 247 | To help support my projects, please check out my TypeScript books. 248 | 249 | ### Design Patterns In TypeScript 250 | 251 | 252 | 253 |    https://www.amazon.com/dp/B0948BCH24
254 |    https://www.amazon.co.uk/dp/B0948BCH24
255 |    https://www.amazon.in/dp/B094716FD6
256 |    https://www.amazon.de/dp/B0948BCH24
257 |    https://www.amazon.fr/dp/B0948BCH24
258 |    https://www.amazon.es/dp/B0948BCH24
259 |    https://www.amazon.it/dp/B0948BCH24
260 |    https://www.amazon.co.jp/dp/B0948BCH24
261 |    https://www.amazon.ca/dp/B0948BCH24
262 |    https://www.amazon.com.au/dp/B094716FD6
263 | 264 | (ASIN : B0948BCH24 / B094716FD6)
265 | 266 | -------------------------------------------------------------------------------- /dist/client/bundle.js.LICENSE.txt: -------------------------------------------------------------------------------- 1 | /** 2 | * @license 3 | * Copyright 2010-2023 Three.js Authors 4 | * SPDX-License-Identifier: MIT 5 | */ 6 | -------------------------------------------------------------------------------- /dist/client/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/dist/client/favicon.ico -------------------------------------------------------------------------------- /dist/client/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Three.js TypeScript Tutorials by Sean Bradley 7 | 13 | 14 | 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /dist/server/server.js: -------------------------------------------------------------------------------- 1 | "use strict"; 2 | var __importDefault = (this && this.__importDefault) || function (mod) { 3 | return (mod && mod.__esModule) ? mod : { "default": mod }; 4 | }; 5 | Object.defineProperty(exports, "__esModule", { value: true }); 6 | const express_1 = __importDefault(require("express")); 7 | const path_1 = __importDefault(require("path")); 8 | const http_1 = __importDefault(require("http")); 9 | const port = 3000; 10 | class App { 11 | constructor(port) { 12 | this.port = port; 13 | const app = (0, express_1.default)(); 14 | app.use(express_1.default.static(path_1.default.join(__dirname, '../client'))); 15 | // In the webpack version of the boilerplate, it is not necessary 16 | // to add static references to the libs in node_modules if 17 | // you are using module specifiers in your client.ts imports. 18 | // 19 | // Visit https://sbcode.net/threejs/module-specifiers/ for info about module specifiers 20 | // 21 | // This server.ts is only useful if you are running this on a production server or you 22 | // want to see how the production version of bundle.js works 23 | // 24 | // to use this server.ts 25 | // # npm run build (this creates the production version of bundle.js and places it in ./dist/client/) 26 | // # tsc -p ./src/server (this compiles ./src/server/server.ts into ./dist/server/server.js) 27 | // # npm start (this starts nodejs with express and serves the ./dist/client folder) 28 | // 29 | // visit http://127.0.0.1:3000 30 | this.server = new http_1.default.Server(app); 31 | } 32 | Start() { 33 | this.server.listen(this.port, () => { 34 | console.log(`Server listening on port ${this.port}.`); 35 | }); 36 | } 37 | } 38 | new App(port).Start(); 39 | -------------------------------------------------------------------------------- /docs/annotations.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/annotations.jpg -------------------------------------------------------------------------------- /docs/ball-vr-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/ball-vr-demo.gif -------------------------------------------------------------------------------- /docs/dp-in-typescript.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/dp-in-typescript.jpg -------------------------------------------------------------------------------- /docs/fcs-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/fcs-demo.gif -------------------------------------------------------------------------------- /docs/flag_au.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/flag_au.gif -------------------------------------------------------------------------------- /docs/flag_br.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/flag_br.gif -------------------------------------------------------------------------------- /docs/flag_ca.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/flag_ca.gif -------------------------------------------------------------------------------- /docs/flag_de.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/flag_de.gif -------------------------------------------------------------------------------- /docs/flag_es.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/flag_es.gif -------------------------------------------------------------------------------- /docs/flag_fr.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/flag_fr.gif -------------------------------------------------------------------------------- /docs/flag_in.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/flag_in.gif -------------------------------------------------------------------------------- /docs/flag_it.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/flag_it.gif -------------------------------------------------------------------------------- /docs/flag_jp.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/flag_jp.gif -------------------------------------------------------------------------------- /docs/flag_mx.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/flag_mx.gif -------------------------------------------------------------------------------- /docs/flag_nl.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/flag_nl.gif -------------------------------------------------------------------------------- /docs/flag_uk.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/flag_uk.gif -------------------------------------------------------------------------------- /docs/flag_us.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/flag_us.gif -------------------------------------------------------------------------------- /docs/sc-demo.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/sc-demo.gif -------------------------------------------------------------------------------- /docs/screengrab1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/screengrab1.jpg -------------------------------------------------------------------------------- /docs/theballgame.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/theballgame.jpg -------------------------------------------------------------------------------- /docs/threejs-course-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/threejs-course-image.png -------------------------------------------------------------------------------- /docs/threejs-typescript-250.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/threejs-typescript-250.jpg -------------------------------------------------------------------------------- /docs/with-bsc5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/with-bsc5.jpg -------------------------------------------------------------------------------- /docs/with-cannonjs.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/with-cannonjs.jpg -------------------------------------------------------------------------------- /docs/with-csg.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/with-csg.jpg -------------------------------------------------------------------------------- /docs/with-socketio.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/with-socketio.jpg -------------------------------------------------------------------------------- /docs/with-stats-gui.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/with-stats-gui.jpg -------------------------------------------------------------------------------- /docs/with-stats.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/with-stats.jpg -------------------------------------------------------------------------------- /docs/with-webcam.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/with-webcam.jpg -------------------------------------------------------------------------------- /docs/with-webxr.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Sean-Bradley/Three.js-TypeScript-Boilerplate/7519df5e8ecb766d5c60414b2811089b594d31d0/docs/with-webxr.jpg -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "three.js-typescript-boilerplate", 3 | "version": "1.0.0", 4 | "description": "", 5 | "scripts": { 6 | "build": "webpack --config ./src/client/webpack.prod.js", 7 | "dev": "webpack serve --config ./src/client/webpack.dev.js", 8 | "test": "echo \"Error: no test specified\" && exit 1", 9 | "start": "node ./dist/server/server.js" 10 | }, 11 | "author": "Sean Bradley", 12 | "license": "ISC", 13 | "devDependencies": { 14 | "@types/express": "^4.17.21", 15 | "@types/node": "^22.5.4", 16 | "@types/three": "^0.168.0", 17 | "three": "^0.168.0", 18 | "ts-loader": "^9.5.1", 19 | "typescript": "^5.5.4", 20 | "webpack": "^5.94.0", 21 | "webpack-cli": "^5.1.4", 22 | "webpack-dev-server": "^5.1.0" 23 | }, 24 | "dependencies": { 25 | "express": "^4.21.0" 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/client/client.ts: -------------------------------------------------------------------------------- 1 | import * as THREE from 'three' 2 | import { OrbitControls } from 'three/addons/controls/OrbitControls.js' 3 | 4 | const scene = new THREE.Scene() 5 | 6 | const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000) 7 | camera.position.z = 2 8 | 9 | const renderer = new THREE.WebGLRenderer() 10 | renderer.setSize(window.innerWidth, window.innerHeight) 11 | document.body.appendChild(renderer.domElement) 12 | 13 | const controls = new OrbitControls(camera, renderer.domElement) 14 | 15 | const geometry = new THREE.BoxGeometry() 16 | const material = new THREE.MeshBasicMaterial({ 17 | color: 0x00ff00, 18 | wireframe: true, 19 | }) 20 | 21 | const cube = new THREE.Mesh(geometry, material) 22 | scene.add(cube) 23 | 24 | window.addEventListener('resize', onWindowResize, false) 25 | function onWindowResize() { 26 | camera.aspect = window.innerWidth / window.innerHeight 27 | camera.updateProjectionMatrix() 28 | renderer.setSize(window.innerWidth, window.innerHeight) 29 | render() 30 | } 31 | 32 | function animate() { 33 | requestAnimationFrame(animate) 34 | 35 | cube.rotation.x += 0.01 36 | cube.rotation.y += 0.01 37 | 38 | controls.update() 39 | 40 | render() 41 | } 42 | 43 | function render() { 44 | renderer.render(scene, camera) 45 | } 46 | animate() 47 | -------------------------------------------------------------------------------- /src/client/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES6", 4 | "moduleResolution": "bundler", 5 | "strict": true 6 | }, 7 | "include": ["**/*.ts"] 8 | } 9 | -------------------------------------------------------------------------------- /src/client/webpack.common.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | 3 | module.exports = { 4 | entry: './src/client/client.ts', 5 | module: { 6 | rules: [ 7 | { 8 | test: /\.tsx?$/, 9 | use: 'ts-loader', 10 | exclude: /node_modules/, 11 | }, 12 | ], 13 | }, 14 | resolve: { 15 | extensions: ['.tsx', '.ts', '.js'], 16 | }, 17 | output: { 18 | filename: 'bundle.js', 19 | path: path.resolve(__dirname, '../../dist/client'), 20 | } 21 | }; -------------------------------------------------------------------------------- /src/client/webpack.dev.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge') 2 | const common = require('./webpack.common.js') 3 | const path = require('path'); 4 | 5 | module.exports = merge(common, { 6 | mode: 'development', 7 | devtool: 'eval-source-map', 8 | devServer: { 9 | static: { 10 | directory: path.join(__dirname, '../../dist/client'), 11 | }, 12 | hot: true, 13 | }, 14 | }) -------------------------------------------------------------------------------- /src/client/webpack.prod.js: -------------------------------------------------------------------------------- 1 | const { merge } = require('webpack-merge'); 2 | const common = require('./webpack.common.js'); 3 | 4 | module.exports = merge(common, { 5 | mode: 'production', 6 | performance: { 7 | hints: false 8 | } 9 | }); -------------------------------------------------------------------------------- /src/server/server.ts: -------------------------------------------------------------------------------- 1 | import express from 'express' 2 | import path from 'path' 3 | import http from 'http' 4 | 5 | const port: number = 3000 6 | 7 | class App { 8 | private server: http.Server 9 | private port: number 10 | 11 | constructor(port: number) { 12 | this.port = port 13 | const app = express() 14 | app.use(express.static(path.join(__dirname, '../client'))) 15 | // In the webpack version of the boilerplate, it is not necessary 16 | // to add static references to the libs in node_modules if 17 | // you are using module specifiers in your client.ts imports. 18 | // 19 | // Visit https://sbcode.net/threejs/module-specifiers/ for info about module specifiers 20 | // 21 | // This server.ts is only useful if you are running this on a production server or you 22 | // want to see how the production version of bundle.js works 23 | // 24 | // to use this server.ts 25 | // # npm run build (this creates the production version of bundle.js and places it in ./dist/client/) 26 | // # tsc -p ./src/server (this compiles ./src/server/server.ts into ./dist/server/server.js) 27 | // # npm start (this starts nodejs with express and serves the ./dist/client folder) 28 | // 29 | // visit http://127.0.0.1:3000 30 | 31 | this.server = new http.Server(app) 32 | } 33 | 34 | public Start() { 35 | this.server.listen(this.port, () => { 36 | console.log(`Server listening on port ${this.port}.`) 37 | }) 38 | } 39 | } 40 | 41 | new App(port).Start() 42 | -------------------------------------------------------------------------------- /src/server/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2019", 4 | "module": "commonjs", 5 | "outDir": "../../dist/server", 6 | "esModuleInterop": true, 7 | "skipLibCheck": true 8 | }, 9 | "include": ["**/*.ts"] 10 | } 11 | -------------------------------------------------------------------------------- /src/typings/README.md: -------------------------------------------------------------------------------- 1 | # Folder For Type Definitions 2 | --------------------------------------------------------------------------------