{"id":19763246,"url":"https://github.com/sougata-github/react-three-fiber-basics","last_synced_at":"2025-02-28T03:28:49.864Z","repository":{"id":254407854,"uuid":"846443507","full_name":"sougata-github/react-three-fiber-basics","owner":"sougata-github","description":"r3f basics.","archived":false,"fork":false,"pushed_at":"2024-08-23T13:13:35.000Z","size":68,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-10T23:44:00.351Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","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/sougata-github.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":"2024-08-23T08:11:25.000Z","updated_at":"2024-08-23T13:13:39.000Z","dependencies_parsed_at":"2024-08-23T09:30:09.590Z","dependency_job_id":"db7c1535-6987-4530-9bd1-8065092b8f85","html_url":"https://github.com/sougata-github/react-three-fiber-basics","commit_stats":null,"previous_names":["sougata-github/react-three-fiber-basics"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sougata-github%2Freact-three-fiber-basics","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sougata-github%2Freact-three-fiber-basics/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sougata-github%2Freact-three-fiber-basics/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sougata-github%2Freact-three-fiber-basics/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sougata-github","download_url":"https://codeload.github.com/sougata-github/react-three-fiber-basics/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241094836,"owners_count":19908710,"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":[],"created_at":"2024-11-12T04:08:35.212Z","updated_at":"2025-02-28T03:28:49.844Z","avatar_url":"https://github.com/sougata-github.png","language":"TypeScript","readme":"# 3D web development with React.js\n\nReact Three Fiber: React Three Fiber is a React-based library built on top of Three.js.\n\n```bash\nnpm install three @types/three @react-three/fiber\n```\n\nA `mesh` in three.js is a fundamental building block for rendering any 3D object. A mesh needs a shape and a material and lighting.\n\n`delta` is the diff in time b/w current frame and last frame\n\n`elapsedTime` is the total time that has passed since the start of the animation.\n\n`delta` is very small, the sine of that value is also small. Consequently, adding this tiny value to the cube's position results in almost no visible movement. Over many frames, the position might change, but the change is so gradual and minimal that it’s hard to notice.\n\n```typescript\n//for animations\nuseFrame((state, delta) =\u003e {});\n```\n\n```typescript\n//rotating the cube\nuseFrame((state, delta) =\u003e {\n  ref.current.rotation.x += delta;\n  ref.current.rotation.y += delta;\n  ref.current.rotation.z += delta;\n\n  //   ref.current.rotation.x -= delta;\n  //   ref.current.rotation.y -= delta;\n  //   ref.current.rotation.z -= delta;\n\n  //   increased speed of rotation\n  //   ref.current.rotation.x += delta * 2\n});\n```\n\n```typescript\n//moving the cube\nuseFrame((state, delta) =\u003e {\n  ref.current.position.y += delta;\n  ref.current.position.y += delta;\n  ref.current.position.z += delta;\n\n  //   ref.current.position.y -= delta;\n  //   ref.current.position.y -= delta;\n  //   ref.current.position.z -= delta;\n\n  //   increased speed of movement\n  //   ref.current.position.x += delta * 2;\n});\n```\n\n```typescript\nuseFrame((state, delta) =\u003e {\n  //oscillating between 1 and -1\n  ref.current.position.y = Math.sin(state.clock.elapsedTime);\n\n  //oscillating between 0 and 1\n  ref.current.position.y = Math.abs(Math.sin(state.clock.elapsedTime));\n});\n```\n\nDrei is a companion library for React Three fibre.\n\nLeva is a React-first components GUI.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsougata-github%2Freact-three-fiber-basics","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsougata-github%2Freact-three-fiber-basics","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsougata-github%2Freact-three-fiber-basics/lists"}