Fiber Snap

Snap React Three Fiber scenes together from shorthand. Type abbreviations, expand into full R3F component trees.

Usage

Type an abbreviation in any .jsx or .tsx file, accept the r3f: suggestion from autocomplete, and it expands into full R3F JSX with tab stops.

You type	You get
`mesh.box`	`<mesh>` with `<boxGeometry />` and `<meshStandardMaterial />`
`mesh.sphere>mat.phong`	Sphere mesh with Phong material
`alight`	`<ambientLight intensity={0.5} />`
`plight`	`<pointLight position={[10, 10, 10]} />`
`canvas>alight+plight+mesh.box`	Full Canvas setup with lights and a mesh
`group>mesh.box*3`	Group containing 3 box meshes
`orbit`	`<OrbitControls />`
`environment`	`<Environment preset="studio" />`

Geometries: box, sphere, plane, cylinder, cone, torus, ring, circle, tube, extrude, lathe, dodecahedron, icosahedron, octahedron, tetrahedron

Materials: std (standard), basic, phong, lambert, normal, toon, physical, depth, matcap

Lights: alight, plight, dlight, slight, hlight

Controls: orbit, trackball, fly, pointerlock, transform

Helpers: axes, grid, arrow

Drei: text, html, billboard, float, sparkles, stars, cloud, sky, environment

Structural: mesh, group, canvas, scene

Setting	Default	Description
`r3fEmmet.enable`	`true`	Enable or disable Fiber Snap
`r3fEmmet.customMappings`	`{}`	Add your own shortcode mappings

MIT