Three.js Starter

This repo consists of professional development environment, made to ease static site generation.

Contents

• Pug template engine
• Sass, postcss, autoprefixer
• JavaScript (ECMAScript 2015+)
• 3D models, shaders, images
• Merging WebGL with DOM

Libraries

• @fontsource
• three.js
• gsap
• lenis
• lodash
• dat.gui

Useful links:

• TinyPng-Image-Compression
• WebWorker
• HDRI-to-CubeMap
• Free-PBR-Textures
• 3D-assets-paid-n-free
• glTF-Sample-Models
• three-msdf-text-utils

Project Tree

|-- app
|   |-- classes
|   |-- components
|   |   `-- Canvas
|   |       `-- Models
|   |-- pages
|   |   `-- Home
|   `-- utils
|-- data
|-- public
|   |-- fonts
|   |-- images
|   |   `-- textures
|   `-- models
|-- shared
|   |-- images
|   |   `-- textures
|   |-- models
|   `-- shaders
|-- styles
|   |-- base
|   |-- layout
|   |-- pages
|   |   `-- home
|   |-- shared
|   `-- utils
`-- views
    |-- components
    |-- layout
    `-- pages
        `-- home

Coming soon

• webpack production config
• site.manifest
• sitemap.txt
• functions to update json and rebuild the project
• cms?

Credits

Made by Avery, Ukrainian developer and designer. Follow on social media:

• Instagram: photography, lifestyle @loudpose
• Twitter: mostly webgl reposts @loudpose
• Savee.it: modern designs @averyano