{"id":18941175,"url":"https://github.com/fasani/r3f-boilerplate","last_synced_at":"2025-07-20T12:04:56.268Z","repository":{"id":40672183,"uuid":"269144981","full_name":"Fasani/r3f-boilerplate","owner":"Fasani","description":"A lightweight boilerplate for r3f (react-three-fiber)","archived":false,"fork":false,"pushed_at":"2023-01-07T11:55:50.000Z","size":1255,"stargazers_count":14,"open_issues_count":13,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-15T22:42:45.719Z","etag":null,"topics":["3d","javascript","react","react-three-fiber","threejs","webpack4"],"latest_commit_sha":null,"homepage":"","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/Fasani.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}},"created_at":"2020-06-03T16:56:12.000Z","updated_at":"2025-03-02T14:09:59.000Z","dependencies_parsed_at":"2023-02-07T02:15:50.758Z","dependency_job_id":null,"html_url":"https://github.com/Fasani/r3f-boilerplate","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/Fasani/r3f-boilerplate","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fasani%2Fr3f-boilerplate","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fasani%2Fr3f-boilerplate/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fasani%2Fr3f-boilerplate/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fasani%2Fr3f-boilerplate/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Fasani","download_url":"https://codeload.github.com/Fasani/r3f-boilerplate/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Fasani%2Fr3f-boilerplate/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":266120044,"owners_count":23879245,"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","javascript","react","react-three-fiber","threejs","webpack4"],"created_at":"2024-11-08T12:26:25.006Z","updated_at":"2025-07-20T12:04:56.249Z","avatar_url":"https://github.com/Fasani.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# r3f boilerplate\n\n\u003cimg src=\"https://img.shields.io/david/fasani/r3f-boilerplate?color=green\"\u003e \u003cimg src=\"https://img.shields.io/david/dev/fasani/r3f-boilerplate?color=green\"\u003e \u003cimg src=\"https://img.shields.io/github/license/fasani/r3f-boilerplate?color=black\"\u003e\n[![Gitpod ready-to-code](https://img.shields.io/badge/Gitpod-ready--to--code-blue?logo=gitpod)](https://gitpod.io/#https://github.com/Fasani/r3f-boilerplate)\n\nA lightweight boilerplate for r3f ([react-three-fiber](https://github.com/pmndrs/react-three-fiber))\n\n## Features\n\n- [react-refresh](https://github.com/facebook/react/tree/master/packages/react-refresh) - Edit components without losing their state\n- [drei](https://github.com/pmndrs/drei) - Helpers for react-three-fiber\n\n## Ultra Quickstart\n\nPreview and play with this project on Gitpod.\n\n[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/Fasani/r3f-boilerplate)\n\n## Quickstart\n\n1. Clone this repository using `git clone --depth=1 https://github.com/fasani/r3f-boilerplate.git \u003cYOUR_PROJECT_NAME\u003e`\n2. Move to the newly created directory: `cd \u003cYOUR_PROJECT_NAME\u003e`\n3. Run `npm install` to install dependencies\n3. Run `npm start` to see the example app at http://localhost:3000\n\n## Make your first commit\n\nAfter cloning to start this repository from your own 'Initial commit' you can completely remove the existing git information by doing the following:\n\n1. `rm -rf .git` this will remove the git information for the repository\n2. `git init` this will start the repository with no history from the current state\n\n## Build your project\n\nTo build your project you can run `npm run build` any modifications made to the `index.html` will be copied over as the base file in the newly created `dist` folder.\n\n# Introduction resources\n\n- [Bringing WebGL to React - Paul Henschel aka @0xca0a at @ReactEurope 2020](https://www.youtube.com/watch?v=YyqBdN71nFs)\n- [Animation and 3D in react-three-fiber (with Paul Henschel) — Learn With Jason](https://www.youtube.com/watch?v=1rP3nNY2hTo)\n- [Scroll, Refraction and Shader Effects in Three.js and React](https://tympanus.net/codrops/2019/12/16/scroll-refraction-and-shader-effects-in-three-js-and-react/)\n- [Write three.js in React Using react-three-fiber](https://www.digitalocean.com/community/tutorials/react-react-with-threejs)\n\n## Upgrade options\n\nI have kept this repository as lightweight as possible. You could also remove the `drei` dependency if you wish. Drei has many useful helpers for `react-three-fiber` so you should check it out first.\n\nBecause the aim is to keep this boilerplate small, you may need to add additional dependencies depending on what you are building I maintain a list of upgrade options below.\n\n### GLTF Loader\n\nIf you need to work with GLTF models you will need to do the following:\n\n`npm install gltf-webpack-loader --save-dev`\n\nModify `webpack.config.js` and add the following to the module.rules array:\n\n```\nmodule: {\n    rules: [\n        ...\n        {\n            test: /\\.(gltf)$/,\n            use: 'gltf-webpack-loader'\n        }\n    ]\n}\n```\n\n#### A GLTF model example\n\n```\nimport React, { Suspense } from 'react';\nimport { useLoader } from '@react-three/fiber';\nimport { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';\nimport logo from '../assets/models/logo.gltf';\n\nfunction Logo(props) {\n    const gltf = useLoader(GLTFLoader, logo);\n\n    return (\n        \u003cgroup {...props}\u003e\n            \u003cscene\u003e\n                \u003cmesh castShadow receiveShadow\u003e\n                    \u003cbufferGeometry attach=\"geometry\" {...gltf.__$[1].geometry} /\u003e\n                    \u003cmeshPhongMaterial attach=\"material\" color=\"black\" /\u003e\n                \u003c/mesh\u003e\n            \u003c/scene\u003e\n        \u003c/group\u003e\n    )\n}\n\nexport default function SuspendedLogo(props) {\n    return (\n        \u003cSuspense fallback={null}\u003e\n            \u003cLogo {...props} /\u003e\n        \u003c/Suspense\u003e\n    )\n}\n```\n\n### Font loader\n\nIf you need to work with font blob files you will need to do the following:\n\n`npm install url-loader --save-dev`\n\nModify `webpack.config.js` and add the following to the module.rules array:\n\n```\nmodule: {\n    rules: [\n        ...\n        {\n            test: /\\.(blob)$/,\n            use: 'url-loader'\n        }\n    ]\n},\n```\n\n#### Font loader example\n\n```\nimport * as THREE from 'three'\nimport React, { Suspense } from 'react'\nimport { useLoader } from '@react-three/fiber'\nimport Font from '../assets/font.blob'\n\nfunction Text(props) {\n    const font = useLoader(THREE.FontLoader, Font);\n    const config = {\n        font,\n        size: 40,\n        ...\n    }\n\n    return (\n        \u003cgroup {...props}\u003e\n            \u003cmesh castShadow position={[-120, 0, 0]}\u003e\n                \u003ctextGeometry attach=\"geometry\" args={['Test', config]} /\u003e\n                \u003cmeshToonMaterial attach=\"material\" color=\"black\" /\u003e\n            \u003c/mesh\u003e\n        \u003c/group\u003e\n    )\n}\n\nexport default function SuspendedText(props) {\n    return (\n        \u003cSuspense fallback={null}\u003e\n            \u003cText {...props} /\u003e\n        \u003c/Suspense\u003e\n    )\n}\n```\n\n### async/await\n\nIf you want to fetch data using async/await you will experience a 'regeneratorRuntime is not defined' error which can be fixed by doing the following:\n\n`npm install @babel/plugin-transform-runtime --save-dev`\n\nModify `.babelrc` and add the following to the plugins section:\n```\n{\n  \"presets\": [\n    \"@babel/env\",\n    \"@babel/react\"\n  ],\n  \"plugins\": [\n    \"@babel/plugin-transform-runtime\"\n  ]\n}\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffasani%2Fr3f-boilerplate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffasani%2Fr3f-boilerplate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffasani%2Fr3f-boilerplate/lists"}