{"id":19092796,"url":"https://github.com/basedhound/3d-animations_threejs","last_synced_at":"2026-04-11T02:02:01.268Z","repository":{"id":236683961,"uuid":"792969723","full_name":"basedhound/3d-animations_threejs","owner":"basedhound","description":"Collection of practice 3D animations created with Three.js, React Three Fiber, and Drei.  This repository showcases animation techniques and effects for building interactive 3D visuals.","archived":false,"fork":false,"pushed_at":"2024-08-06T16:30:36.000Z","size":40768,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-06-23T02:02:07.998Z","etag":null,"topics":["drei","fiber","framer-motion","nextjs","nextjs14","r3f","react","tailwind","threejs","typescript"],"latest_commit_sha":null,"homepage":"","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/basedhound.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-04-28T04:02:46.000Z","updated_at":"2024-08-06T16:30:39.000Z","dependencies_parsed_at":"2024-08-06T19:20:30.710Z","dependency_job_id":null,"html_url":"https://github.com/basedhound/3d-animations_threejs","commit_stats":null,"previous_names":["basedhound/three-fiber_animations","basedhound/3d-animations_threejs"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/basedhound/3d-animations_threejs","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2F3d-animations_threejs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2F3d-animations_threejs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2F3d-animations_threejs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2F3d-animations_threejs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/basedhound","download_url":"https://codeload.github.com/basedhound/3d-animations_threejs/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/basedhound%2F3d-animations_threejs/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261397373,"owners_count":23152487,"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":["drei","fiber","framer-motion","nextjs","nextjs14","r3f","react","tailwind","threejs","typescript"],"created_at":"2024-11-09T03:21:59.068Z","updated_at":"2026-04-11T02:01:55.946Z","avatar_url":"https://github.com/basedhound.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cdiv align=\"center\"\u003e\n      \u003cimg src=\"design/preview.png\" alt=\"Project Banner\"\u003e\n  \u003ch3 align=\"center\"\u003e3D Animations - Three Fiber\u003c/h3\u003e\n\u003c/div\u003e\n\n##  \u003cbr /\u003e 📋 \u003ca name=\"table\"\u003eTable of Contents\u003c/a\u003e\n\n- ✨ [Introduction](#introduction)\n- ⚙️ [Tech Stack](#tech-stack)\n- 📝 [Features](#features)\n- 🚀 [Quick Start](#quick-start)\n\n##  \u003cbr /\u003e \u003ca name=\"introduction\"\u003e✨ Introduction\u003c/a\u003e\n\n**[EN]** A collection of practice 3D animations created using Three.js, React Three Fiber, and Drei. This repository showcases various animation techniques and effects, demonstrating the capabilities of these libraries for building interactive 3D visuals.\n\n**[FR]** Une compilation d'animations 3D réalisées avec Three.js, React Three Fiber et Drei. Ce dépôt présente diverses techniques et effets d'animation, démontrant les capacités de ces bibliothèques pour créer des visuels 3D interactifs.\n\n##  \u003cbr /\u003e \u003ca name=\"tech-stack\"\u003e⚙️ Tech Stack\u003c/a\u003e\n\n- [**Three.js**](https://threejs.org/docs/) is a JavaScript library that enables the creation and display of 3D computer graphics in web browsers using WebGL. It provides extensive capabilities for rendering 3D scenes, including support for geometries, materials, lighting, and animations.\n\n- [**Three Fiber**](https://docs.pmnd.rs/react-three-fiber/getting-started/introduction) is a React renderer for Three.js, enabling the use of Three.js within React applications. It provides a declarative API that allows developers to create and manage 3D scenes using React components, making it easier to integrate 3D graphics into React applications. React Three Fiber simplifies the process of handling Three.js objects, lights, and animations, while leveraging React’s component-based architecture for more manageable and reusable 3D code.\n\n- [**Three Drei**](https://github.com/pmndrs/drei) is a collection of useful helpers and abstractions for React Three Fiber. It offers a set of ready-to-use components and hooks for common Three.js tasks, such as managing lights, controls, and geometries. By providing higher-level abstractions, React Three Drei streamlines the process of creating complex 3D scenes and interactions, enhancing productivity and reducing boilerplate code in React Three Fiber projects.\n\n- [**React**](https://react.dev/reference/react) is a popular JavaScript library for building user interfaces, particularly single-page applications where data changes over time. React's component-based architecture allows developers to create reusable UI components, making development more efficient and the codebase easier to maintain. \n\n- [**Next.js**](https://nextjs.org/docs) is a React framework known for its server-side rendering (SSR) and static site generation (SSG) capabilities, enhancing performance and SEO for web applications. It offers features like automatic code splitting, API routes for server-side logic, and a plugin system for extensibility.\n\n- [**TypeScript**](https://www.typescriptlang.org/docs/) is a statically typed superset of JavaScript that allows for early detection of errors and more robust, maintainable code. TypeScript's type system helps developers catch mistakes early during the development process, ensuring a more stable and reliable application.\n\n- [**Tailwind**](https://v2.tailwindcss.com/docs) is a utility-first CSS framework that speeds up UI development by providing a set of pre-built utility classes. It allows developers to quickly build custom designs without writing traditional CSS, promoting rapid prototyping and design consistency.\n\n\n\n## \u003cbr /\u003e \u003ca name=\"quick-start\"\u003e🚀 Quick Start\u003c/a\u003e\n\nFollow these steps to set up the project locally on your machine.\n\n\u003cbr/\u003e**Prerequisites**\n\nMake sure you have the following installed on your machine:\n\n- [Git](https://git-scm.com/)\n- [Node.js](https://nodejs.org/en)\n- [npm](https://www.npmjs.com/) (Node Package Manager)\n\n\u003cbr/\u003e**Cloning the Repository**\n\n```bash\ngit clone {git remote URL}\n```\n\n\u003cbr/\u003e**Installation**\n\nLet's install the project dependencies, from your terminal, run:\n\n```bash\nnpm install\n# or\nyarn install\n```\n\n\u003cbr/\u003e**Running the Project**\n\nInstallation will take a minute or two, but once that's done, you should be able to run the following command:\n\n```bash\nnpm run dev\n# or\nyarn dev\n```\n\nOpen [`http://localhost:3000`](http://localhost:3000) in your browser to view the project.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasedhound%2F3d-animations_threejs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbasedhound%2F3d-animations_threejs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbasedhound%2F3d-animations_threejs/lists"}