https://github.com/aryprogrammer/subcomponent-threejs-edubox
This is a subcomponent for edubox
https://github.com/aryprogrammer/subcomponent-threejs-edubox
Last synced: 5 months ago
JSON representation
This is a subcomponent for edubox
- Host: GitHub
- URL: https://github.com/aryprogrammer/subcomponent-threejs-edubox
- Owner: ARYPROGRAMMER
- Created: 2025-09-16T20:49:28.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2025-09-16T21:00:42.000Z (5 months ago)
- Last Synced: 2025-09-16T23:48:17.350Z (5 months ago)
- Language: TypeScript
- Size: 266 KB
- Stars: 1
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Full Credits to the original author: Yuki Kojima
# This version is modified by Arya Singh for EduBox due to some issues in the original code. Compatibility with Nextjs and React is added and some performance improvements are done. Moreover can be used as a submodule in other projects.
```js
import { useEffect, useRef } from 'react';
import { startDroplets } from "@/interactive-droplets/src/scripts";
export function Page() {
const containerRef = useRef(null);
const { scrollYProgress } = useScroll({
target: containerRef,
offset: ["start start", "end end"],
});
const webglRef = useRef(null);
useEffect(() => {
if (typeof window === 'undefined') return;
const isMobile = window.matchMedia('(max-width: 640px)').matches;
if (!isMobile && webglRef.current) {
startDroplets(webglRef.current);
}
}, []);
in some return ()
;
);
}
```
# Interactive, Droplet-like Metaballs with Three.js and GLSL
Demo for the tutorial on how to create interactive, droplet-like metaballs using Three.js and GLSL.
[Article on Codrops](https://tympanus.net/codrops/2025/06/09/how-to-create-interactive-droplet-like-metaballs-with-three-js-and-glsl/)
[Demo](https://tympanus.net/Tutorials/InteractiveBubbleMetaballs/)
## Installation
1. **Clone this repository:**
```bash
git clone https://github.com/koji014/interactive-droplets.git your-project-name
cd your-project-name
```
2. **Install the dependencies:**
```bash
npm install
```
3. **Start the development server:**
```bash
npm run dev
```
4. **Create the build:**
```bash
npm run build
```
## Credits
### Signed Distance Functions
- [Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more](https://iquilezles.org/articles/distfunctions/)
### Metaball Effect
- [wgld.org | GLSL: オブジェクト同士を補間して結合する](https://wgld.org/d/glsl/g016.html)
- [Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more](https://iquilezles.org/articles/smin/)
### Value Noise
- [The Book of Shaders: Random](https://thebookofshaders.com/10/)
- [The Book of Shaders: Noise](https://thebookofshaders.com/11/)
- [Inigo Quilez :: computer graphics, mathematics, shaders, fractals, demoscene and more](https://iquilezles.org/articles/morenoise/)
## Misc
Follow Yuki Kojima: [Twitter](https://x.com/_koji014), [GitHub](https://github.com/koji014)
Follow Codrops: [Bluesky](https://bsky.app/profile/codrops.bsky.social), [Facebook](http://www.facebook.com/codrops), [GitHub](https://github.com/codrops), [Instagram](https://www.instagram.com/codropsss/), [X](http://www.x.com/codrops)
## License
This resource can be used freely if integrated or build upon in personal or commercial projects such as websites, web apps and web templates intended for sale. It is not allowed to take the resource "as-is" and sell it, redistribute, re-publish it, or sell "pluginized" versions of it. Free plugins built using this resource should have a visible mention and link to the original work. Always consider the licenses of all included libraries, scripts and images used.