kandi background

sketch-threejs | Interactive sketches made with three.js. | Graphics library

Download this library from

kandi X-RAY | sketch-threejs Summary

sketch-threejs is a JavaScript library typically used in User Interface, Graphics, Three.js, WebGL applications. sketch-threejs has no bugs, it has a Permissive License and it has medium support. However sketch-threejs has 139 vulnerabilities. You can download it from GitHub.
Interactive sketches made with three.js. https://ykob.github.io/sketch-threejs/. This code is released under the MIT license. If you want to use some code, you can use these freely by adding license notation. Also, I'm accepting donations through Paypal. If you can support my project, please consider that. https://www.paypal.me/ykob.

kandi-support Support

  • sketch-threejs has a medium active ecosystem.
  • It has 1633 star(s) with 212 fork(s). There are 45 watchers for this library.
  • It had no major release in the last 12 months.
  • There are 0 open issues and 8 have been closed. On average issues are closed in 263 days. There are 1 open pull requests and 0 closed requests.
  • It has a neutral sentiment in the developer community.
  • The latest version of sketch-threejs is current.

quality kandi Quality

  • sketch-threejs has 0 bugs and 0 code smells.


  • sketch-threejs has no vulnerabilities reported, and its dependent libraries have no vulnerabilities reported.
  • sketch-threejs code analysis shows 139 unresolved vulnerabilities (139 blocker, 0 critical, 0 major, 0 minor).
  • There are 0 security hotspots that need review.

license License

  • sketch-threejs is licensed under the MIT License. This license is Permissive.
  • Permissive licenses have the least restrictions, and you can use them in most projects.


  • sketch-threejs releases are not available. You will need to build from source code and install.
  • Installation instructions are not available. Examples and code snippets are available.
Top functions reviewed by kandi - BETA

kandi has reviewed sketch-threejs and discovered the below as its top functions. This is intended to give you an instant insight into sketch-threejs implemented functionality, and help decide if they suit your requirements.

  • Embeds a point from a cell .
  • incoming animation
  • simplification sequence
  • resizes the window
  • function rendering
  • return a function
  • this is the function
  • pos is a point
  • incoming angle
  • work out

sketch-threejs Key Features

Interactive sketches made with three.js.

sketch-threejs Examples and Code Snippets

  • Usage


npm i

Community Discussions

Trending Discussions on sketch-threejs
  • WebGL Fog Shader Cursor Interaction
Trending Discussions on sketch-threejs


WebGL Fog Shader Cursor Interaction

Asked 2018-Jul-13 at 02:38

First of all I want to apologize, but I'm a complete newbie in learning GLSL and shaders. There is no single place where you can learn all about shading language, so I've researched a lot and inspected examples/experiments that people create trying to learn and understand as much as I can.

I've found one Fog shader (experiment, the github source code can be found here) online and looks really cool and what I'm trying to understand for example how can I implement mouse inside this shader, so when I move the mouse over the screen it pushes/moves/disperses the fog around the cursor, then after a second or 2 it comes back. I really don't need someone to create me a full code. I just need some directions, explanations etc...

Do I implement this stuff into vertex shader or fragment shader, becouse as far as I understand (please correct me if I'm wrong) fragment shader just decide the color of each "pixel/fragment", while vertex shader seems the place which define positions and such?

So in basic I would like to know how to implement interactions like mouse (I know how to send mouse as uniforms x-y to shader, and normalize (convert to 0/1) so that part is not a problem at all.


Answered 2018-Jul-13 at 02:38

it's really hard to give generic advice. for 99% of apps mouse interaction happens outside GLSL. put to in three.js terms the mouse input would only manipulate various scene nodes positions and rotations and maybe material settings. that is literally 99% of all 3d apps native or web. For fun people sometimes put some mouse input directly into the shader. then it's up to you. for the fog compute the distance from the mouse position to the vertex in the vertex shader. the closer it is push the positions back or forward or away from th mouse. or in fragment shader use distance to darken.

the problem is you asked for the fog to only come back after a second or two. That is much more work and again something much more likely to be done outside the shader in most apps.

if.you really want to do it in the shader you'd probably use a texture that you draw circles into corresponding to the mouse position. every frame you'd blur that texture so it slowely fades to black. your vertex shader would look into that texture where each vertex would find it's corresponding displacement.

in other words you now need at least 3 shaders. one to draw a circle. it doesn't have to be a circle shader can just be a generic shader that draws triangles that you happen to pass the data for a circle to. You need the shader that fades / blurs the draw history. and you need the fog shader.

there's probably 20 more ways to accomplish this.

a related q&a

Creating a smudge/liquify effect on mouse move that continuously animates back to the original state using webgl

personally I feel like the ones that try to do as much as possible in the shader are more about challenging yourself with limits rather than pragmatic. That can be great fun and good for learning but it is rarely "best practice"

Source https://stackoverflow.com/questions/51304354

Community Discussions, Code Snippets contain sources that include Stack Exchange Network


No vulnerabilities reported

Install sketch-threejs

You can download it from GitHub.


For any new features, suggestions and bugs create an issue on GitHub. If you have any questions check and ask questions on community page Stack Overflow .

Build your Application

Share this kandi XRay Report