{"id":13479,"date":"2023-03-09T14:35:20","date_gmt":"2023-03-09T05:35:20","guid":{"rendered":"http:\/\/www.gisdeveloper.co.kr\/?p=13479"},"modified":"2023-03-10T06:04:26","modified_gmt":"2023-03-09T21:04:26","slug":"r3f-shadow%ec%9d%98-camera%ec%97%90-%eb%8c%80%ed%95%9c-helper-%ec%b6%94","status":"publish","type":"post","link":"http:\/\/www.gisdeveloper.co.kr\/?p=13479","title":{"rendered":"R3F Shadow\uc758 Camera\uc5d0 \ub300\ud55c Helper \ucd94\uac00"},"content":{"rendered":"<p>three.js\ub294 \ub2e4\uc591\ud55c Helper\ub97c \ud1b5\ud574 \uc2dc\uac01\uc801\uc73c\ub85c \ub514\ubc84\uae45\uc774 \uac00\ub2a5\ud55c\ub370, React three Fiber\uc5d0\uc11c \uc774 Helper\ub97c \uc0ac\uc6a9\ud558\ub294\uac8c \uadf8\ub2e4\uc9c0 \uba85\ud655\ud55c API\ub85c \uac00\ub2a5\ud558\uc9c0 \uc54a\ub2e4. \ub2e4\uc74c\uc740 R3F\uc5d0\uc11c \uadf8\ub9bc\uc790\uc758 \uce74\uba54\ub77c\uc5d0 \ub300\ud55c Helper\ub97c \ucd94\uac00\ud574 \ud45c\uc2dc\ud558\ub294 \ucf54\ub4dc\uc774\ub2e4.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"jsx\">\r\nimport * as THREE from 'three'\r\nimport { OrbitControls } from '@react-three\/drei';\r\nimport { useEffect, useRef } from 'react';\r\nimport { useFrame, useThree } from '@react-three\/fiber';\r\n\r\nexport default function Experience() {\r\n    const lightRef = useRef()\r\n    const shadowCameraRef = useRef()\r\n\r\n    const scene = useThree((state) => state.scene)\r\n\r\n    useEffect(() => {\r\n        shadowCameraRef.current = new THREE.CameraHelper(lightRef.current.shadow.camera)\r\n        scene.add(shadowCameraRef.current)\r\n\r\n        return () => {\r\n            scene.remove(shadowCameraRef.current)\r\n        }\r\n    }, [lightRef.current])\r\n\r\n    useFrame(() => {\r\n        shadowCameraRef.current.update()\r\n    })\r\n\r\n    return &lt;>\r\n        &lt;ambientLight intensity={0.5} \/>\r\n        &lt;directionalLight ref={lightRef} castShadow ... \/>\r\n\r\n        ...\r\n    &lt;\/>\r\n}\r\n<\/pre>\n<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.gisdeveloper.co.kr\/wp-content\/uploads\/2023\/03\/r3f_shadow_helper.png\" alt=\"\" width=\"1617\" height=\"1316\" class=\"alignnone size-full wp-image-13480\" \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>three.js\ub294 \ub2e4\uc591\ud55c Helper\ub97c \ud1b5\ud574 \uc2dc\uac01\uc801\uc73c\ub85c \ub514\ubc84\uae45\uc774 \uac00\ub2a5\ud55c\ub370, React three Fiber\uc5d0\uc11c \uc774 Helper\ub97c \uc0ac\uc6a9\ud558\ub294\uac8c \uadf8\ub2e4\uc9c0 \uba85\ud655\ud55c API\ub85c \uac00\ub2a5\ud558\uc9c0 \uc54a\ub2e4. \ub2e4\uc74c\uc740 R3F\uc5d0\uc11c \uadf8\ub9bc\uc790\uc758 \uce74\uba54\ub77c\uc5d0 \ub300\ud55c Helper\ub97c \ucd94\uac00\ud574 \ud45c\uc2dc\ud558\ub294 \ucf54\ub4dc\uc774\ub2e4. import * as THREE from &#8216;three&#8217; import { OrbitControls } from &#8216;@react-three\/drei&#8217;; import { useEffect, useRef } from &#8216;react&#8217;; import { useFrame, useThree } from &#8216;@react-three\/fiber&#8217;; export default &hellip; <\/p>\n<p class=\"link-more\"><a href=\"http:\/\/www.gisdeveloper.co.kr\/?p=13479\" class=\"more-link\">\ub354 \ubcf4\uae30<span class=\"screen-reader-text\"> &#8220;R3F Shadow\uc758 Camera\uc5d0 \ub300\ud55c Helper \ucd94\uac00&#8221;<\/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-13479","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\/13479","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=13479"}],"version-history":[{"count":8,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/13479\/revisions"}],"predecessor-version":[{"id":13488,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=\/wp\/v2\/posts\/13479\/revisions\/13488"}],"wp:attachment":[{"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=13479"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=13479"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.gisdeveloper.co.kr\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=13479"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}