Welcome to ThreeJS playgound bySergii Medvid

List of Experiences

• 3D Skateboard configurator

  • R3F
  • Mouse interaction
  • Html mixture
  • Blender

  Threejs implementation of awazing Sacha Jerrems work (https://dribbble.com/shots/14078930-Skateboard-configurator) of UX flow for skateboard configurator using HTML/3D mixture technique. Models are handcrafted and textured in Blender

• Curved Image Gallery

  • R3F
  • Mouse interaction
  • Html mixture
  • Custom Shader

  Featured curved image gallary reacting to mouse movement speed and direction. Slide changes based on hovered link

• Toilet Paper 3D menu

  • R3F
  • Mouse interaction
  • Html mixture
  • Blender

  Threejs implementation of Voicu Apostol work (https://dribbble.com/shots/24067227--Paper-Menu) using HTML/3D mixture technique. Models are handcrafted in Blender, textured in Substance Painter

• Product showcase 3D Carousel

  • R3F
  • Custom Shader
  • Mouse interaction
  • Html mixture
  • Blender

  Threejs implementation of Cosmin Capitanu work (https://dribbble.com/shots/16460483-Cake-Couch) using custom blur shader and HTML/3D mixture. Models are handcrafted in Blender

• Constellation Particles Animation

  • R3F
  • Custom Shader
  • Particles

  3D version of travel particles constellation animation with controls

• Pixelated Image Slider

  • R3F
  • Custom Shader
  • Mouse interaction

  Tribute to the grate tool nowerdays - Leonardo AI, presening the greate work with pixel scale slider

• Color Boost Shader

  • R3F
  • Custom Shader
  • Mouse interaction

  Realtime color boost / image grayscale shader with mouse interaction for color picking

• Physics based interactive objects

  • R3F
  • Rapier
  • Physics
  • Mouse interaction

  Combination of dynamic gravity and physics based coliision mouse interaction scene

• Infinite wormhole

  • R3F
  • Edges

  Trevel through infinite wormhole with Tron vibe

• SDF Shape Sky

  • R3F
  • Custom Shader
  • SDF Shapes

  Day and night animation sky created exclusively with SDF shapes

• Isabella Explorer

  • R3F
  • Custom Shader
  • Blender

  Meet Isabella, explorer of the unknown. Created in Blender while learning character modeling

• Warp Slider

  • R3F
  • Custom Shader
  • Mouse interaction

  Slider with warp effect on mouse interaction and progress change

• Procedural terrain

  • R3F
  • Custom Shader
  • Scroll

  Climate change procedural terrain scene, based on scroll animation

• Wobble Sphere

  • R3F
  • Custom Shader

  Wobble sphere with controls and shadow support

• Particles Morphing

  • R3F
  • Custom Shader
  • Particles
  • Scroll

  Particles morphing animation into different models bound to scroll

• SciFi Coridor

  • R3F
  • Blender

  SciFi coridor created in blender with heavy usage of hard surface modeling and boolean operators

• Cyberpunk Vending Machine

  • R3F
  • Custom Shader
  • Blender
  • Particles

  Cyberpunk style vending machine with smoke and fire shaders. Try if you dare. Created for Threejs Journey challange

• Earth

  • R3F
  • Custom Shader

  Earth with realistinc terrain, height, cloud and atmosphere shaders, day/night change and sun lens flare

• Shaman Scene

  • R3F
  • Custom Shader
  • Blender

  Shaman character created from scratch in Blender with grass shader

• Halftone Shading

  • R3F
  • Custom Shader

  Custom halftone shading with custom transition

• Raging Sea Scene

  • R3F
  • Custom Shader

  Customazible raging water shader with floated boat

• Custom light shading

  • R3F
  • Custom Shader

  Simplified version of directional, point and ambient light added via shader

• Park fireworks scene

  • R3F
  • Custom Shader
  • Blender
  • LowPoly
  • Particles
  • Mouse interaction

  Custom low poly blender park scene with fireworks on mouse interaction

• Star Wars scene

  • R3F
  • Custom Shader
  • Blender

  Custom blender scene recreated with holographic material

• Smoke custom material

  • R3F
  • Custom Shader
  • Blender

  Kitchen scene with cheap smoke shader based on perlin texture

• Encryption morph slider

  • R3F
  • Custom Shader
  • Raycaster
  • Particles
  • Text

  Infinite image to text morph slider with particles effect. Inspired by https://evervault.com/

• Cyberpunk Scene

  • R3F
  • Blender
  • LowPoly

  Low poly 3d scene created in Blender

• Infinite Text Scroll

  • R3F
  • Custom Shader
  • Mouse interaction

  Infinite book scroll with cover change and distortion ripple effect. Inspired by https://designembraced.com/

• Paint Reveal Scene

  • R3F
  • Custom Shader
  • Mouse interaction

  Sobel to original scene transition via paint reveal effect. Inspired by https://kidsuper.world/

• Portals

  • R3F
  • Portal
  • Mouse interaction

  Scene with different portals and mouse interaction for entering world

• Water Effect for 3D Scene

  • R3F
  • Image
  • Custom Shader
  • Mouse interaction

  Water Effect on mouse interaction for rendered 3D scene

• Lens Effect with Scrollable Page

  • R3F
  • Image
  • Scroll
  • Lens Effect

  Mix with scrollable gallery and lens bound to mouse movement

• Ruins Scene

  • R3F
  • Blender
  • LowPoly
  • Custom Shaders

  Low poly 3d scene created in Blender with baked shadows

• Scroll Gallery 2

  • R3F
  • Image
  • Scroll

  Gallery with interaction effect on scroll and text mix

• Scene transition

  • R3F
  • Custom Shaders
  • Render Target

  Custom shader transition between to scenes

• Forest Road Scene

  • R3F
  • Blender
  • LowPoly

  Low poly 3d scene created in Blender with baked shadows

• Portal Scene

  • R3F
  • Blender
  • LowPoly
  • Custom Shaders

  Low poly 3d scene created in Blender with baked shadows. Custom shader for portal light

• Scroll Gallery

  • R3F
  • Image
  • Scroll
  • Mouse Interaction

  Gallery with interaction effect on hover and click

• Cybertruck body shaders

  • R3F
  • Custom Shaders

  Cybertruck body shader configuration

• Product showcase 3D

  • R3F
  • Postprocessing
  • Html mixture

  3d product showcase with bloom postrosessing, text shader and camera controls

• Image Transition Effect

  • R3F
  • Custom Shaders

  Image transition between 2 states of picture on hover using shader distortion

• Heat distortion effect

  • R3F
  • Parallax
  • Custom Shaders

  Heat distortion effect on static image with depth/parallax on mouse movement

• Page smooth transition

  • R3F
  • Scroll
  • Custom Shaders
  • GSAP
  • Navigation

  Awwward smooth transition between WebGL and static pages in NextJS

• Scroll animated plane journey

  • R3F
  • Scroll
  • Custom Shaders

  Scroll based plane journey with speed up effect, bacground change and text embed

• 3D infinite circle gallery

  • R3F
  • Carousel
  • Custom Shaders
  • Mouse interaction

  3D slider with infinite circullar effect and fabric-like animation

• 3D carousel

  • R3F
  • Carousel
  • Camera control

  3D slider with camera movement showcasing product options

• Particles galaxy

  • R3F
  • Custom Shaders
  • Particles

  Static and animated version of galaxy generator with configuration options

• Particles carousel with mouse interaction

  • R3F
  • Custom Shaders
  • Particles
  • GSAP
  • Carousel

  Image carousel build on top of particle effect with custom shader. Wave effect on mouse movement

• Custom fragment shaders

  • R3F
  • Custom Shaders

  Custom shaders collection, playing with colors, shape and uv position

• Particles exploding carousel with video

  • Particles
  • R3F
  • Carousel
  • Custom Shaders
  • GSAP

  Particles transition effect between videos. Created with custom shaders. Inspired by https://www.m-trust.co.jp

• Shoe configurator

  • Mouse interaction
  • R3F
  • Zustand
  • Color Picker
  • GSAP

  Shoe product configurator with color picker functionality

• Day/Night Earth

  • Mouse interaction
  • Multiple scenes
  • Realistic textures
  • R3F
  • Zustand
  • GSAP

  Earth mesh with randomized planes paths. Day/night shift on mouse interaction