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

ASHABB React Three Fiber VSCode snippets extension : 1.0.2

🎉 Heartfelt Thanks to the Three.js & React Three Fiber Communities 🎉

I want to extend my deepest gratitude to the entire Three.js and React Three Fiber communities. Your passion for the React Three Fiber Snippets extension has been a constant source of inspiration. ✨

🚀 I built this application from the ground up, personally testing and executing every snippet to ensure flawless functionality. Our mission is to simplify your development process and empower you with the full potential of R3F for your projects. We're continuously working hard to add even more snippets and features.

🙏 Thank you for your unwavering support. Your feedback and comments will fuel our motivation as we continue improving this tool.

💡 Please help us reach our goal of 1,000 installs by sharing this extension on LinkedIn, Instagram, and YouTube, and spread the word among your developer friends. 🗣️

Also, check out our official Ashabb page and follow us on Instagram and LinkedIn for updates!

A Visual Studio Code extension that provides 88 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!

🎁 What's New

Added R3F, Drei, and Leva code snippets.
Each snippet is manually crafted and rigorously tested to ensure reliability before release.
Snippets are now provided in full component form for ease of use.

😍 Coming Soon

An extensive collection of Drei snippets, complete with sample code.

📖 Usage Instructions

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

📘 Support and Posts

🛠️ Our other Tools

All : https://www.ashabb.com/#tools
React Three Fiber Snippet - Vscode Extension : https://marketplace.visualstudio.com/items?itemName=ASHABB.ashabb-react-three-fiber
MERN Snippets - Vscode Extension : https://marketplace.visualstudio.com/items?itemName=ASHABB.ashabb-mern-snippets
Social Media Shortcut - Chrome Extension : https://chromewebstore.google.com/detail/sms-social-media-shortcut/kfpchlfnppcapgmgpcjppfaeflmjaimd

💻 Screenshots

⌨️ Shortcut Table

