r3f code snippets

r3f.code-snippets

{
  "R3F - Mesh Component": {
    "prefix": "r3fc",
    "body": [
      "const ${1:BoxMesh} = ({ ...props }) => {",
      "  return (",
      "    <mesh {...props}>",
      "        <boxBufferGeometry args={[1, 1, 1]} />",
      "        <meshPhysicalMaterial color={'blue'} />",
      "    </mesh>",
      "  )",
      "}",
      "export default ${1:BoxMesh}",
      ""
    ],
    "description": "R3F - Mesh Component"
  },
  "R3F - Mesh Component (Typescript)": {
    "prefix": "tsr3fc",
    "body": [
      "import { MeshProps } from \"@react-three/fiber\"",
      "",
      "type Props = Partial<Mesh> & {};",
      "",
      "const ${1:BoxMesh} = ({ ...props }: Props) => {",
      "  return (",
      "    <mesh {...props}>",
      "        <boxBufferGeometry args={[1, 1, 1]} />",
      "        <meshPhysicalMaterial color={'blue'} />",
      "    </mesh>",
      "  )",
      "}",
      "export default ${1:BoxMesh}",
      ""
    ],
    "description": "R3F - Mesh Component (Typescript)"
  },
  "R3F - Group Component": {
    "prefix": "r3fg",
    "body": [
      "const ${1:BoxMesh} = ({ ...props }) => {",
      "  return (",
      "      <group {...props}>",
      "        <mesh>",
      "            <planeBufferGeometry args={[1, 1]} />",
      "            <meshPhysicalMaterial color={'blue'} />",
      "        </mesh>",
      "      </group>",
      "  )",
      "}",
      "export default ${1:BoxMesh}"
    ],
    "description": "R3F - Group Component"
  },
  "R3F - Group Component (Typescript)": {
    "prefix": "tsr3fg",
    "body": [
      "import { GroupProps } from \"@react-three/fiber\";",
      "",
      "type Props = Partial<GroupProps> & {};",
      "",
      "const ${1:BoxMesh} = ({ ...props }: Props) => {",
      "  return (",
      "      <group {...props}>",
      "        <mesh>",
      "            <planeBufferGeometry args={[1, 1]} />",
      "            <meshPhysicalMaterial color={'blue'} />",
      "        </mesh>",
      "      </group>",
      "  )",
      "}",
      "export default ${1:BoxMesh}"
    ],
    "description": "R3F - Group Component (Typescript)"
  },
  "R3F - Mesh with ref": {
    "prefix": "tsr3fmr",
    "body": [
      "import { forwardRef } from \"react\";",
      "",
      "const ${1:BoxMesh} = forwardRef(({ ...props }, ref) => {",
      "  return (",
      "    <mesh ref={ref} {...props}>",
      "      <boxBufferGeometry args={[1, 1, 1]} />",
      "      <meshPhysicalMaterial color={\"blue\"} />",
      "    </mesh>",
      "  );",
      "});",
      "",
      "${1:BoxMesh}.displayName = \"${1:BoxMesh}\";",
      "export default ${1:BoxMesh};",
      ""
    ],
    "description": "Mesh with ref (TS)"
  },
  "R3F - Mesh with ref (Typescript)": {
    "prefix": "tsr3fmr",
    "body": [
      "import { MeshProps } from \"@react-three/fiber\";",
      "import { forwardRef } from \"react\";",
      "import { Mesh } from \"three\";",
      "",
      "type Props = Partial<MeshProps> & {};",
      "",
      "const ${1:BoxMesh} = forwardRef<Mesh, Props>(({ ...props }, ref) => {",
      "  return (",
      "    <mesh ref={ref} {...props}>",
      "      <boxBufferGeometry args={[1, 1, 1]} />",
      "      <meshPhysicalMaterial color={\"blue\"} />",
      "    </mesh>",
      "  );",
      "});",
      "",
      "${1:BoxMesh}.displayName = \"${1:BoxMesh}\";",
      "export default ${1:BoxMesh};",
      ""
    ],
    "description": "Mesh with ref (TS)"
  }
}