Skip to content
ThreeJS, TypeScript, GLSL, & Webpack boilerplate for quick prototyping.
Branch: master
Clone or download
Latest commit 6847be3 Jun 12, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
src Fix indentation to tabs. Jun 12, 2019
web Fix indentation to tabs. Jun 12, 2019
.gitignore Main npm, webpack, TS configuration. Jun 7, 2019
README.md Merge branch 'master' Jun 12, 2019
package.json Documentation Jun 11, 2019
tsconfig.json Fix indentation to tabs. Jun 12, 2019
webpack.config.js Merge branch 'master' Jun 12, 2019

README.md

ThreeTS-Template

ThreeJS, TypeScript, GLSL, & Webpack boilerplate for quick prototyping.

What is this?

With the introduction of Github Templates, I figured I'd share the boilerplate configuration I always use when starting a new Three.js + TypeScript + Webpack project. Simply click on the green "Use this template" button above to start your repo with this setup (or you can clone it as usual).

Features:

  • Custom shader support: Simply save your shader files as .glsl, .vs, or .fs then use in TypeScript with import shader from "./path/fileName.glsl";
  • Hot-reloading: Automatic browser refresh and reload when TypeScript or Shader file changes. (Does not work with .html file changes.)
  • Path aliases: to avoid relative path hell. Turns ../../../utils/ into Utils/. To add more aliases:
    1. Add another item under "paths" in tsconfig.json so TypeScript finds the module.
    2. Also add it under "alias" in webpack.config.js so Webpack finds it too.
  • Multiple-devices: Any device in the same network can access the dev code and gets hot-reloaded when the code changes. Simply find the local IP address of the dev machine, and point your testing devices to that address. For example: http://192.168.xx.xx:8000/web

How to run?

  1. Make sure you have Node.js installed
  2. Navigate in your terminal to the folder where you've saved this project
  3. Type npm install
  4. Then npm run
  5. Point your browser to http://localhost:8000/web
  6. If you see the spinning torus, you're ready to roll! All source files are in the src/ folder.
You can’t perform that action at this time.