React\ub294 \uc120\uc5b8\ud615 \ud504\ub85c\uadf8\ub798\ubc0d\uc744 \uc9c0\ud5a5\ud569\ub2c8\ub2e4. \uc5b4\ub5a4 \uc2dc\uac01\uc801\uc778 \uc694\uc18c\ub97c \uc790\uc2dd\uc73c\ub85c \uc120\uc5b8\ud574\uc11c \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0 \ud45c\uc2dc\ud558\ub294\ub370\uc694. \uc5b4\ub5a4 \uc694\uc18c\ub97c \ucc38\uc870\ud558\uae30 \uc704\ud574 useRef \ud6c5\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uadf8\ub7f0\ub370 \ucc98\uc74c \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9c8\uc6b4\ud2b8 \ub420\ub54c useRef\ub85c \ucc38\uc870\ud558\uace0\uc790 \ud558\ub294 \uc694\uc18c\uac00 \uc544\uc9c1 \ucc38\uc870\ub418\uc9c0 \uc54a\uc744 \ub54c\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7f4 \ub54c useRef\ub85c \uc5b4\ub5a4 \uc694\uc18c\uac00 \uc81c\ub300\ub85c \ucc38\uc870\ub420 \ub54c \ub2e4\uc2dc \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud574 \uc904 \ud544\uc694\uac00 \uc788\ub294\ub370\uc694.<\/p>\n
\r\nimport { OrbitControls } from \"@react-three\/drei\"\r\nimport { useRef, useState } from \"react\";\r\nimport * as THREE from \"three\"\r\n\r\nfunction Outline(props) {\r\n const material = useMemo(\r\n () => new THREE.LineBasicMaterial({ color: 0xffff00 }),\r\n []\r\n ) \r\n\r\n return <lineSegments \r\n geometry={props.geometry} \r\n material={material}\r\n \/>\r\n}\r\n\r\nfunction MyElement3D() {\r\n const refMesh = useRef()\r\n const [, setRefAllocated ] = useState(false)\r\n\r\n return (\r\n <>\r\n <OrbitControls \/>\r\n\r\n <ambientLight intensity={0.1} \/>\r\n <directionalLight position={[2, 1, 3]} intensity={0.5} \/>\r\n\r\n <mesh \r\n ref={self => { refMesh.current = self; setRefAllocated(true) }}\r\n position={[-1.2, 0, 0]}>\r\n <boxGeometry args={[1,1,1,10,10,10]} \/>\r\n <meshStandardMaterial color=\"#8e44ad\" \/>\r\n <Outline geometry={refMesh.current?.geometry} \/>\r\n <\/mesh>\r\n <\/>\r\n )\r\n}\r\n\r\nexport default MyElement3D\r\n<\/pre>\n\uc0c1\uad00\uc5c6\ub294 \ucf54\ub4dc\uac00 90%\uace0 \uc774 \uae00\uacfc \uad00\ub828\ub41c \ucf54\ub4dc\uac00 10%\uc778\ub370\uc694. 14\ubc88\uc5d0 useRef\uc5d0 \ub300\ud55c refMesh\uac00 \uc788\uace0, refMesh\uac00 \ucc38\uc870\ud558\ub294 \uac83\uc774 25\ubc88 \ucf54\ub4dc\uc5d0 \ubcf4\uc785\ub2c8\ub2e4. \uadf8\ub7f0\ub370 ref\uc5d0 \ub300\ud55c \uc9c0\uc815\uc744 \ud568\uc218\ub85c \uc9c0\uc815\ud558\uace0 \uc788\ub2e4\ub294 \uc810\uc785\ub2c8\ub2e4. refMesh\uc5d0 \uc694\uc18c\uac00 \ucc38\uc870\ub418\uba74 15\ubc88 \ucf54\ub4dc\uc5d0\uc11c \ub9cc\ub4e4\uc5b4 \ub454 \uc0c1\ud0dc \ubcc0\uacbd \ud568\uc218\ub97c \ud638\ucd9c\ud558\ub294\ub370\uc694. React\uc5d0\uc11c \uc0c1\ud0dc \ubcc0\uacbd\uc740 \ucef4\ud3ec\ub10c\ud2b8 \ud568\uc218\uc758 \uc7ac\uc2e4\ud589\uc744 \uc758\ubbf8\ud558\ubbc0\ub85c refMesh\uc5d0 \uc5b4\ub5a4 \uc694\uc18c\uac00 \ud560\ub2f9\ub418\uba74 \ub2e4\uc2dc \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud558\ub3c4\ub85d \uc720\ub3c4\ud569\ub2c8\ub2e4.<\/p>\n","protected":false},"excerpt":{"rendered":"
React\ub294 \uc120\uc5b8\ud615 \ud504\ub85c\uadf8\ub798\ubc0d\uc744 \uc9c0\ud5a5\ud569\ub2c8\ub2e4. \uc5b4\ub5a4 \uc2dc\uac01\uc801\uc778 \uc694\uc18c\ub97c \uc790\uc2dd\uc73c\ub85c \uc120\uc5b8\ud574\uc11c \uc6f9\ube0c\ub77c\uc6b0\uc800\uc5d0 \ud45c\uc2dc\ud558\ub294\ub370\uc694. \uc5b4\ub5a4 \uc694\uc18c\ub97c \ucc38\uc870\ud558\uae30 \uc704\ud574 useRef \ud6c5\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4. \uadf8\ub7f0\ub370 \ucc98\uc74c \ucef4\ud3ec\ub10c\ud2b8\uac00 \ub9c8\uc6b4\ud2b8 \ub420\ub54c useRef\ub85c \ucc38\uc870\ud558\uace0\uc790 \ud558\ub294 \uc694\uc18c\uac00 \uc544\uc9c1 \ucc38\uc870\ub418\uc9c0 \uc54a\uc744 \ub54c\uac00 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ub7f4 \ub54c useRef\ub85c \uc5b4\ub5a4 \uc694\uc18c\uac00 \uc81c\ub300\ub85c \ucc38\uc870\ub420 \ub54c \ub2e4\uc2dc \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub80c\ub354\ub9c1\ud574 \uc904 \ud544\uc694\uac00 \uc788\ub294\ub370\uc694. import { OrbitControls } from “@react-three\/drei” import { useRef, … <\/p>\n