[
{
"path": ".gitignore",
"content": "# misc\n.DS_Store\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# Logs\nlogs\n*.log\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# Directory for instrumented libs generated by jscoverage/JSCover\nlib-cov\n\n# Coverage directory used by tools like istanbul\ncoverage\n*.lcov\n\n# nyc test coverage\n.nyc_output\n\n# Compiled binary addons (https://nodejs.org/api/addons.html)\nbuild/\n\n# Dependency directories\nnode_modules/\njspm_packages/\n\n# TypeScript cache\n*.tsbuildinfo\n\n# Optional eslint cache\n.eslintcache\n\n# Output of 'npm pack'\n*.tgz\n\n# Yarn Integrity file\n.yarn-integrity\n\n# pnpm lock\n\npnpm-lock.yaml\n\ndist\n"
},
{
"path": ".prettierrc",
"content": "{\n \"printWidth\": 140,\n \"tabWidth\": 2,\n \"useTabs\": false,\n \"semi\": false,\n \"singleQuote\": false,\n \"trailingComma\": \"all\",\n \"bracketSpacing\": true,\n \"jsxBracketSameLine\": true,\n \"fluid\": false\n}"
},
{
"path": "package.json",
"content": "{\n \"name\": \"floating-shoe\",\n \"version\": \"1.0.0\",\n \"description\": \"\",\n \"keywords\": [],\n \"main\": \"src/index.js\",\n \"dependencies\": {\n \"drei\": \"2.2.12\",\n \"react\": \"17.0.1\",\n \"react-colorful\": \"4.4.4\",\n \"react-dom\": \"17.0.1\",\n \"react-scripts\": \"4.0.1\",\n \"react-three-fiber\": \"5.3.10\",\n \"three\": \"0.123.0\",\n \"valtio\": \"0.4.8\"\n },\n \"devDependencies\": {\n \"typescript\": \"4.1.3\"\n },\n \"scripts\": {\n \"start\": \"react-scripts start\",\n \"build\": \"react-scripts build\",\n \"test\": \"react-scripts test --env=jsdom\",\n \"eject\": \"react-scripts eject\"\n },\n \"browserslist\": [\n \">0.2%\",\n \"not dead\",\n \"not ie <= 11\",\n \"not op_mini all\"\n ]\n}"
},
{
"path": "public/index.html",
"content": "\n\n \n \n \n \n \n \n \n \n React App\n \n\n \n \n \n \n \n\n"
},
{
"path": "readme.md",
"content": "\r\n\r\n npm install\r\n npm start\r\n \r\nThis is a small primer on how to use GLTF models on the web, specifically how to use them as dynamic assets.\r\n\r\nTutorial: https://www.youtube.com/watch?v=xy_tbV4pC54\r\n\r\nLive demo: https://codesandbox.io/s/floating-shoe-forked-qxjoj\r\n\r\n### How to compress assets and turn them into JSX components\r\n\r\n1. `npx gltf-pipeline -i model.gltf -o model.glb --draco.compressionLevel=7`\r\n1. `npx gltfjsx model.glb`\r\n\r\n### How to include them in your project\r\n\r\n1. Set up [react-three-fiber](https://github.com/pmndrs/react-three-fiber)\r\n1. Put `model.glb` into `/public`\r\n1. Put `Model.js` (the output of [gltfjsx](https://github.com/pmndrs/react-three-fiber)) anywhere inside `/src`\r\n"
},
{
"path": "resources/gltf/shoe.gltf",
"content": "{\n \"asset\" : {\n \"generator\" : \"Khronos glTF Blender I/O v1.3.48\",\n \"version\" : \"2.0\"\n },\n \"scene\" : 0,\n \"scenes\" : [\n {\n \"name\" : \"Scene\",\n \"nodes\" : [\n 0,\n 1,\n 2\n ]\n }\n ],\n \"nodes\" : [\n {\n \"mesh\" : 0,\n \"name\" : \"Shoe\"\n },\n {\n \"name\" : \"Light\",\n \"rotation\" : [\n 0.16907575726509094,\n 0.7558803558349609,\n -0.27217137813568115,\n 0.570947527885437\n ],\n \"translation\" : [\n 4.076245307922363,\n 5.903861999511719,\n -1.0054539442062378\n ]\n },\n {\n \"name\" : \"Camera\",\n \"rotation\" : [\n 0.483536034822464,\n 0.33687159419059753,\n -0.20870360732078552,\n 0.7804827094078064\n ],\n \"translation\" : [\n 7.358891487121582,\n 4.958309173583984,\n 6.925790786743164\n ]\n }\n ],\n \"materials\" : [\n {\n \"doubleSided\" : true,\n \"emissiveFactor\" : [\n 0,\n 0,\n 0\n ],\n \"name\" : \"laces\",\n \"normalTexture\" : {\n \"index\" : 0,\n \"texCoord\" : 0\n },\n \"occlusionTexture\" : {\n \"index\" : 1,\n \"texCoord\" : 0\n },\n \"pbrMetallicRoughness\" : {\n \"baseColorFactor\" : [\n 1,\n 1,\n 1,\n 1\n ],\n \"metallicRoughnessTexture\" : {\n \"index\" : 1,\n \"texCoord\" : 0\n }\n }\n },\n {\n \"emissiveFactor\" : [\n 0,\n 0,\n 0\n ],\n \"name\" : \"mesh\",\n \"normalTexture\" : {\n \"index\" : 2,\n \"texCoord\" : 0\n },\n \"occlusionTexture\" : {\n \"index\" : 3,\n \"texCoord\" : 0\n },\n \"pbrMetallicRoughness\" : {\n \"baseColorFactor\" : [\n 1,\n 1,\n 1,\n 1\n ],\n \"metallicRoughnessTexture\" : {\n \"index\" : 3,\n \"texCoord\" : 0\n }\n }\n },\n {\n \"doubleSided\" : true,\n \"emissiveFactor\" : [\n 0,\n 0,\n 0\n ],\n \"name\" : \"caps\",\n \"pbrMetallicRoughness\" : {\n \"baseColorFactor\" : [\n 1,\n 1,\n 1,\n 1\n ],\n \"metallicFactor\" : 0.5,\n \"roughnessFactor\" : 0.5\n }\n },\n {\n \"doubleSided\" : true,\n \"emissiveFactor\" : [\n 0,\n 0,\n 0\n ],\n \"name\" : \"inner\",\n \"normalTexture\" : {\n \"index\" : 4,\n \"texCoord\" : 0\n },\n \"occlusionTexture\" : {\n \"index\" : 5,\n \"texCoord\" : 0\n },\n \"pbrMetallicRoughness\" : {\n \"baseColorFactor\" : [\n 1,\n 1,\n 1,\n 1\n ],\n \"metallicRoughnessTexture\" : {\n \"index\" : 5,\n \"texCoord\" : 0\n }\n }\n },\n {\n \"doubleSided\" : true,\n \"emissiveFactor\" : [\n 0,\n 0,\n 0\n ],\n \"name\" : \"sole\",\n \"normalTexture\" : {\n \"index\" : 6,\n \"texCoord\" : 0\n },\n \"occlusionTexture\" : {\n \"index\" : 7,\n \"texCoord\" : 0\n },\n \"pbrMetallicRoughness\" : {\n \"baseColorFactor\" : [\n 1,\n 1,\n 1,\n 1\n ],\n \"metallicRoughnessTexture\" : {\n \"index\" : 7,\n \"texCoord\" : 0\n }\n }\n },\n {\n \"doubleSided\" : true,\n \"emissiveFactor\" : [\n 0,\n 0,\n 0\n ],\n \"name\" : \"stripes\",\n \"normalTexture\" : {\n \"index\" : 8,\n \"texCoord\" : 0\n },\n \"occlusionTexture\" : {\n \"index\" : 9,\n \"texCoord\" : 0\n },\n \"pbrMetallicRoughness\" : {\n \"baseColorFactor\" : [\n 1,\n 1,\n 1,\n 1\n ],\n \"metallicRoughnessTexture\" : {\n \"index\" : 9,\n \"texCoord\" : 0\n }\n }\n },\n {\n \"doubleSided\" : true,\n \"emissiveFactor\" : [\n 0,\n 0,\n 0\n ],\n \"name\" : \"band\",\n \"normalTexture\" : {\n \"index\" : 10,\n \"texCoord\" : 0\n },\n \"occlusionTexture\" : {\n \"index\" : 11,\n \"texCoord\" : 0\n },\n \"pbrMetallicRoughness\" : {\n \"baseColorFactor\" : [\n 1,\n 1,\n 1,\n 1\n ],\n \"metallicRoughnessTexture\" : {\n \"index\" : 11,\n \"texCoord\" : 0\n }\n }\n },\n {\n \"doubleSided\" : true,\n \"emissiveFactor\" : [\n 0,\n 0,\n 0\n ],\n \"name\" : \"patch\",\n \"normalTexture\" : {\n \"index\" : 12,\n \"texCoord\" : 0\n },\n \"occlusionTexture\" : {\n \"index\" : 13,\n \"texCoord\" : 0\n },\n \"pbrMetallicRoughness\" : {\n \"baseColorFactor\" : [\n 1,\n 1,\n 1,\n 1\n ],\n \"metallicRoughnessTexture\" : {\n \"index\" : 13,\n \"texCoord\" : 0\n }\n }\n }\n ],\n \"meshes\" : [\n {\n \"name\" : \"shoe\",\n \"primitives\" : [\n {\n \"attributes\" : {\n \"POSITION\" : 0,\n \"NORMAL\" : 1,\n \"TEXCOORD_0\" : 2\n },\n \"indices\" : 3,\n \"material\" : 0\n },\n {\n \"attributes\" : {\n \"POSITION\" : 4,\n \"NORMAL\" : 5,\n \"TEXCOORD_0\" : 6\n },\n \"indices\" : 7,\n \"material\" : 1\n },\n {\n \"attributes\" : {\n \"POSITION\" : 8,\n \"NORMAL\" : 9,\n \"TEXCOORD_0\" : 10\n },\n \"indices\" : 11,\n \"material\" : 2\n },\n {\n \"attributes\" : {\n \"POSITION\" : 12,\n \"NORMAL\" : 13,\n \"TEXCOORD_0\" : 14\n },\n \"indices\" : 15,\n \"material\" : 3\n },\n {\n \"attributes\" : {\n \"POSITION\" : 16,\n \"NORMAL\" : 17,\n \"TEXCOORD_0\" : 18\n },\n \"indices\" : 19,\n \"material\" : 4\n },\n {\n \"attributes\" : {\n \"POSITION\" : 20,\n \"NORMAL\" : 21,\n \"TEXCOORD_0\" : 22\n },\n \"indices\" : 23,\n \"material\" : 5\n },\n {\n \"attributes\" : {\n \"POSITION\" : 24,\n \"NORMAL\" : 25,\n \"TEXCOORD_0\" : 26\n },\n \"indices\" : 27,\n \"material\" : 6\n },\n {\n \"attributes\" : {\n \"POSITION\" : 28,\n \"NORMAL\" : 29,\n \"TEXCOORD_0\" : 30\n },\n \"indices\" : 31,\n \"material\" : 7\n }\n ]\n }\n ],\n \"textures\" : [\n {\n \"source\" : 0\n },\n {\n \"source\" : 1\n },\n {\n \"source\" : 0\n },\n {\n \"source\" : 1\n },\n {\n \"source\" : 0\n },\n {\n \"source\" : 1\n },\n {\n \"source\" : 0\n },\n {\n \"source\" : 1\n },\n {\n \"source\" : 0\n },\n {\n \"source\" : 1\n },\n {\n \"source\" : 0\n },\n {\n \"source\" : 1\n },\n {\n \"source\" : 0\n },\n {\n \"source\" : 1\n }\n ],\n \"images\" : [\n {\n \"mimeType\" : \"image/jpeg\",\n \"name\" : \"normal\",\n \"uri\" : \"normal.jpg\"\n },\n {\n \"mimeType\" : \"image/jpeg\",\n \"name\" : \"occlusionRougnessMetalness\",\n \"uri\" : \"occlusionRougnessMetalness.jpg\"\n }\n ],\n \"accessors\" : [\n {\n \"bufferView\" : 0,\n \"componentType\" : 5126,\n \"count\" : 1552,\n \"max\" : [\n 0.31010252237319946,\n 0.23435352742671967,\n 0.19393111765384674\n ],\n \"min\" : [\n -0.21236468851566315,\n -0.11542611569166183,\n -0.27246636152267456\n ],\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 1,\n \"componentType\" : 5126,\n \"count\" : 1552,\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 2,\n \"componentType\" : 5126,\n \"count\" : 1552,\n \"type\" : \"VEC2\"\n },\n {\n \"bufferView\" : 3,\n \"componentType\" : 5123,\n \"count\" : 7227,\n \"type\" : \"SCALAR\"\n },\n {\n \"bufferView\" : 4,\n \"componentType\" : 5126,\n \"count\" : 5199,\n \"max\" : [\n 0.9846919178962708,\n 0.3809230625629425,\n 0.3442471921443939\n ],\n \"min\" : [\n -0.9474887251853943,\n -0.3825278878211975,\n -0.35044431686401367\n ],\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 5,\n \"componentType\" : 5126,\n \"count\" : 5199,\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 6,\n \"componentType\" : 5126,\n \"count\" : 5199,\n \"type\" : \"VEC2\"\n },\n {\n \"bufferView\" : 7,\n \"componentType\" : 5123,\n \"count\" : 21165,\n \"type\" : \"SCALAR\"\n },\n {\n \"bufferView\" : 8,\n \"componentType\" : 5126,\n \"count\" : 1374,\n \"max\" : [\n 0.2774718105792999,\n 0.16645346581935883,\n 0.19632135331630707\n ],\n \"min\" : [\n -0.2291366010904312,\n -0.13262774050235748,\n -0.2687131464481354\n ],\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 9,\n \"componentType\" : 5126,\n \"count\" : 1374,\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 10,\n \"componentType\" : 5126,\n \"count\" : 1374,\n \"type\" : \"VEC2\"\n },\n {\n \"bufferView\" : 11,\n \"componentType\" : 5123,\n \"count\" : 6210,\n \"type\" : \"SCALAR\"\n },\n {\n \"bufferView\" : 12,\n \"componentType\" : 5126,\n \"count\" : 2166,\n \"max\" : [\n 0.9421579241752625,\n 0.40126022696495056,\n 0.2965231239795685\n ],\n \"min\" : [\n -0.8118161559104919,\n -0.38051360845565796,\n -0.3006590008735657\n ],\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 13,\n \"componentType\" : 5126,\n \"count\" : 2166,\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 14,\n \"componentType\" : 5126,\n \"count\" : 2166,\n \"type\" : \"VEC2\"\n },\n {\n \"bufferView\" : 15,\n \"componentType\" : 5123,\n \"count\" : 11025,\n \"type\" : \"SCALAR\"\n },\n {\n \"bufferView\" : 16,\n \"componentType\" : 5126,\n \"count\" : 1317,\n \"max\" : [\n 1.0000001192092896,\n -0.220381498336792,\n 0.38874176144599915\n ],\n \"min\" : [\n -1,\n -0.5139704942703247,\n -0.38874176144599915\n ],\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 17,\n \"componentType\" : 5126,\n \"count\" : 1317,\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 18,\n \"componentType\" : 5126,\n \"count\" : 1317,\n \"type\" : \"VEC2\"\n },\n {\n \"bufferView\" : 19,\n \"componentType\" : 5123,\n \"count\" : 6315,\n \"type\" : \"SCALAR\"\n },\n {\n \"bufferView\" : 20,\n \"componentType\" : 5126,\n \"count\" : 1570,\n \"max\" : [\n 0.20826250314712524,\n 0.004239952191710472,\n 0.32903969287872314\n ],\n \"min\" : [\n -0.2780020833015442,\n -0.3307887613773346,\n -0.3230103552341461\n ],\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 21,\n \"componentType\" : 5126,\n \"count\" : 1570,\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 22,\n \"componentType\" : 5126,\n \"count\" : 1570,\n \"type\" : \"VEC2\"\n },\n {\n \"bufferView\" : 23,\n \"componentType\" : 5123,\n \"count\" : 7350,\n \"type\" : \"SCALAR\"\n },\n {\n \"bufferView\" : 24,\n \"componentType\" : 5126,\n \"count\" : 1705,\n \"max\" : [\n 0.34729886054992676,\n 0.5139704942703247,\n 0.0058010234497487545\n ],\n \"min\" : [\n -0.8557736277580261,\n -0.08276855945587158,\n -0.09417246282100677\n ],\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 25,\n \"componentType\" : 5126,\n \"count\" : 1705,\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 26,\n \"componentType\" : 5126,\n \"count\" : 1705,\n \"type\" : \"VEC2\"\n },\n {\n \"bufferView\" : 27,\n \"componentType\" : 5123,\n \"count\" : 7860,\n \"type\" : \"SCALAR\"\n },\n {\n \"bufferView\" : 28,\n \"componentType\" : 5126,\n \"count\" : 219,\n \"max\" : [\n -0.7029263377189636,\n 0.17990857362747192,\n 0.1358068436384201\n ],\n \"min\" : [\n -0.9019400477409363,\n -0.021011920645833015,\n -0.22399701178073883\n ],\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 29,\n \"componentType\" : 5126,\n \"count\" : 219,\n \"type\" : \"VEC3\"\n },\n {\n \"bufferView\" : 30,\n \"componentType\" : 5126,\n \"count\" : 219,\n \"type\" : \"VEC2\"\n },\n {\n \"bufferView\" : 31,\n \"componentType\" : 5123,\n \"count\" : 948,\n \"type\" : \"SCALAR\"\n }\n ],\n \"bufferViews\" : [\n {\n \"buffer\" : 0,\n \"byteLength\" : 18624,\n \"byteOffset\" : 0\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 18624,\n \"byteOffset\" : 18624\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 12416,\n \"byteOffset\" : 37248\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 14454,\n \"byteOffset\" : 49664\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 62388,\n \"byteOffset\" : 64120\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 62388,\n \"byteOffset\" : 126508\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 41592,\n \"byteOffset\" : 188896\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 42330,\n \"byteOffset\" : 230488\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 16488,\n \"byteOffset\" : 272820\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 16488,\n \"byteOffset\" : 289308\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 10992,\n \"byteOffset\" : 305796\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 12420,\n \"byteOffset\" : 316788\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 25992,\n \"byteOffset\" : 329208\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 25992,\n \"byteOffset\" : 355200\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 17328,\n \"byteOffset\" : 381192\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 22050,\n \"byteOffset\" : 398520\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 15804,\n \"byteOffset\" : 420572\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 15804,\n \"byteOffset\" : 436376\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 10536,\n \"byteOffset\" : 452180\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 12630,\n \"byteOffset\" : 462716\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 18840,\n \"byteOffset\" : 475348\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 18840,\n \"byteOffset\" : 494188\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 12560,\n \"byteOffset\" : 513028\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 14700,\n \"byteOffset\" : 525588\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 20460,\n \"byteOffset\" : 540288\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 20460,\n \"byteOffset\" : 560748\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 13640,\n \"byteOffset\" : 581208\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 15720,\n \"byteOffset\" : 594848\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 2628,\n \"byteOffset\" : 610568\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 2628,\n \"byteOffset\" : 613196\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 1752,\n \"byteOffset\" : 615824\n },\n {\n \"buffer\" : 0,\n \"byteLength\" : 1896,\n \"byteOffset\" : 617576\n }\n ],\n \"buffers\" : [\n {\n \"byteLength\" : 619472,\n \"uri\" : \"shoe.bin\"\n }\n ]\n}\n"
},
{
"path": "src/App.js",
"content": "import React, { Suspense, useRef, useState, useEffect } from \"react\"\nimport { Canvas, useFrame } from \"react-three-fiber\"\nimport { ContactShadows, Environment, useGLTF, OrbitControls } from \"drei\"\nimport { HexColorPicker } from \"react-colorful\"\nimport { proxy, useProxy } from \"valtio\"\n\n// Using a Valtio state model to bridge reactivity between\n// the canvas and the dom, both can write to it and/or react to it.\nconst state = proxy({\n current: null,\n items: {\n laces: \"#ffffff\",\n mesh: \"#ffffff\",\n caps: \"#ffffff\",\n inner: \"#ffffff\",\n sole: \"#ffffff\",\n stripes: \"#ffffff\",\n band: \"#ffffff\",\n patch: \"#ffffff\",\n },\n})\n\nfunction Shoe() {\n const ref = useRef()\n const snap = useProxy(state)\n // Drei's useGLTF hook sets up draco automatically, that's how it differs from useLoader(GLTFLoader, url)\n // { nodes, materials } are extras that come from useLoader, these do not exist in threejs/GLTFLoader\n // nodes is a named collection of meshes, materials a named collection of materials\n const { nodes, materials } = useGLTF(\"shoe-draco.glb\")\n\n // Animate model\n useFrame((state) => {\n const t = state.clock.getElapsedTime()\n ref.current.rotation.z = -0.2 - (1 + Math.sin(t / 1.5)) / 20\n ref.current.rotation.x = Math.cos(t / 4) / 8\n ref.current.rotation.y = Math.sin(t / 4) / 8\n ref.current.position.y = (1 + Math.sin(t / 1.5)) / 10\n })\n\n // Cursor showing current color\n const [hovered, set] = useState(null)\n useEffect(() => {\n const cursor = ``\n const auto = ``\n document.body.style.cursor = `url('data:image/svg+xml;base64,${btoa(hovered ? cursor : auto)}'), auto`\n }, [hovered])\n\n // Using the GLTFJSX output here to wire in app-state and hook up events\n return (\n (e.stopPropagation(), set(e.object.material.name))}\n onPointerOut={(e) => e.intersections.length === 0 && set(null)}\n onPointerMissed={() => (state.current = null)}\n onPointerDown={(e) => (e.stopPropagation(), (state.current = e.object.material.name))}>\n \n \n \n \n \n \n \n \n \n )\n}\n\nfunction Picker() {\n const snap = useProxy(state)\n return (\n \n (state.items[snap.current] = color)} />\n {snap.current}
\n
\n )\n}\n\nexport default function App() {\n return (\n <>\n \n \n \n )\n}\n"
},
{
"path": "src/index.js",
"content": "import React from \"react\"\nimport ReactDOM from \"react-dom\"\nimport \"./styles.css\"\nimport \"react-colorful/dist/index.css\"\nimport App from \"./App\"\n\nReactDOM.render(, document.getElementById(\"root\"))\n"
},
{
"path": "src/styles.css",
"content": "@import url(\"https://rsms.me/inter/inter.css\");\n\nhtml,\nbody,\n#root {\n position: relative;\n margin: 0;\n padding: 0;\n overflow: hidden;\n outline: none;\n width: 100vw;\n height: 100vh;\n}\n\nbody {\n background: white;\n font-family: \"Inter var\", sans-serif;\n display: flex;\n justify-content: center;\n}\n\n#root {\n width: 76ch;\n}\n\nh1 {\n position: absolute;\n top: 43px;\n left: 140px;\n padding: 0;\n margin: 40px;\n font-size: 5em;\n line-height: 0.7em;\n letter-spacing: -6px;\n color: #272730;\n}\n\n.picker {\n position: absolute !important;\n top: 74px;\n left: 70px;\n width: 90px !important;\n height: 90px !important;\n}"
}
]