Three.JS-Webpack Boilerplate
#threejs#webpack#javascript#webgl
Artem

Artem @secure_daily

Location:
Santa Rosa, CA
Joined:
Jul 20, 2019

Three.JS-Webpack Boilerplate

Publish Date: Apr 20 '20
16 2

Overview

Three.JS is an awesome library. It is based on WebGL, and has a straightforward, and well-documented API. However, I found that project's initial setup may require some boilerplate.

I created some minimal configuration to bootstrap a project, and want to share with everyone. It includes webpack, webpack-dev-server, and prettier. I also included one of three.js demo projects, to test deployment on GitHub pages.

The boilerplate is available on GitHub, and you can play with the demo here.

Instructions

Development

Clone the project, and install dependencies

git clone https://github.com/aakatev/three-js-webpack.git
npm i
Enter fullscreen mode Exit fullscreen mode

Run webpack-dev-server

npm run start
Enter fullscreen mode Exit fullscreen mode

Deployment

(Optional) Format your code

npm run format
Enter fullscreen mode Exit fullscreen mode

Bundle javascript

npm run build
Enter fullscreen mode Exit fullscreen mode

Upload on any static website hosting, like GitHub pages! Done!

Comments 2 total

  • bcoal
    bcoalJun 23, 2020

    Great post, thanks heaps Artem!

  • bl4ckpanth3r
    bl4ckpanth3rOct 10, 2020

    Thanks for the effort mate, I was facing a hard time getting my webpack to work and then I found your template. Cheers

Add comment