Three.js starter template with TypeScript and webpack.
MIT License
To clone and run this template, you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:
# Clone this repository
$ git clone --depth 1 https://github.com/yandeu/three-project-template.git three-scene
# Go into the repository
$ cd three-scene
# Install dependencies
$ npm install
# Start the local development server (on port 8080)
$ npm start
# Ready for production?
# Build the production ready code to the /dist folder
$ npm run build
# View your production ready 3D scene in the browser
$ npm run serve
Change the projectName in /webpack/webpack.common.js.
All your 3d scene code lies inside the /src folder. All assets need to be inside the /src/assets folder in order to get copied to /dist while creating the production build. Do not change the name of the index.html and index.ts files.
This template include ammo.js (@enable3d/ammo-physics) physics by default.
Want to use react? Simply add "jsx": "react",
to tsconfig.json, then install and use react.
This template is 100% PWA ready.
The ServiceWorker is disabled by default. Uncomment the line below inside /src/index.html to enable it.
<script>
if ('serviceWorker' in navigator) {
window.addEventListener('load', () => {
navigator.serviceWorker.register('./sw.js')
})
}
</script>
You can easily personalize its settings by following these steps:
Read more about PWA on developers.google.com
The simplest way to build a Native App is using Capacitor and following its Documentation. The only thing you need to change after installing Capacitor is the webDir inside the capacitor.config.json file. Set it to dist like so:
{
"appId": "com.example.app",
"appName": "YOUR_APP_NAME",
"bundledWebRuntime": false,
"webDir": "dist"
}
Change the TypeScript compiler's settings in the tsconfig.json file.
If you are new to TypeScript, you maybe want to set "noImplicitAny" to false.
You'll find more information about the TypeScript compiler here.
You can put your custom type definitions inside typings/custom.d.ts.
All webpack configs are in the webpack folder.
We are using the webpack-obfuscator. Change its settings in webpack/webpack.prod.js if needed. All available options are listed here.
Checkout enable3d, a awesome 3D framework I built (on top of three.js and ammo.js)!
Making a multiplayer game? Check out geckos.io
The MIT License (MIT) 2020 - Yannick Deubel. Please have a look at the LICENSE for more details.