brunoimbrizi / interactive-particles Goto Github PK

JavaScript 76.87% HTML 4.93% GLSL 6.68% CSS 11.52%

interactive-particles's Introduction

Interactive Particles with Three.js

A tutorial demonstrating how to draw a large number of particles with Three.js and an efficient way to make them react to mouse and touch input using an off-screen texture.

Article on Codrops

Demo

Run

Install npm install
Run npm start
Build npm run build

Libraries

ControlKit - GUI
gsap - animation platform
glslify - module system for GLSL
stats.js - performance monitor
Three.js - WebGL library

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.

Misc

Follow Bruno Imbrizi: Twitter, Codepen, GitHub

Follow Codrops: Twitter, Facebook, Google+, GitHub, Pinterest, Instagram

interactive-particles's People

Contributors

Stargazers

Watchers

Forkers

davgit mnemosdev sovit-123 femotizo jjroox maxkhrichtchatyi infigenie ajinkyapuar gyto rajitha302 jbelke kijedi underlost vanekrpg tatianapost arnaldoroman grupo-probeta basemnassar11 jay-dabo amenieljerbi craftzbay himelimtiaz jabrankhan52 sammirzaev gmshawon kamwing satya1612 astronautsion dhavalkp liviupop a-buyankin frankwrk yerzhan naveeneceng greatmiraj ncou ystallonne vadym-yak catuy ndsamuelson timruether hofise grim-reapper svemulapalli edcastaneda i3rendan shamhaner sangheet codingmikey mossawir jshaw rootm sarvarkhuja piterskiy inuyasha0618 kaivnd mmmika olavbm kamivrpg khcd udhayamgit colinlacherdis longde123 lyubomyr89 kittupatel i5anoff html-tester-11 thiagovidal richard-thompson jerry3k jamstackza achaacha shahud1 xuyouwg kpchakravarthy himanshuhd velryba0 earthrisevr sureshdontha 88oleg as-tarabanov yhevis ninjaeagle bixbeta basketscript jcalan8907 renoiser memorywrong holdnewworld verseli swadhinz gaoyunzhi aigarsbaumanis mcwi rt2yrru qh08 esinanturan anonymousict eduwhaaat vohyz

interactive-particles's Issues

Inverted Particles

I'm just curious as to how you would approach inverting the particles so that you discard particles that are lighter than a certain threshold, so as to use this on a light background as opposed to a dark background.

I'm still really new to this, any help would be greatly appreciated!

failed to run the code

code has been deprecated for nodjs v18 and npm v9

any ideas on how to migrate this to R3F / React Three Fiber ?

multitouch interaction

first off all, I learned a lot of webgl and threejs while I read your code, thenks therefore.

Actually I try to integrate multitouch interaction to draw the particles with 2-3 fingers. maybe you can give me a tip on which places I can best integrate this.

Help Required

I'm New to Web development, Can you help me, how can I run this in local-host.

Thanks

Not mobile frinedly

Testted the deme URL on Android 11 suing Chrome as a browser...
It wasn't response and the touching effect doesnt match where the finder is placed on the screen
If you could advise, on how to reolsve I can try it and then open a PR accordingly.

###renderer ERROR

#small issue with renderer 😟
This is a deprecated version. it brought an ERROR!
thus the solution was to change renderer to render (vscode 2022)
however,
renderer may work on older versions or other IDE(s).:smirk:

Demo link is not working

The Demo link http://tympanus.net/Development/.../ provided is not working.

Demo not working

When I try to access the demo I get the following errors in console (Firefox 96.0.3 (64-bit));

THREE.WebGLRenderer: Error creating WebGL context. index.73f6680635ea0c7249d7.js:13:357916
Uncaught TypeError: t is null index.73f6680635ea0c7249d7.js:13:358974

Any ideas how I can fix? Cheers

Removing Control Panel

I'm really new to WebGL and this stuff so I'm having a hard time removing the control panel. Can someone please guide me, which files/code I need to remove to completely remove the control panel.
Please help me @brunoimbrizi