Threejs Modern App

screenshot of Threejs Modern App

Boilerplate and utils for a fullscreen Three.js app

Overview:

The threejs-modern-app is a boilerplate and utility for creating fullscreen three.js applications. It is a simplified version of the threejs-app by mattdesl, rewritten using ES6 syntax for easier reading and customization. The code is well commented and can be easily customized to fit individual needs. It offers various features such as postprocessing, orbit controls, GUI, FPS stats, GPU detection, and more. It also includes a scalable component structure, asset manager, debug mode, glslify for importing shaders, GPU tiering info using detect-gpu, and modern development tools like esbuild, eslint, and prettier.

Features:

  • WebGLApp class for running a three.js scene with various configurable options.
  • Scalable component structure where each component extends THREE.Group, allowing easy addition of objects.
  • Asset manager for preloading .gltf models, images, audios, videos, and more.
  • Global window.DEBUG flag for enabling debug mode.
  • glslify for importing shaders from node_modules.
  • GPU tiering info using detect-gpu.
  • Modern development tools like esbuild, eslint, and prettier.
eslint
Eslint

ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.