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. |