We offer freelance web development using
MERN, NextJS and ThreeJS.

ASHABB React Three Fiber snippets extension

A Visual Studio Code extension that provides 198 useful snippets for developing with React Three Fiber, including commonly used patterns for drei and leva. Boost your productivity by quickly inserting boilerplate code for 3D applications!

Features

React Three Fiber Canvas: type r3f- for R3F Snippets.
Drei Snippets: type drei- for Drei Snippets.
Leva Controls: type leva- for Leva Snippets..

Screenshots

Shortcut Table

Seq	Shortcut	Title	Description
1	r3f-canvas	React Three Fiber Canvas	Creates a basic React Three Fiber Canvas with lights.
2	r3f-box	Box	Creates a simple box mesh.
3	r3f-sphere	Sphere	Creates a simple sphere mesh.
4	r3f-plane	Plane	Creates a simple plane mesh.
5	r3f-cylinder	Cylinder	Creates a simple cylinder mesh.
6	r3f-torus	Torus	Creates a simple torus mesh.
7	r3f-text	Text	Creates 3D text in the scene.
8	r3f-orbit-controls	OrbitControls	Adds orbit controls to the scene.
9	r3f-perspective-camera	PerspectiveCamera	Sets up a perspective camera.
10	r3f-environment	Environment	Adds an environment map for lighting.
11	r3f-lights	Lights	Adds ambient and directional lights to the scene.
12	r3f-textured-box	Box with Texture	Creates a textured box mesh.
13	r3f-group	Group	Creates a group to organize multiple meshes.
14	r3f-import-texture	Import Texture	Imports TextureLoader from Three.js.
15	r3f-model	Model	Loads a 3D model using GLTFLoader.
16	r3f-custom-shader	Custom Shader Material	Creates a mesh with custom shaders.
17	r3f-animated-box	Animated Box	Creates an animated box mesh.
18	r3f-plane-shadows	Plane with Shadows	Creates a plane that receives shadows.
19	r3f-cube-shadows	Cube with Shadows	Creates a cube that casts shadows.
20	r3f-random-color	Random Color	Generates a random color using Three.js.
21	r3f-animation-loop	Animation Loop	Sets up an animation loop using useFrame.
22	r3f-effect-composer	EffectComposer	Sets up post-processing effects using EffectComposer.
23	r3f-orbit-controls-target	OrbitControls with Target	Adds orbit controls with a specific target.
24	r3f-fog	Fog	Adds fog to the scene.
25	r3f-raycaster	Raycaster	Sets up a raycaster for mouse interactions.
26	r3f-responsive-canvas	Responsive Canvas	Creates a responsive canvas that fills its container.
27	r3f-simple-animation	Simple Animation	Rotates a mesh on the y-axis.
28	r3f-camera-animation	Camera Animation	Animates the camera position.
29	r3f-mouse-events	Mouse Events	Handles mouse click events on a mesh.
30	r3f-dynamic-light	Dynamic Lighting	Creates a directional light that can be dynamically positioned.
31	r3f-camera-controls	Camera Controls	Sets up camera controls with PerspectiveCamera.
32	r3f-three-imports	Three.js Imports	Imports essential components from React Three Fiber and Drei.
33	r3f-animation-mixer	Animation Mixer	Sets up an animation mixer for animated models.
34	r3f-gltf-loader	GLTFLoader	Loads a GLTF model using GLTFLoader.
35	r3f-css3d-renderer	CSS3DRenderer	Adds a CSS3D renderer to the scene.
36	r3f-sky	Sky	Adds a skybox to the scene.
37	r3f-light-probe	Light Probe	Adds a light probe for improved lighting.
38	r3f-video-texture	Video Texture	Creates a mesh with a video texture.
39	r3f-sprite	Sprite	Creates a 2D sprite in the 3D scene.
40	r3f-multiple-lights	Multiple Lights	Adds multiple light sources to the scene.
41	r3f-cube-texture	CubeTexture	Creates a cube with a cube texture.
42	r3f-camera-tween	Camera Animation with Tween	Animates camera position using GSAP.
43	r3f-import-three-components	Import Three.js Components	Imports core components from React Three Fiber and Drei.
44	r3f-animate-light	Animating Light	Animates a light's position.
45	r3f-interactive-mesh	Interactive Mesh	Creates an interactive mesh that changes color on hover.
46	r3f-billboard	Billboard	Creates a billboard that always faces the camera.
47	r3f-post-processing	Post Processing	Sets up post-processing effects.
48	r3f-simple-shader	Simple Shader	Creates a simple mesh with custom shaders.
49	r3f-simple-animation-tween	Simple Animation with Tween	Animates a mesh rotation using GSAP.
50	r3f-light-animation	Light Animation	Animates the intensity of a light.
51	r3f-debug	Debugging	Adds a helper for debugging meshes.
52	r3f-stats	Stats	Displays performance stats for the 3D scene.
53	r3f-use-frame-cleanup	Use Frame with Cleanup	Sets up useFrame with a cleanup function.
54	r3f-adding-shadows	Adding Shadows	Adds shadows to a mesh.
55	r3f-plane-texture	Plane with Texture	Creates a plane with a texture.
56	r3f-basic-animation-ref	Basic Animation with useRef	Sets up basic animation using useRef.
57	r3f-cube-animation	Cube with Animation	Creates a cube that can be animated.
58	r3f-import-gltf	Import GLTF	Imports GLTFLoader from Three.js.
59	r3f-environment-map	Environment Map	Creates a sphere with an environment map.
60	r3f-raycaster	Using Raycaster	Sets up raycasting for mouse interactions.
61	r3f-skybox	Skybox	Creates a skybox.
62	r3f-load-font	Load Font	Loads a font using FontLoader.
63	r3f-text-geometry	Text Geometry	Creates 3D text in the scene.
64	r3f-circle-geometry	Circle Geometry	Creates a circle mesh.
65	r3f-wireframe	Wireframe	Creates a wireframe mesh.
66	r3f-scale-animation	Scale Animation	Animates the scale of a mesh.
67	r3f-import-texture	Import Texture	Imports TextureLoader from Three.js.
68	r3f-animate-camera	Animate Camera Position	Animates the camera position.
69	r3f-particles	Creating Particles	Sets up a particle system.
70	r3f-background-color	Setting Background Color	Sets a background color for the canvas.
71	r3f-custom-material	Custom Material	Creates a custom material for meshes.
72	r3f-fog	Fog	Adds fog to the scene.
73	r3f-cube-texture	Cube with Texture	Creates a cube with a texture.
74	r3f-react-spring	Using React Spring	Integrates React Spring for animations.
75	r3f-debug-orbit	Debugging with OrbitControls	Sets up debugging with OrbitControls.
76	r3f-clipping-plane	Clipping Plane	Sets up a clipping plane.
77	r3f-custom-shader-material	Custom Shader Material	Creates a mesh with a custom shader material.
78	r3f-env-map-reflection	Environment Map with Reflection	Creates a sphere with reflective environment mapping.
79	r3f-cube-camera	Using CubeCamera	Sets up a CubeCamera for reflections.
80	r3f-3d-model-loader	3D Model Loader	Loads a 3D model using GLTF.
81	r3f-animation-loop	Animation Loop	Sets up a basic animation loop.
82	r3f-shadow-map	Using ShadowMap	Enables shadow mapping in the scene.
83	r3f-texture-loader	Texture Loader	Loads a texture using TextureLoader.
84	r3f-simple-mesh-animation	Simple Mesh with Animation	Creates a simple mesh with animation.
85	r3f-simple-sphere	Simple Sphere	Creates a simple sphere.
86	r3f-loading-animation	Loading Animation	Animates the loading of a mesh.
87	r3f-animation-mixer	Creating an Animation Mixer	Sets up an animation mixer for controlling animations.
88	r3f-css3d-renderer	Using CSS3D Renderer	Sets up a CSS3D Renderer.
89	r3f-loading-external-models	Loading External Models	Loads an external 3D model.
90	r3f-particle-system	Creating a Particle System	Creates a particle system.
91	r3f-3d-object-texture	3D Object with Texture	Creates a 3D object with texture.
92	r3f-import-obj	Import OBJ	Imports OBJLoader from Three.js.
93	r3f-effect-composer	Using EffectComposer	Sets up EffectComposer for post-processing effects.
94	r3f-adding-lights	Adding Lights	Adds directional and ambient lights.
95	r3f-cube-animation	Creating a Cube with Animation	Creates a cube with animation.
96	r3f-using-texture-loader	Using TextureLoader	Loads a texture.
97	r3f-post-processing	Post Processing	Sets up post-processing effects.
98	r3f-mouse-events	Mouse Events	Sets up mouse events for a mesh.
99	r3f-orbit-controls	Using OrbitControls	Adds orbit controls to the scene.
100	r3f-creating-shadows	Creating Shadows	Creates shadows in the scene.
101	r3f-animating-mesh	Animating a Mesh	Animates a mesh.
102	r3f-light-source	Creating a Light Source	Creates a point light source.
103	r3f-cube-lighting	Cube with Lighting	Creates a cube with lighting.
104	r3f-import-collada	Import Collada	Imports ColladaLoader from Three.js.
105	r3f-particle-texture	Creating Particles with Texture	Creates a particle system with texture.
106	r3f-external-textures	Importing External Textures	Loads an external texture.
107	r3f-2d-canvas	Creating 2D Canvas	Creates a 2D canvas.
108	r3f-camera-controls	Camera Controls	Enables camera controls.
109	r3f-perspective-camera	Using Perspective Camera	Sets up a perspective camera.
110	r3f-import-custom-models	Importing Custom Models	Loads a custom 3D model.
111	r3f-arcball-controls	Using ArcballControls	Sets up Arcball controls.
112	r3f-drei-html-canvas	Drei HTML Canvas	Creates a Drei HTML component inside a React Three Fiber canvas.
113	r3f-drei-html-style	Drei HTML with Style	Creates a styled HTML component inside a Drei canvas.
114	r3f-drei-html-image	Drei HTML with Image	Adds an image inside a Drei HTML component.
115	r3f-drei-html-tooltip	Drei HTML with Tooltip	Adds a tooltip to a Drei HTML component.
116	r3f-drei-html-button	Drei HTML with Button	Creates a button inside a Drei HTML component.
117	r3f-drei-html-form	Drei HTML with Form	Creates a form inside a Drei HTML component.
118	r3f-drei-html-input	Drei HTML with Input	Adds an input field inside a Drei HTML component.
119	r3f-drei-html-animation	Drei HTML with Animation	Creates an animated HTML component inside a Drei canvas.
120	r3f-drei-html-transition	Drei HTML with Transition	Adds a transition effect to a Drei HTML component.
121	r3f-drei-html-audio	Drei HTML with Audio	Incorporates audio controls inside a Drei HTML component.
122	r3f-drei-html-video	Drei HTML with Video	Adds video playback controls inside a Drei HTML component.
123	r3f-drei-html-svg	Drei HTML with SVG	Inserts an SVG graphic inside a Drei HTML component.
124	r3f-drei-html-list	Drei HTML with List	Creates a list inside a Drei HTML component.
125	r3f-drei-html-map	Drei HTML with Map	Adds an iframe for embedding a map or external content.
126	r3f-drei-html-chart	Drei HTML with Chart	Creates a chart using an HTML canvas element.
127	r3f-drei-html-notification	Drei HTML with Notification	Displays a notification message inside a Drei HTML component.
128	r3f-drei-html-footer	Drei HTML with Footer	Adds a footer inside a Drei HTML component.
129	r3f-drei-html-header	Drei HTML with Header	Creates a header inside a Drei HTML component.
130	r3f-drei-html-modal	Drei HTML with Modal	Creates a modal dialog inside a Drei HTML component.
131	r3f-drei-html-progress	Drei HTML with Progress Bar	Adds a progress bar inside a Drei HTML component.
132	r3f-drei-html-spinner	Drei HTML with Spinner	Displays a loading spinner inside a Drei HTML component.
133	r3f-drei-html-dropdown	Drei HTML Dropdown	Creates a dropdown menu inside a Drei HTML component.
134	r3f-drei-html-checkbox	Drei HTML with Checkbox	Adds a checkbox inside a Drei HTML component.
135	r3f-drei-html-radio	Drei HTML with Radio Button	Creates a radio button inside a Drei HTML component.
136	r3f-drei-html-custom-styles	Drei HTML with Custom Styles	Adds a custom styled component inside a Drei HTML component.
137	r3f-drei-html-scroll	Drei HTML with Scrollable Content	Creates a scrollable content area inside a Drei HTML component.
138	r3f-drei-html-gallery	Drei HTML with Image Gallery	Creates an image gallery inside a Drei HTML component.
139	r3f-drei-html-color-picker	Drei HTML with Color Picker	Adds a color picker inside a Drei HTML component.
140	r3f-drei-html-loading	Drei HTML with Loading Indicator	Displays a loading indicator inside a Drei HTML component.
141	r3f-drei-html-countdown	Drei HTML with Countdown Timer	Creates a countdown timer inside a Drei HTML component.
142	r3f-drei-html-faq	Drei HTML with FAQ Section	Creates an FAQ section inside a Drei HTML component.
143	r3f-drei-html-social	Drei HTML with Social Media Links	Adds social media links inside a Drei HTML component.
144	r3f-drei-html-reviews	Drei HTML with Reviews	Displays user reviews inside a Drei HTML component.
145	r3f-drei-html-ratings	Drei HTML with Ratings	Creates a rating display inside a Drei HTML component.
146	r3f-drei-html-cursor	Drei HTML with Custom Cursor	Adds a custom cursor effect inside a Drei HTML component.
147	r3f-drei-html-bg-image	Drei HTML with Background Image	Creates a background image for a Drei HTML component.
148	r3f-drei-html-banner	Drei HTML with Notification Banner	Displays a notification banner inside a Drei HTML component.
149	r3f-drei-html-bg-color	Drei HTML with Background Color	Creates a component with a background color inside a Drei HTML component.
150	r3f-drei-html-countdown-timer	Drei HTML with Countdown	Displays a countdown timer inside a Drei HTML component.
151	r3f-drei-html-3d-text	Drei HTML with 3D Text	Adds 3D text inside a Drei HTML component.
152	r3f-drei-html-carousel	Drei HTML with Image Carousel	Creates an image carousel inside a Drei HTML component.
153	r3f-drei-html-fancy-button	Drei HTML with Fancy Button	Adds a fancy button inside a Drei HTML component.
154	r3f-drei-html-sidebar	Drei HTML with Sidebar	Creates a sidebar component inside a Drei HTML component.
155	r3f-leva-color	Leva Control for Color	Creates a color control using useControls.
156	r3f-leva-number	Leva Control for Number	Creates a number control with min and max values.
157	r3f-leva-range	Leva Control for Range	Creates a range control with step value.
158	r3f-leva-boolean	Leva Control for Boolean	Creates a boolean toggle control.
159	r3f-leva-select	Leva Control for Select	Creates a select dropdown control.
160	r3f-leva-multi-select	Leva Control for Multi-Select	Creates a multi-select dropdown control.
161	r3f-leva-folder	Leva Control for Folder	Creates a folder for grouping controls.
162	r3f-leva-texture	Leva Control for Texture	Creates a control for texture file paths.
163	r3f-leva-gradient	Leva Control for Gradient	Creates a control for selecting gradient types.
164	r3f-leva-animation-speed	Leva Control for Animation Speed	Creates a control for adjusting animation speed.
165	r3f-leva-rotation	Leva Control for Rotation	Creates controls for rotating an object.
166	r3f-leva-scale	Leva Control for Scale	Creates a control for scaling an object.
167	r3f-leva-position	Leva Control for Position	Creates controls for positioning an object.
168	r3f-leva-bg-color	Leva Control for Background Color	Creates a control for background color.
169	r3f-leva-fog	Leva Control for Fog	Creates a control for adjusting fog density.
170	r3f-leva-light-intensity	Leva Control for Light Intensity	Creates a control for adjusting light intensity.
171	r3f-leva-shadow	Leva Control for Shadow	Creates a boolean control for shadow visibility.
172	r3f-leva-reflection	Leva Control for Reflection	Creates a boolean control for reflection visibility.
173	r3f-leva-wireframe	Leva Control for Wireframe	Creates a boolean control for wireframe mode.
174	r3f-leva-opacity	Leva Control for Opacity	Creates a control for adjusting opacity.
175	r3f-leva-depth	Leva Control for Depth	Creates a control for adjusting depth.
176	r3f-leva-direction	Leva Control for Direction	Creates controls for setting direction values.
177	r3f-leva-shadow-map-size	Leva Control for Shadow Map Size	Creates a control for shadow map size.
178	r3f-leva-light-color	Leva Control for Light Color	Creates a color control for light color.
179	r3f-leva-camera-fov	Leva Control for Camera FOV	Creates a control for adjusting camera field of view.
180	r3f-leva-camera-position	Leva Control for Camera Position	Creates controls for setting camera position.
181	r3f-leva-point-light-position	Leva Control for Point Light Position	Creates controls for point light position.
182	r3f-leva-ambient-light-color	Leva Control for Ambient Light Color	Creates a color control for ambient light.
183	r3f-leva-texture-repeat	Leva Control for Texture Repeat	Creates controls for repeating textures.
184	r3f-leva-light-position	Leva Control for Light Position	Creates controls for setting light position.
185	r3f-leva-image	Leva Control for Image	Creates a control for image file paths.
186	r3f-leva-animation-loop	Leva Control for Animation Loop	Creates a control for selecting animation loop types.
187	r3f-leva-noise	Leva Control for Noise	Creates a control for adjusting noise levels.
188	r3f-leva-bloom	Leva Control for Bloom	Creates a control for bloom effect intensity.
189	r3f-leva-glitch	Leva Control for Glitch	Creates a boolean control for enabling glitch effects.
190	r3f-leva-distortion	Leva Control for Distortion	Creates a control for adjusting distortion levels.
191	r3f-leva-time	Leva Control for Time	Creates a control for adjusting time value.
192	r3f-leva-oscillation	Leva Control for Oscillation	Creates a control for adjusting oscillation frequency.
193	r3f-leva-distance	Leva Control for Distance	Creates a control for adjusting distance.
194	r3f-leva-speed	Leva Control for Speed	Creates a control for adjusting speed.
195	r3f-leva-frequency	Leva Control for Frequency	Creates a control for adjusting frequency.
196	r3f-leva-phase	Leva Control for Phase	Creates a control for adjusting phase.
197	r3f-leva-falloff	Leva Control for Falloff	Creates a control for adjusting falloff.
198	r3f-leva-particle-size	Leva Control for Particle Size	Creates a control for adjusting particle size.

ASHABB React Three Fiber

ASHABB

We offer freelance web development using MERN, NextJS and ThreeJS.

ASHABB React Three Fiber snippets extension

Features

Screenshots

Shortcut Table

We offer freelance web development using
MERN, NextJS and ThreeJS.