{"id":13572875,"url":"https://github.com/marcofugaro/threejs-modern-app","last_synced_at":"2025-10-10T18:32:23.877Z","repository":{"id":43602580,"uuid":"129432063","full_name":"marcofugaro/threejs-modern-app","owner":"marcofugaro","description":"Boilerplate and utils for a fullscreen Three.js app","archived":false,"fork":false,"pushed_at":"2023-11-21T22:54:11.000Z","size":23998,"stargazers_count":385,"open_issues_count":0,"forks_count":36,"subscribers_count":8,"default_branch":"master","last_synced_at":"2025-03-30T01:08:26.501Z","etag":null,"topics":["boilerplate","starter-kit","threejs","webgl"],"latest_commit_sha":null,"homepage":"https://marcofugaro.github.io/threejs-modern-app/?debug","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marcofugaro.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-04-13T17:10:55.000Z","updated_at":"2025-02-25T17:27:52.000Z","dependencies_parsed_at":"2023-11-21T23:43:49.153Z","dependency_job_id":null,"html_url":"https://github.com/marcofugaro/threejs-modern-app","commit_stats":null,"previous_names":[],"tags_count":5,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcofugaro%2Fthreejs-modern-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcofugaro%2Fthreejs-modern-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcofugaro%2Fthreejs-modern-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marcofugaro%2Fthreejs-modern-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marcofugaro","download_url":"https://codeload.github.com/marcofugaro/threejs-modern-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247423515,"owners_count":20936626,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["boilerplate","starter-kit","threejs","webgl"],"created_at":"2024-08-01T15:00:22.925Z","updated_at":"2025-10-10T18:32:23.827Z","avatar_url":"https://github.com/marcofugaro.png","language":"JavaScript","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# threejs-modern-app\n\n\u003e Boilerplate and utils for a fullscreen three.js app\n\n[![demo](.github/screenshots/demo.png)](https://marcofugaro.github.io/threejs-modern-app/?debug)\n\nIt is inspired from [mattdesl](https://twitter.com/mattdesl)'s [threejs-app](https://github.com/mattdesl/threejs-app), but it was rewritten and simplified using **ES6** syntax rather than node, making it easier to read and well commented, so it can be easily customized to fit your needs.\n\n### [DEMO](https://marcofugaro.github.io/threejs-modern-app/?debug)\n\n## Features\n\n- All the **three.js boilerplate code is tucked away** in a file, the exported `WebGLApp` is easily configurable from the outside, for example you can enable [postprocessing](https://github.com/vanruesc/postprocessing), orbit controls, a [gui](https://github.com/georgealways/lil-gui), [FPS stats](https://github.com/marcofugaro/stats.js/), [Detect GPU](https://github.com/TimvanScherpenzeel/detect-gpu), and use the save screenshot or record mp4 functionality. It also has built-in support for [cannon-es](https://github.com/pmndrs/cannon-es). [[Read more](#webglapp)]\n- A **scalable three.js component structure** where each component is a class which extends `THREE.Group`, so you can add any object to it. The class also has update, resize, and pointer hooks. [[Read more](#component-structure)]\n- An **asset manager** which handles the preloading of `.gltf` models, images, audios, videos and can be easily extended to support other files. It also automatically uploads a texture to the GPU, loads cube env maps or parses equirectangular projection images. [[Read more](#asset-manager)]\n- global `window.DEBUG` flag which is true when the url contains `?debug` as a query parameter. So you can enable **debug mode** both locally and in production. [[Read more](#debug-mode)]\n- [glslify](https://github.com/glslify/glslify) to import shaders from `node_modules`. [[Read more](#glslify)]\n- GPU tiering info using [detect-gpu](https://github.com/TimvanScherpenzeel/detect-gpu) [[Read more](#gpu-info)]\n  \u003c!-- - **Hot reload**. [[Read more](#hot-reload)] --\u003e\n- Modern and customizable development tools such as ⚡️**esbuild**⚡️, eslint, and prettier.\n- Beautiful console output:\n\n![console screenshots](.github/screenshots/console.png)\n\n## Usage\n\nOnce you installed the dependencies running `yarn`, these are the available commands:\n\n- `yarn start` starts a server locally\n- `yarn start --https` starts an HTTPS server locally\n- `yarn build` builds the project for production, ready to be deployed from the `build/` folder\n\nAll the build tools logic is in the `package.json` and `esbuild.js`.\n\n## WebGLApp\n\n```js\nimport WebGLApp from './utils/WebGLApp'\n\nconst webgl = new WebGLApp({ ...options })\n```\n\nThe WebGLApp class contains all the code needed for three.js to run a scene, it is always the same so it makes sense to hide it in a standalone file and don't think about it.\n\nYou can see an example configuration here:\n\nhttps://github.com/marcofugaro/threejs-modern-app/blob/3f9d43d2ad790a20b0c9a0b62db7095bac6cef82/src/index.js#L14-L30\n\nYou can pass the class the options you would pass to the [THREE.WebGLRenderer](https://threejs.org/docs/#api/en/renderers/WebGLRenderer), and also some more options:\n\n| Option                | Default                | Description                                                                                                                                                                                     |\n| --------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `background`          | `'#111'`               | The background of the scene.                                                                                                                                                                    |\n| `backgroundAlpha`     | 1                      | The transparency of the background.                                                                                                                                                             |\n| `maxPixelRatio`       | 2                      | You can clamp the pixelRatio. Often the pixelRatio is clamped for performance reasons.                                                                                                          |\n| `width`               | `window.innerWidth`    | The canvas width.                                                                                                                                                                               |\n| `height`              | `window.innerHeight`   | The canvas height.                                                                                                                                                                              |\n| `orthographic`        | false                  | Use an [OrthographicCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera) instead of the default [PerspectiveCamera](https://threejs.org/docs/#api/en/cameras/PerspectiveCamera). |\n| `cameraPosition`      | `new Vector3(0, 0, 4)` | Set the initial camera position. The camera will always look at [0, 0, 0].                                                                                                                      |\n| `fov`                 | 45                     | The field of view of the PerspectiveCamera. It is ignored if the option `orthographic` is true.                                                                                                 |\n| `frustumSize`         | 3                      | Defines the size of the OrthographicCamera frustum. It is ignored if the option `orthographic` is false.                                                                                        |\n| `near`                | 0.01                   | The camera near plane.                                                                                                                                                                          |\n| `far`                 | 100                    | The camera far plane.                                                                                                                                                                           |\n| `postprocessing`      | false                  | Enable the [postprocessing library](https://github.com/vanruesc/postprocessing). The composer gets exposed as `webgl.composer`.                                                                 |\n| `xr`                  | false                  | Enable three.js WebXR mode. The update function now will have a `xrframe` object passed as a third parameter.                                                                                   |\n| `showFps`             | false                  | Show the [stats.js](https://github.com/mrdoob/stats.js/) fps counter.                                                                                                                           |\n| `orbitControls`       | undefined              | Set this to `true` to enable OrbitControls. You can also pass an object of [OrbitControls properties](https://threejs.org/docs/index.html#examples/en/controls/OrbitControls) to set.           |\n| `gui`                 | undefined              | Wether or not to initialize the gui using [lil-gui](https://github.com/georgealways/lil-gui). Exposed ad `webgl.gui`.                                                                           |\n| `guiClosed`           | false                  | Set this to `true` to initialize the gui panel closed.                                                                                                                                          |\n| `world`               | undefined              | Accepts an instance of the [cannon-es](https://github.com/pmndrs/cannon-es) world (`new CANNON.World()`). Exposed as `webgl.world`.                                                             |\n| `showWorldWireframes` | false                  | Set this to `true` to show the wireframes of every body in the world. Uses [cannon-es-debugger](https://github.com/pmndrs/cannon-es-debugger).                                                  |\n\nThe `webgl` instance will contain all the three.js elements such as `webgl.scene`, `webgl.renderer`, `webgl.camera` or `webgl.canvas`. It also exposes some useful properties and methods:\n\n### webgl.isDragging\n\nWether or not the user is currently dragging. It is `true` between the `onPointerDown` and `onPointerUp` events.\n\n### webgl.cursor\n\nSet this property to change the cursor style of the canvas. For example you can use it to display the pointer cursor on some objects:\n\n```js\nonPointerMove(event, { x, y }) {\n  // raycast and get the intersecting mesh\n  const intersectingMesh = getIntersectingMesh([x, y], this, this.webgl)\n\n  if (intersectingMesh) {\n    this.webgl.cursor = 'pointer'\n  } else {\n    this.webgl.cursor = null\n  }\n}\n```\n\n### webgl.saveScreenshot({ ...options })\n\nSave a screenshot of the application as a png.\n\n| Option     | Default              | Description                       |\n| ---------- | -------------------- | --------------------------------- |\n| `width`    | `window.innerWidth`  | The width of the screenshot.      |\n| `height`   | `window.innerHeight` | The height of the screenshot.     |\n| `fileName` | `'Screenshot'`       | The name the .png file will have. |\n\n### webgl.startRecording({ ...options })\n\nStart the recording of a video using [mp4-wasm](https://github.com/mattdesl/mp4-wasm).\n\n| Option     | Default              | Description                                                                                                                   |\n| ---------- | -------------------- | ----------------------------------------------------------------------------------------------------------------------------- |\n| `width`    | `window.innerWidth`  | The width of the video.                                                                                                       |\n| `height`   | `window.innerHeight` | The height of the video.                                                                                                      |\n| `fileName` | `'Recording'`        | The name the .mp4 file will have.                                                                                             |\n| ...others  |                      | Other options that you can pass to the `createWebCodecsEncoder()` method of [mp4-wasm](https://github.com/mattdesl/mp4-wasm). |\n\n### webgl.stopRecording()\n\nStop the recording and download the video.\nIt returns a promise that is resolved once the processing is done.\n\n### webgl.onUpdate((dt, time) =\u003e {})\n\nSubscribe to the update `requestAnimationFrame` without having to create a component. If needed you can later unsubscribe the function with `webgl.offUpdate(function)`.\n\n| Parameter | Description                                                                                  |\n| --------- | -------------------------------------------------------------------------------------------- |\n| `dt`      | The seconds elapsed from the latest frame, in a 60fps application it's `0.016s` (aka `16ms`) |\n| `time`    | The time in seconds elapsed from when the animation loop starts                              |\n\n### webgl.onPointerDown((event, { x, y }) =\u003e {})\n\nSubscribe a function to the `pointerdown` event on the canvas without having to create a component. If needed you can later unsubscribe the function with `webgl.offPointerDown(function)`.\n\n| Parameter  | Description                                                                        |\n| ---------- | ---------------------------------------------------------------------------------- |\n| `event`    | The native event.                                                                  |\n| `position` | An object containing the `x` and the `y` position from the top left of the canvas. |\n\n### webgl.onPointerMove((event, { x, y }) =\u003e {})\n\nSubscribe a function to the `pointermove` event on the canvas without having to create a component. If needed you can later unsubscribe the function with `webgl.offPointerMove(function)`.\n\n| Parameter  | Description                                                                                                                                                                                       |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `event`    | The native event.                                                                                                                                                                                 |\n| `position` | An object containing the `x` and the `y` position from the top left of the canvas. If the user is dragging, the object contains also the `dragX` and `dragY` distances from the drag start point. |\n\n### webgl.onPointerUp((event, { x, y }) =\u003e {})\n\nSubscribe a function to the `pointerup` event on the canvas without having to create a component. If needed you can later unsubscribe the function with `webgl.offPointerUp(function)`.\n\n| Parameter  | Description                                                                                                                                                              |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `event`    | The native event.                                                                                                                                                        |\n| `position` | An object containing the `x` and the `y` position from the top left of the canvas. The object contains also the `dragX` and `dragY` distances from the drag start point. |\n\n### webgl.gui.wireUniforms('My Material', material.uniforms)\n\nAutomatically adds the exposed uniforms of a material to the gui, as a folder.\nInternally it adds the uniforms using [`gui.addSmart()`](#webgl-gui-add-smart-object-property)\n\n| Argument     | Description                                                                                                                                                                                                                                                                |\n| ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `folderName` | The name of the folder the gui will make.                                                                                                                                                                                                                                  |\n| `uniforms`   | The uniforms of the material. They are exposed by default in a [ShaderMaterial](https://threejs.org/docs/#api/en/materials/ShaderMaterial) or [RawShaderMaterial](https://threejs.org/docs/#api/en/materials/RawShaderMaterial). Or if you use the `addUniforms` function. |\n\n### webgl.gui.addSmart(object, 'property')\n\nLike [`gui.add()`](https://lil-gui.georgealways.com/#GUI#add) but tries to be more smart about it.\nFor example if the number is between 0 and 1, it sets the slider min to 0 and max to 1. Otherwise the slider uses an exponential mapping for easy iteration.\n\n| Argument     | Description                                                                |\n| ------------ | -------------------------------------------------------------------------- |\n| `object`     | The object the gui will modify. For example it can be any material.        |\n| `'property'` | The name of the property in the object. The gui will modify this property. |\n\n## Component structure\n\nRather than writing all of your three.js app in one file instruction after instruction, you can split your app into thhree.js components\". This makes it easier to manage the app as it grows. Here is a basic component:\n\nhttps://github.com/marcofugaro/threejs-modern-app/blob/master/src/scene/Box.js\n\nA three.js component is a class which extends [`THREE.Group`](https://threejs.org/docs/#api/en/objects/Group) (an alias for [`THREE.Object3D`](https://threejs.org/docs/#api/en/core/Object3D)) and subsequently inherits its properties and methods, such as `this.add(someMesh)` or `this.position` or `this.rotation`. [Here is a full list](https://threejs.org/docs/#api/en/core/Object3D).\n\nAfter having instantiated the class, you can add it directly to the scene.\n\n```js\n// attach it to the scene so you can access it in other components\nwebgl.scene.birds = new Birds(webgl, { count: 1000 })\nwebgl.scene.add(webgl.scene.birds)\n```\n\nAnd in the component, you can use the options like this.\n\n```js\nexport default class Birds extends Group {\n  constructor(webgl, options = {}) {\n    super(options)\n    // these can be used also in other methods\n    this.webgl = webgl\n    this.options = options\n\n    // destructure and default values like you do in React\n    const { count = 10 } = this.options\n\n    // ...\n```\n\nThe class supports some hooks, which get called once the element is in the scene:\n\n### update(dt, time) {}\n\nCalled each frame of the animation loop of the application. Gets called by the main `requestAnimationFrame`.\n\n| Parameter | Description                                                                                   |\n| --------- | --------------------------------------------------------------------------------------------- |\n| `dt`      | The seconds elapsed from the latest frame, in a 60fps application it's `0.016s` (aka `16ms`). |\n| `time`    | The time in seconds elapsed from when the animation loop starts.                              |\n\n### resize({ width, height, pixelRatio }) {}\n\nCalled each time the window has been resized.\n\n| Parameter    | Description                                                                                                |\n| ------------ | ---------------------------------------------------------------------------------------------------------- |\n| `width`      | The window width.                                                                                          |\n| `height`     | The window height.                                                                                         |\n| `pixelRatio` | The application pixelRatio, it's usually `window.devicePixelRatio` but clamped with `webgl.maxPixelRatio`. |\n\n### onPointerDown(event, { x, y }) {}\n\nCalled on the `pointerdown` event on the canvas.\n\n| Parameter  | Description                                                                        |\n| ---------- | ---------------------------------------------------------------------------------- |\n| `event`    | The native event.                                                                  |\n| `position` | An object containing the `x` and the `y` position from the top left of the canvas. |\n\n### onPointerMove(event, { x, y }) {}\n\nCalled on the `pointermove` event on the canvas.\n\n| Parameter  | Description                                                                                                                                                                                       |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `event`    | The native event.                                                                                                                                                                                 |\n| `position` | An object containing the `x` and the `y` position from the top left of the canvas. If the user is dragging, the object contains also the `dragX` and `dragY` distances from the drag start point. |\n\n### onPointerUp(event, { x, y }) {}\n\nCalled on the `pointerup` event on the canvas.\n\n| Parameter  | Description                                                                                                                                                              |\n| ---------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |\n| `event`    | The native event.                                                                                                                                                        |\n| `position` | An object containing the `x` and the `y` position from the top left of the canvas. The object contains also the `dragX` and `dragY` distances from the drag start point. |\n\n### Functional Components\n\nIf you don't need any of the previous methods, you can use functional components, which are just plain functions with the objective of making code easier to navigate in.\n\n```js\nexport function addLights(webgl) {\n  const directionalLight = new DirectionalLight(0xffffff, 0.6)\n  directionalLight.position.copy(position)\n  webgl.scene.add(directionalLight)\n\n  const ambientLight = new AmbientLight(0xffffff, 0.5)\n  webgl.scene.add(ambientLight)\n}\n\n// ...\n\naddLights(webgl)\n```\n\n## Asset Manager\n\nThe Asset Manager handles the preloading of all the assets needed to run the scene.\n\n\u003cimg width=\"400\" src=\".github/screenshots/asset-manager.png\" /\u003e\n\nYou can use it like this:\n\nhttps://github.com/marcofugaro/threejs-modern-app/blob/3f9d43d2ad790a20b0c9a0b62db7095bac6cef82/src/scene/Suzanne.js#L14-L45\n\nhttps://github.com/marcofugaro/threejs-modern-app/blob/3f9d43d2ad790a20b0c9a0b62db7095bac6cef82/src/index.js#L41\n\nhttps://github.com/marcofugaro/threejs-modern-app/blob/3f9d43d2ad790a20b0c9a0b62db7095bac6cef82/src/scene/Suzanne.js#L53\n\nIn detail, first you queue the asset you want to preload in the component where you will use it\n\n```js\nimport assets from '../utils/AssetManager'\n\nconst key = assets.queue({\n  url: 'assets/model.gltf',\n  type: 'gltf',\n})\n```\n\nThen you import the component in the `index.js` so that code gets executed\n\n```js\nimport Component from './scene/Component'\n```\n\nAnd then you start the queued assets loading promise, always in the `index.js`\n\n```js\nassets.load({ renderer: webgl.renderer }).then(() =\u003e {\n  // assets loaded! we can show the canvas\n})\n```\n\nAfter that, you init the component and use the asset in the component like this\n\n```js\nconst modelGltf = assets.get(key)\n```\n\nThese are all the exposed methods:\n\n### assets.queue({ url, type, ...others })\n\nQueue an asset to be downloaded later with [`assets.load()`](#assetsload-renderer-).\n\n| Option    | Default      | Description                                                                                                                                                                                                                                                                            |\n| --------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `url`     |              | The url of the asset relative to the `public/` folder. Can be an array if `type: 'env-map'` and you're loading a [cube texture](https://github.com/mrdoob/three.js/tree/dev/examples/textures/cube).                                                                                   |\n| `type`    | autodetected | The type of the asset, can be either `gltf`, `image`, `svg`, `texture`, `env-map`, `json`, `audio` or `video`. If omitted it will be discerned from the asset extension.                                                                                                               |\n| `pmrem`   | false        | Only if you set `type: 'env-map'`, you can pass `pmrem: true` to use the [PMREMGenerator](https://threejs.org/docs/#api/en/extras/PMREMGenerator) and prefilter for irradiance. This is often used when applying an envMap to an object rather than a scene background.                |\n| `gamma`   | false        | Only if you set `type: 'texture'` or `type: 'env-map'`. By default, the encoding of the texture is set to linear color space. You can pass `gamma: true` to enable gamma correction for the texture, useful when loading color data such as albedo maps in a gamma corrected workflow. |\n| ...others |              | Other options that can be assigned to a [Texture](https://threejs.org/docs/index.html#api/en/textures/Texture) when the type is either `env-map` or `texture`.                                                                                                                         |\n\nReturns a `key` that later you can use with [`assets.get()`](#assetsgetkey).\n\n### assets.queueStandardMaterial(maps, options)\n\nUtility to queue multiple maps belonging to the same PBR material. They can later be passed directly to the [MeshStandardMaterial](https://threejs.org/docs/#api/en/materials/MeshStandardMaterial).\n\nFor example, here is how you load a brick PBR texture:\n\n```js\nconst bricksKeys = assets.queueStandardMaterial(\n  {\n    map: `assets/bricks/albedo.jpg`,\n    roughnessMap: `assets/bricks/roughness.jpg`,\n    metalnessMap: `assets/bricks/metallic.jpg`,\n    normalMap: `assets/bricks/normal.jpg`,\n    displacementMap: `assets/bricks/height.jpg`,\n    aoMap: `assets/bricks/ambientocclusion.jpg`,\n  },\n  {\n    repeat: new Vector2().setScalar(0.5),\n    wrapS: RepeatWrapping,\n    wrapT: RepeatWrapping,\n  }\n)\n```\n\nAs you can see, you can pass as a second argument any property you want to apply to all textures.\n\nIf you're using gamma, the textures with color data will be automatically gamma encoded.\n\n| Option    | Default | Description                                                                                                                                                                                                                        |\n| --------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `maps`    |         | An object containing urls for any map from the [MeshStandardMaterial](https://threejs.org/docs/#api/en/materials/MeshStandardMaterial) or [MeshPhysicalMaterial](https://threejs.org/docs/#api/en/materials/MeshPhysicalMaterial). |\n| `options` |         | Options you can assign to all textures, such as wrapping or repeating. Any other property of the [Texture](https://threejs.org/docs/#api/en/textures/Texture) can be set.                                                          |\n\nReturns a `keys` object that later you can use with [`assets.getStandardMaterial()`](#assetsgetstandardmaterialkeys).\n\n### assets.load({ renderer })\n\nLoad all the assets previously queued.\n\n| Option     | Default | Description                                                         |\n| ---------- | ------- | ------------------------------------------------------------------- |\n| `renderer` |         | The WebGLRenderer of your application, exposed as `webgl.renderer`. |\n\n### assets.loadSingle({ url, type, renderer, ...others })\n\nLoad a single asset without having to pass through the queue. Useful if you want to lazy-load some assets after the application has started. Usually the assets that are not needed immediately.\n\n| Option     | Default      | Description                                                                                                                                                                                                                                                                            |\n| ---------- | ------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `renderer` |              | The WebGLRenderer of your application, exposed as `webgl.renderer`.                                                                                                                                                                                                                    |\n| `url`      |              | The url of the asset relative to the `public/` folder. Can be an array if `type: 'env-map'` and you're loading a [cube texture](https://github.com/mrdoob/three.js/tree/dev/examples/textures/cube).                                                                                   |\n| `type`     | autodetected | The type of the asset, can be either `gltf`, `image`, `svg`, `texture`, `env-map`, `json`, `audio` or `video`. If omitted it will be discerned from the asset extension.                                                                                                               |\n| `pmrem`    | false        | Only if you set `type: 'env-map'`, you can pass `pmrem: true` to use the [PMREMGenerator](https://threejs.org/docs/#api/en/extras/PMREMGenerator) and prefilter for irradiance. This is often used when applying an envMap to an object rather than a scene background.                |\n| `gamma`    | false        | Only if you set `type: 'texture'` or `type: 'env-map'`. By default, the encoding of the texture is set to linear color space. You can pass `gamma: true` to enable gamma correction for the texture, useful when loading color data such as albedo maps in a gamma corrected workflow. |\n| ...others  |              | Other options that can be assigned to a [Texture](https://threejs.org/docs/index.html#api/en/textures/Texture) when the type is either `env-map` or `texture`.                                                                                                                         |\n\nReturns a `key` that later you can use with [`assets.get()`](#assetsgetkey).\n\n### assets.addProgressListener((progress) =\u003e {})\n\nPass a function that gets called each time an assets finishes downloading. The argument `progress` goes from 0 to 1, with 1 being every asset queued has been downloaded.\n\n### assets.get(key)\n\nRetrieve an asset previously loaded with [`assets.queue()`](#assetsqueue-url-type-others-) or [`assets.loadSingle()`](#assetsloadsingle-url-type-renderer-others-).\n\n| Option | Default | Description                                                                                                                                                                              |\n| ------ | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `key`  |         | The key returned from [`assets.queue()`](#assetsqueue-url-type-others-) or [`assets.loadSingle()`](#assetsloadsingle-url-type-renderer-others-). It corresponds to the url of the asset. |\n\n### assets.getStandardMaterial(keys)\n\nRetrieve an asset previously queued with [`assets.queueStandardMaterial()`](#assetsqueuestandardmaterialmaps-options).\n\nIt returns an object of the loaded textures that can be fed directly into [MeshStandardMaterial](https://threejs.org/docs/#api/en/materials/MeshStandardMaterial) like this:\n\n```js\nconst textures = assets.getStandardMaterial(keys)\nconst material = new MeshStandardMaterial({ ...textures })\n```\n\n| Option | Default | Description                                                                                                 |\n| ------ | ------- | ----------------------------------------------------------------------------------------------------------- |\n| `keys` |         | The keys object returned from [`assets.queueStandardMaterial()`](#assetsqueuestandardmaterialmaps-options). |\n\n## Debug mode\n\nOften you want to show the fps count or debug helpers such as the [SpotLightHelper](https://threejs.org/docs/#api/en/helpers/SpotLightHelper) only when you're developing or debugging.\n\nA really manageable way is to have a global `window.DEBUG` constant which is true only if you append `?debug` to your url, for example `http://localhost:8080/?debug` or even in production like `https://example.com/?debug`.\n\nThis is done [here](https://github.com/marcofugaro/threejs-modern-app/blob/3f9d43d2ad790a20b0c9a0b62db7095bac6cef82/src/index.js#L9) in just one line:\n\n```js\nwindow.DEBUG = window.location.search.includes('debug')\n```\n\nYou could also add more global constants by just using more query-string parameters, like this `?debug\u0026fps`.\n\n## glslify\n\n[glslify](https://github.com/glslify/glslify) lets you import shader code directly from `node_modules`.\n\nFor example, if you run through glslify a string you're using in three's [onBeforeCompile](https://threejs.org/docs/#api/en/materials/Material.onBeforeCompile), you can import [glsl-noise](https://github.com/hughsk/glsl-noise) like this:\n\n```js\nimport glsl from 'glslify'\n\n// ...\n\nshader.vertexShader = glsl`\n  uniform float time;\n  uniform float speed;\n  uniform float frequency;\n  uniform float amplitude;\n\n  #pragma glslify: noise = require('glsl-noise/simplex/3d')\n\n  // the function which defines the displacement\n  float displace(vec3 point) {\n    return noise(vec3(point.xy * frequency, time * speed)) * amplitude;\n  }\n\n  // ...\n`\n```\n\n💡 **BONUS TIP**: you can have glsl syntax highlighting for inline glsl strings in VSCode with the extension [glsl-literal](https://marketplace.visualstudio.com/items?itemName=boyswan.glsl-literal).\n\nglslify is applied also to files with the `.frag`, `.vert` or `.glsl` extensions. They are imported as plain strings:\n\n```c\n// pass.vert\nvarying vec2 vUv;\n\nvoid main() {\n  vUv = uv;\n  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);\n}\n```\n\n```js\n// index.js\nimport passVertexShader from '../shaders/pass.vert'\n\n// ...\n\nconst material = new ShaderMaterial({\n  // it's a string\n  vertexShader: passVert,\n\n  // ...\n})\n```\n\nFor a list of shaders you can import via glslify check out [stack.gl packages list](http://stack.gl/packages/).\n\n## GPU Info\n\nSometimes it might be useful to enable expensive application configuration only on higher-end devices.\n\nThis can be done by detecting the user's GPU and checking in which tier it belongs to based on its benchmark score.\n\nThis is done thanks to [detect-gpu](https://github.com/TimvanScherpenzeel/detect-gpu), more detailed info about these mechanics in its README.\n\nFor example, here is how to enable shadows only on high-tier devices:\n\n```js\nif (webgl.gpu.tier \u003e 1) {\n  webgl.renderer.shadowMap.enabled = true\n\n  // soft shadows\n  webgl.renderer.shadowMap.type = PCFSoftShadowMap\n}\n```\n\nHere is what the exposed `webgl.gpu` object contains:\n\n| Key        | Example Value                | Description                                                                                                                   |\n| ---------- | ---------------------------- | ----------------------------------------------------------------------------------------------------------------------------- |\n| `tier`     | `1`                          | The tier the GPU belongs to. It is incremental, so the higher the better. It goes from 0 to 3. Most GPUs belong to the Tier 2 |\n| `isMobile` | `false`                      | Wheter it is a mobile/tablet GPU, or a desktop GPU.                                                                           |\n| `name`     | `'intel iris graphics 6100'` | The string name of the GPU.                                                                                                   |\n| `fps`      | `21`                         | The specific rank value of the GPU.                                                                                           |\n\n⚠️ **WARNING**: `webgl.gpu` is set asyncronously since the benchmark data needs to be fetched. You might want to wait for the exposed promise `webgl.loadGPUTier`.\n\nMore info on this approach also in [this great talk](http://www.youtube.com/watch?v=iNMD8Vr1tKg\u0026t=32m4s) by [luruke](https://github.com/luruke)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcofugaro%2Fthreejs-modern-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarcofugaro%2Fthreejs-modern-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarcofugaro%2Fthreejs-modern-app/lists"}