{"id":14088,"date":"2023-09-21T10:13:08","date_gmt":"2023-09-21T01:13:08","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=14088"},"modified":"2023-09-21T10:19:20","modified_gmt":"2023-09-21T01:19:20","slug":"drei-%ec%bb%b4%ed%8f%ac%eb%84%8c%ed%8a%b8-grid","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=14088","title":{"rendered":"Drei \ucef4\ud3ec\ub10c\ud2b8 : Grid"},"content":{"rendered":"

Drei \ucef4\ud3ec\ub10c\ud2b8\ub294 R3F\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ub9e4\uc6b0 \uc720\uc6a9\ud55c \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc9d1\ud569\uc785\ub2c8\ub2e4. \uadf8 \uc911 Grid \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud55c \uc0ac\uc6a9\uc778\ub370 Grid \uc774\uc678\uc758 Drei \ucef4\ud3ec\ub10c\ud2b8\ub3c4 \uc0ac\uc6a9\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 StatsGl, Center, Grid, GizmoHelper, GizmoViewcube, GizmoViewport \uc785\ub2c8\ub2e4.<\/p>\n

\uba3c\uc800 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4.<\/p>\n

\"\"<\/p>\n

\uc704\uc758 \uacb0\uacfc\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub97c \ud558\ub098\uc529 \uc0b4\ud3b4\ubcf4\uba74, \uba3c\uc800 App.jsx \uc785\ub2c8\ub2e4.<\/p>\n

\r\nimport '.\/App.css'\r\nimport { Canvas } from '@react-three\/fiber'\r\nimport MyElement3D from '.\/MyElement3D_Grid'\r\n\r\nfunction App() {\r\n  return (\r\n    <>\r\n      <Canvas shadows camera={{ position: [10, 12, 12], fov: 25 }}>\r\n        <color args={[\"#303035\"]} attach=\"background\" \/>\r\n        <MyElement3D \/>\r\n      <\/Canvas>\r\n    <\/>\r\n  )\r\n}\r\n\r\nexport default App\r\n<\/pre>\n
\ub2e4\uc74c\uc740 App \ucef4\ud3ec\ub10c\ud2b8\uc5d0\uc11c \uc0ac\uc6a9\ud558\uace0 \uc788\ub294 MyElement3D_Grid \ud30c\uc77c\uc5d0 \ub300\ud55c \ucf54\ub4dc\uc785\ub2c8\ub2e4. \uc774 \ud30c\uc77c\uc758 \ucf54\ub4dc\ub97c \uae30\ub2a5 \ubcc4\ub85c \uc5b8\uae09\ud569\ub2c8\ub2e4.<\/p>\n
\uba3c\uc800 \ubaa8\ub378 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4.<\/p>\n
\r\nimport { AccumulativeShadows, Center, Environment, GizmoHelper, GizmoViewcube, GizmoViewport, Grid, OrbitControls, RandomizedLight, Stats, StatsGl, useGLTF } from \"@react-three\/drei\"\r\nimport { useControls } from \"leva\"\r\nimport { memo } from \"react\"\r\n\r\nfunction Robot(props) {\r\n  const { nodes } = useGLTF('.\/models\/model.glb')\r\n\r\n  nodes.Scene.traverse(obj => {\r\n    obj.castShadow = true\r\n    obj.receiveShadow = true\r\n  })\r\n\r\n  console.log(nodes)\r\n  return (\r\n    <primitive object={nodes.Scene} {...props} \/>\r\n  )\r\n}\r\n<\/pre>\n
\ub2e4\uc74c\uc740 \uadf8\ub9bc\uc790 \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. memo \uace0\ucc28 \ucef4\ud3ec\ub10c\ud2b8\ub97c \uc0ac\uc6a9\ud588\ub294\ub370 \uadf8\ub9bc\uc790\uc77c \uacbd\uc6b0 \uc774\ub807\uac8c \ucc98\ub9ac\ud558\uba74 \uc7a5\uc810\uc774 \uc788\ub2e4\uace0 \ud558\ub124\uc694.<\/p>\n
\r\nconst Shadows = memo(() => (\r\n  <AccumulativeShadows temporal frames={100} color=\"#000000\" colorBlend={0.5} alphaTest={0.9} scale={20}>\r\n    <RandomizedLight amount={8} radius={4} position={[5, 5, -10]} \/>\r\n  <\/AccumulativeShadows>\r\n))\r\n<\/pre>\n
\uc774 \uae00\uc758 \uc8fc\uc778\uacf5\uc778 Grid \ucef4\ud3ec\ub10c\ud2b8\uc785\ub2c8\ub2e4. \uc774 \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc18d\uc131\uc744 UI\ub85c \uc124\uc815\ud558\uae30 \uc704\ud574\uc11c useControls\ub97c \uc0ac\uc6a9\ud588\uc2b5\ub2c8\ub2e4.<\/p>\n
\r\nfunction MyGrid() {\r\n  const { gridSize, ...gridConfig } = useControls({\r\n    gridSize: [10.5, 10.5],\r\n    cellSize: { value: 0.6, min: 0, max: 10, step: 0.1 },\r\n    cellThickness: { value: 1, min: 0, max: 5, step: 0.1 },\r\n    cellColor: '#6f6f6f',\r\n    sectionSize: { value: 3.3, min: 0, max: 10, step: 0.1 },\r\n    sectionThickness: { value: 1.5, min: 0, max: 5, step: 0.1 },\r\n    sectionColor: '#9d4b4b',\r\n    fadeDistance: { value: 25, min: 0, max: 100, step: 1 },\r\n    fadeStrength: { value: 1, min: 0, max: 1, step: 0.1 },\r\n    followCamera: false,\r\n    infiniteGrid: true\r\n  })\r\n\r\n  return (\r\n    <Grid args={gridSize} position={[0, -0.01, 0]} {...gridConfig} \/>\r\n  )\r\n}\r\n<\/pre>\n
\uc704\uc5d0\uc11c \uc815\uc758\ub41c \ucef4\ud3ec\ub10c\ud2b8\ub4e4\uc744 \uc0ac\uc6a9\ud55c \uc2e4\uc81c MyElement3D\uc785\ub2c8\ub2e4. \ub9ac\uc5d1\ud2b8\uc758 \uc88b\uc740 \ucf54\ub529 \uc2b5\uad00\uc740 \ub9d0\ub2e8 \ucef4\ud3ec\ub10c\ud2b8\ub294 \ucd5c\ub300\ud55c JSX \ucf54\ub4dc\ub9cc\uc744 \ubc18\ud658\ud558\ub294 \uac83\uc73c\ub85c \uc791\uc131\ud558\ub294 \uac83\uc785\ub2c8\ub2e4. \uadf8\ub7ec\uba74 \ucf54\ub4dc \uac00\ub3c5\uc131\uc774 \ub192\uc544\uc9c0\uace0 \ucef4\ud3ec\ub10c\ud2b8 \ubd84\ub9ac\uac00 \ud6a8\uacfc\uc801\uc73c\ub85c \ub429\ub2c8\ub2e4.<\/p>\n
\r\nfunction MyElement3D() {\r\n  return (\r\n    <>\r\n      {\/* <Stats \/> *\/}\r\n      <StatsGl \/>\r\n\r\n      <OrbitControls makeDefault \/>\r\n      <Environment preset=\"city\" \/>\r\n      \r\n      {\/* <Center top>\r\n        <Suzi rotation={[-0.63, 0, 0]} scale={2} \/>\r\n      <\/Center> *\/}\r\n      \r\n      <Center>\r\n        <Robot scale={2} \/>\r\n      <\/Center>\r\n\r\n      <MyGrid \/>\r\n\r\n      <GizmoHelper alignment=\"bottom-right\" margin={[80, 80]}>\r\n        <GizmoViewcube \/>\r\n        {\/* <GizmoViewport axisColors={['#9d4b4b', '#2f7f4f', '#3b5b9d']} labelColor=\"white\" \/> *\/}\r\n      <\/GizmoHelper>\r\n      \r\n      <Shadows \/>\r\n    <\/>\r\n  )\r\n}\r\n\r\nexport default MyElement3D\r\n<\/pre>\n
\uc774 \ucf54\ub4dc\ub294 \ucd94\ud6c4 \uc81c \uc720\ud29c\ube0c \ucc44\ub110<\/a>\uc744 \ud1b5\ud574 \uc601\uc0c1\uc73c\ub85c \uc18c\uac1c\ub420 \uc608\uc815\uc785\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
Drei \ucef4\ud3ec\ub10c\ud2b8\ub294 R3F\uc5d0\uc11c \uc0ac\uc6a9\ud560 \uc218 \uc788\ub294 \ub9e4\uc6b0 \uc720\uc6a9\ud55c \ucef4\ud3ec\ub10c\ud2b8\uc758 \uc9d1\ud569\uc785\ub2c8\ub2e4. \uadf8 \uc911 Grid \ucef4\ud3ec\ub10c\ud2b8\uc5d0 \ub300\ud55c \uc0ac\uc6a9\uc778\ub370 Grid \uc774\uc678\uc758 Drei \ucef4\ud3ec\ub10c\ud2b8\ub3c4 \uc0ac\uc6a9\ub418\uace0 \uc788\uc2b5\ub2c8\ub2e4. \uc608\ub97c \ub4e4\uc5b4 StatsGl, Center, Grid, GizmoHelper, GizmoViewcube, GizmoViewport \uc785\ub2c8\ub2e4. \uba3c\uc800 \uacb0\uacfc\ub294 \ub2e4\uc74c\uacfc \uac19\uc2b5\ub2c8\ub2e4. \uc704\uc758 \uacb0\uacfc\uc5d0 \ub300\ud55c \ucf54\ub4dc\ub97c \ud558\ub098\uc529 \uc0b4\ud3b4\ubcf4\uba74, \uba3c\uc800 App.jsx \uc785\ub2c8\ub2e4. import ‘.\/App.css’ import { Canvas } from ‘@react-three\/fiber’ import MyElement3D from … <\/p>\n
\ub354 \ubcf4\uae30 “Drei \ucef4\ud3ec\ub10c\ud2b8 : Grid”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[145],"tags":[],"class_list":["post-14088","post","type-post","status-publish","format-standard","hentry","category-three-js"],"_links":{"self":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14088","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=14088"}],"version-history":[{"count":10,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14088\/revisions"}],"predecessor-version":[{"id":14100,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/14088\/revisions\/14100"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=14088"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=14088"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=14088"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}