DEV Community

Cover image for Three.JS-Webpack Boilerplate
Artem
Artem

Posted on

6 3

Three.JS-Webpack Boilerplate

#threejs #webpack #javascript #webgl

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!

profile
_SurveyJS
 Promoted

SurveyJS custom survey software

JavaScript UI Libraries for Surveys and Forms

SurveyJS lets you build a JSON-based form management system that integrates with any backend, giving you full control over your data and no user limits. Includes support for custom question types, skip logic, integrated CCS editor, PDF export, real-time analytics & more.

Learn more

Top comments (2)

Collapse
 
bcoal profile image
bcoal •

Great post, thanks heaps Artem!

Collapse
 
bl4ck2308panth1 profile image
bl4ckpanth3r •

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

profile
Sentry
 Promoted

nextjs tutorial video

Youtube Tutorial Series 📺

So you built a Next.js app, but you need a clear view of the entire operation flow to be able to identify performance bottlenecks before you launch. But how do you get started? Get the essentials on tracing for Next.js from @nikolovlazar in this video series 👀

Watch the Youtube series

Read next

zenoplex profile image

🎄 Instant Local Translation with Chrome 🌐

Gen -

dpc profile image

Daily JavaScript Challenge #JS-70: Find Missing Letter in Alphabet Sequence

DPC -

dpc profile image

Daily JavaScript Challenge #JS-72: Count the Frequency of Every Unique Element in an Array

DPC -

midhunkrishnan profile image

Installing your react.js local package registry to your project

Midhun Krishnan R -