Three.js TypeScript Webpack Starter

A starter project for using Three.js, TypeScript, SCSS and Webpack.

Features

• Webpack 5 + HMR
• TypeScript + Three.js
• SCSS + Autoprefixing

🚀 Getting Started

Get up and running with these simple steps:

1. Clone the project
2. Run npm install
3. Run npm run dev

Configuration

Optional configuration for the project can be done in the following files below.

Open env.config.js and you will see the default configuration for the project.

Images, Fonts and output

Here's an example of the default generated output to our dist folder.

- index.html
-- js
-- css
-- fonts
---- some-font-file.woff
-- images
---- path-to-example-image.jpg

• By default, fonts and images are copied to the dist folder.
• To include a reference to an image or font, it should be relative to where your css would output.

For example:

stylesheets/some-folder/some-file-somewhere.scss

.example {
    background-image: url("../images/path-to-image-example.jpg");
}

@font-face {
    font-family: "Example-font";
    src: url("../fonts/some-font-file.woff");
}

Would output to the folder css/app.css

- index.html
-- js
-- css
---- app.css
-- fonts
---- some-font-file.woff
-- images
---- path-to-example-image.jpg

Development

npm install
npm run dev

Production

Note: This will compile to a dist folder.

npm run build

Build tools

• Three.js - Three.js is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser using WebGL.
• TypeScript - TypeScript is a superset of JavaScript that compiles to clean JavaScript.
• Webpack 5 - App bundler for JavaScript.
• SCSS - Preprocessor for SCSS to CSS.

📝License

This project is licensed under the MIT License - see the LICENSE.md file for details