Seq	Shortcut	Title	Description
1	ThreeJS_R3F_Docs_Resources	ThreeJS_R3F_Docs_Resources	Essential React Three Fiber and Three.js Documentations and
2	r3f-canvas	React_Three_Fiber_Canvas	Creates a full-screen React Three Fiber Canvas with a green
3	r3f-all-geometry-group	AllGeometryGroup	Creates a group of various geometries aligned vertically in
4	r3f-group	Group	Creates a group to organize multiple meshes.
5	r3f-animation-mixer	AnimationMixer	Sets up an animation mixer for animated models.
6	r3f-light-probe	LightProbe	Adds a light probe for improved lighting.
7	r3f-billboard	Billboard	Creates a billboard that always faces the camera.
8	r3f-perf	Perf	Animates the intensity of a light and includes performance
9	r3f-stats	Stats	Displays performance stats for the 3D scene.
10	r3f-box-geometry	BoxGeometry	R3F Box Geometry
11	r3f-circle-geometry	CircleGeometry	R3F Circle Geometry
12	r3f-cone-geometry	ConeGeometry	R3F Cone Geometry
13	r3f-cylinder-geometry	CylinderGeometry	R3F Cylinder Geometry
14	r3f-dodecahedron-geometry	DodecahedronGeometry	R3F Dodecahedron Geometry
15	r3f-extrude-geometry	ExtrudeGeometry	Extrude Geometry in React Three Fiber
16	r3f-icosahedron-geometry	IcosahedronGeometry	R3F Icosahedron Geometry
17	r3f-lathe-geometry	LatheGeometry	Lathe Geometry Snippet
18	r3f-octahedron-geometry	OctahedronGeometry	R3F Octahedron Geometry
19	r3f-plane-geometry	PlaneGeometry	R3F Plane Geometry
20	r3f-polyhedron-geometry	PolyhedronGeometry	R3F Polyhedron Geometry
21	r3f-ring-geometry	RingGeometry	R3F Ring Geometry
22	r3f-shape-geometry	ShapeGeometry	R3F Shape Geometry
23	r3f-sphere-geometry	SphereGeometry	R3F Sphere Geometry
24	r3f-tetrahedron-geometry	TetrahedronGeometry	R3F Tetrahedron Geometry
25	r3f-torus-geometry	TorusGeometry	R3F Torus Geometry
26	r3f-torus-knot-geometry	TorusKnotGeometry	R3F Torus Knot Geometry
27	r3f-tube-geometry	TubeGeometry	R3F Tube Geometry
28	r3f-wireframe-geometry	WireframeGeometry	R3F Wireframe Geometry
29	r3f-events-click-raycaster	Events	Creates a box mesh with multiple event handlers in React Three
30	r3f-environment	Environment	Sets up a forest background environment in React Three Fiber.
31	r3f-shadow	Shadow	Creates a box over a plane with a directional light casting
32	r3f-Raycaster	Raycaster	Snippet for Raycaster in React Three Fiber
33	AnimationSnippet	Animation	AnimationSnippet component with rotating and moving box
34	r3f-sky	Sky	Snippet for Sky component with clear sun visibility
35	r3f-fog	Fog	Snippet for adding fog to a Three.js scene
36	r3f-instancedMesh	InstancedMesh	React Three Fiber Instance Mesh Example
37	r3f-sprite	Sprite	React Three Fiber Sprite Example
38	r3f-random-color	RandomColorBox	Random Color Box in React Three Fiber
39	r3f-material	Material	This snippet adds multiple materials to a rotating mesh and
40	r3f-drei-Camera-CubeCameraSnippet	CubeCamera	Sets up a CubeCamera for reflections with user controls.
41	r3f-drei-Camera-OrthographicCameraSnippet	OrthographicCamera	Sets up an Orthographic Camera.
42	r3f-drei-Camera-PerspectiveCameraSnippet	PerspectiveCamera	Sets up a Perspective Camera.
43	r3f-drei-Controls-KeyboardControls	KeyboardControls	Sets up KeyboardControls with a Player component and Canvas
44	r3f-drei-Controls-MotionPathControlsSnippet	MotionPathExample	Sets up MotionPathControls with a Circle path and moves the
45	r3f-drei-PresentationControlsSnippet	ControlsPresentationControls	Sets up a PresentationControls component with a rotating box
46	r3f-drei-Controls-ScrollControlsSnippet	ScrollControls	Creates a ScrollControls component with scrollable HTML content
47	r3f-drei-Gizmo-DragControls	DragControls	Snippet for DragControls with a draggable mesh.
48	r3f-drei-Gizmo-GizmoHelperSnippet	GizmoHelper	Sets up GizmoHelper and a purple mesh with axes helper.
49	r3f-drei-Grid	GizmoGrid	Snippet for a grid helper with a box mesh.
50	r3f-drei-Gizmo-HelperSnippet	Helper	Snippet for creating a mesh with BoxHelper in React Three Fiber
51	r3f-drei-Gizmo-PivotControls	PivotControls	Creates a PivotControls component with a mesh inside.
52	r3f-drei-Gizmo-TransformControls	TransformControls	Snippet for TransformControls in React Three Fiber.
53	r3f-drei-Loaders-useCubeTexture	useCubeTexture	Snippet for using cube textures in a Three.js scene.
54	r3f-drei-Loaders-useFBX	useFBX	Loads an FBX model using the useFBX hook.
55	r3f-drei-Loaders-useGLTF	useGLTF	Loads a GLTF model using the useGLTF hook.
56	r3f-drei-Loaders-useKTX2	useKTX2	Loads a KTX2 texture using the useKTX2 hook.
57	r3f-drei-Loaders-Loader	Loader	Displays a loading indicator while rendering a scene with
58	r3f-drei-Loaders-useProgress	UseProgress	UseProgress snippet with a loader component
59	r3f-drei-Loaders-useTexture	useTexture	Snippet for using a texture in a Three.js scene.
60	r3f-drei-Loaders-useTrailTexture	useTrailTexture	Snippet for useTrailTexture in React Three Fiber
61	r3f-drei-Loaders-useFont	UseFont	Snippet for useFont in React Three Fiber
62	r3f-drei-Loaders-UseSpriteLoader	UseSpriteLoader	Snippet for UseSpriteLoader in React Three Fiber.
63	r3f-drei-Loaders-useVideoTexture	UseVideoTexture	Creates a video texture from a URL.
64	r3f-drei-Text3D	Text3D	Text Geometry using Drei
65	r3f-ambient-light	AmbientLight	Ambient Light
66	r3f-directional-light	DirectionalLight	Directional Light
67	r3f-point-light	PointLight	Point Light
68	r3f-spot-light	SpotLight	Spot Light
69	r3f-hemisphere-light	HemisphereLight	Hemisphere Light
70	r3f-rect-area-light	RectAreaLight	Rect Area Light
71	r3f-shaders	ShadersSnippet	Water shader snippet for React Three Fiber.
72	r3f-useLoader-GLTFLoader	UseLoaderSnippet_GLTFLoader	Snippet for using useLoader to load GLTF models in R3F.
73	r3f-useLoader-TextureLoader	UseLoaderSnippet_TextureLoader	A snippet to load texture using useLoader and apply it to a box
74	r3f-orbitControls	OrbitControlsSnippet	Snippet for setting up OrbitControls with custom zoom, pan,
75	r3f-leva-button	Button	Leva button with useState and console log
76	r3f-leva-String	String	UseControls for String
77	r3f-leva-Boolean	Boolean	UseControls for Boolean
78	r3f-leva-Number	Number	UseControls for LevaNumber
79	r3f-leva-number-suffix	NumberSuffix	Leva Number Control with Suffix
80	r3f-leva-interval	Interval	Leva Interval Control
81	r3f-leva-color	Color	Leva Color Control
82	r3f-leva-select	SelectControl Control	Leva Select Control
83	r3f-leva-image-picker	ImagePicker Picker	Leva Control for Image Pickup
84	r3f-leva-vector	Vector	Leva Vector Control
85	r3f-leva-folder	Folder	Leva Controls Folder Example
86	r3f-leva-position	Position	Leva Control for Position
87	r3f-leva-date-picker	DatePicker Picker	Leva Control for Date Picker
88	r3f-leva-all-useControls	LevaControls	Leva controls setup

📚 Reference

R3F - https://r3f.docs.pmnd.rs/getting-started/introduction
Drei - https://drei.docs.pmnd.rs
Leva - https://leva.pmnd.rs

ASHABB React Three Fiber

ASHABB

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