{"id":16020473,"url":"https://github.com/leoncvlt/tribus","last_synced_at":"2025-04-10T01:33:49.195Z","repository":{"id":78007805,"uuid":"374651901","full_name":"leoncvlt/tribus","owner":"leoncvlt","description":"🧱High-level imperative components for three.js to easily implement specific effects, workflows or patterns","archived":false,"fork":false,"pushed_at":"2023-01-16T15:45:42.000Z","size":7258,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-24T03:11:38.782Z","etag":null,"topics":["3d","threejs","webgl"],"latest_commit_sha":null,"homepage":"https://leoncvlt.github.io/tribus/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/leoncvlt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2021-06-07T12:07:26.000Z","updated_at":"2024-12-28T17:56:59.000Z","dependencies_parsed_at":null,"dependency_job_id":"b4d56cf7-6e2a-4bc6-8fec-c219319cee3f","html_url":"https://github.com/leoncvlt/tribus","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leoncvlt%2Ftribus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leoncvlt%2Ftribus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leoncvlt%2Ftribus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/leoncvlt%2Ftribus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/leoncvlt","download_url":"https://codeload.github.com/leoncvlt/tribus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248140868,"owners_count":21054362,"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":["3d","threejs","webgl"],"created_at":"2024-10-08T17:40:42.237Z","updated_at":"2025-04-10T01:33:49.168Z","avatar_url":"https://github.com/leoncvlt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# tribus\nHigh-level imperative components for three.js to easily implement specific effects, workflows or patterns. Inspired by [pmndrs/drei](https://github.com/pmndrs/drei)\n\n\u003e 🚨 Note that this project is a still a heavy work in progress and the API / methods might be subject to changes between releases.\n\nEffects                                     | Utils\n---                                         | ---\n[Contact Shadows ](#Contact-Shadows)        | [Asset Loader](#Asset-Loader)\n[Reflector](#Reflector)                     \n[Environment](#Environment)                 \n\n## Effects \n\n### Environment\n\nSet the scene's environment from a texture, or a neutral procedural studio environment.\n\n```js\nimport { Environment } from \"tribus\";\nconst environment = new Environment(\n  renderer, // the three.js renderer\n  scene, // the scene to set the environment for\n  {\n    texture: null, // texture to use - omit for a neutral procedural studio environment\n                  // pass a preloaded texture object or a path to a file, in the latter\n                  // case the texture will be loaded and this method can be awaited\n    equirectangular: true, // whether the texture is in equirectangular format\n    cubemap: false // whether the texture is in cubemap format\n    background: true, // set the texture as the scene's background as well\n  }\n);\n// call `apply` to change environment after instantiation if you wish\nenvironment.apply({ texture, equirectangular, cubemap, background });\n```\n\n### Reflector\n\nReflector with support for transparency and blurry reflections. Based on the native three.js reflector by [Slayvin](https://github.com/mrdoob/three.js/blob/dev/examples/jsm/objects/Reflector.js), with [pschroen](https://github.com/pschroen/alien.js/blob/master/src/utils/world/Reflector.js)'s approach for full-screen rendering.\n\n```js\nimport { BlurredReflector } from \"tribus\";\nconst reflector = new BlurredReflector({\n  geometry: null // the geometry to apply the reflection on\n                 // omit to use a default ground plane\n  width: 16, // width of the reflecting plane, if no geometry is defined\n  height: 16, // height of the reflecting plane, if no geometry is defined\n  textureWidth: 512 // width of the texture used to draw the reflections on\n  textureHeight: 512 // height of the texture used to draw the reflections on\n  opacity: 1 // reflections opacity\n  blur: 0 // reflections blurriness\n  color: 0xffffff // reflections tint color (multiplied)\n  fastBlur: false // use faster, but lower-quality blur\n  manualRender: false // if true, the reflection won't be rendered automatically\n                      // call .render(scene, renderer) in your update loop to render \n});\nscene.add(reflector);\n```\n\n### Contact Shadows\n\nContact shadows implementation by projecting the objects on a plane. Based on this three.js [example](https://github.com/mrdoob/three.js/blob/master/examples/webgl_shadow_contact.html).\n\n```js\nimport { ContactShadows } from \"tribus\";\nconst contactShadows = new ContactShadows({\n  width: 16, // width of the plane the shadows are projected on\n  height: 16, // height of the plane the shadows are projected on\n  textureWidth: 512// width of the texture used to draw the shadows on\n  textureHeight: 512 // height of the texture used to draw the shadows on\n  cameraHeight: 16, // height of the camera projecting the shadows on the geometry\n  darkness: 1, // shadows intensity\n  opacity: 1, // shadows opacity\n  blur: 4, // shadows blurriness\n  fastBlur: false, // use faster, but lower-quality blur\n  manualRender: false // if true, the contact shadows won't be rendered automatically\n                      // call .render(scene, renderer) in your update loop to render \n});\nscene.add(this.contactShadows);\nscene.add(this.contactShadows.helpers); // display helpers (optional)\n```\n\n## Utilities\n\n### AssetLoader\n\nQueues and preloads asset according to their type into a key-value pair store.\n\n```js\n// a deafult global instance of AssetLoader is exported from the file\n// alternatively, import the named export and instantiate your own\nimport AssetLoader from \"tribus/AssetLoader\";\nAssetLoader.queue(\n  \"path/to/file.gltf\" // path of the file to load, either as a static file\n                      // or as parsed from your bundler of choice\n  \"my-gltf\", // key / ID of the asset, used to later fetch the asset with `get()`\n             // if omitted defaults to the asset filename (without path)\n  ssetLoader.TYPES.GTLF, // asset type, determines the loader used. \n                         // Valid types: File, Image, Texture, HDRI, GLTF\n                         // if omitted defaults to File, returned as a blob URL\n)\n...\n// callback to run after each asset has finished loading \nAssetLoader.addEventListener(\"progress\", (current, total) =\u003e {})\n// callback to run after all assets have finished loading \nAssetLoader.addEventListener(\"loaded\", () =\u003e {})\n...\nawait assetLoader.load();\n...\nconst gltf = AssetLoader.get(\"my-gltf\");\nscene.add(gltf.scene);\n``","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleoncvlt%2Ftribus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fleoncvlt%2Ftribus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fleoncvlt%2Ftribus/lists"}