[개발일지] R3F를 활용한 3D 포트폴리오 사이트 만들기 3

💡 시작하기

저번 개발일지에서 어떻게 하면 이미지를 객체에 매핑했을 때, 어둡지 않게 표현할 수 있을까? 하며 더 공부해봐야겠다고 했는데…

음….결론적으로는 찾지 못했다.. 그냥 R3F로 예쁜 배경을 표현하고 나머지는 기존 컴포넌트를 사용하기로 하였다 😭

⚙️ R3F로 만든 배경 고정시키기

<Canvas 
  camera={{ position: [0, -10, 10], fov: 90 }}
  style={{ 
    position: 'fixed', 
    top: 0, 
    left: 0, 
    width: '100%', 
    height: '100vh', 
    zIndex: -1 
  }}  
>

style을 적용해서 마우스로 배경을 움직이지 못하도록 설정해주었다.

요렇게~! 진짜 왕이쁘다 ㅎㅅㅎ

🖥️ 스크롤 내릴 때마다 컴포넌트 뜨게 구현하기

다양한 포트폴리오 페이지를 찾아봤는데, 일정 스크롤을 내리면 프로필, 프로젝트, 수상내역 등 컴포넌트가 하나하나씩 등장하는 게 매력적이라 이를 구현해보기로 결정했다.

 

우선 프로필부터 후딱 만들었다.

 

 

// App.jsx
function App() {
  const [scrollY, setScrollY] = useState(0);

  // 스크롤 이벤트 감지
  useEffect(() => {
    const handleScroll = () => {
      setScrollY(window.scrollY);
    };
    window.addEventListener("scroll", handleScroll);
    return () => window.removeEventListener("scroll", handleScroll);
  }, []);

  return (
    <>
      <GlobalStyle />
      <S.Container>
        {/* Canvas는 고정된 배경으로 설정 */}
        <Canvas 
          camera={{ position: [0, -10, 10], fov: 90 }}
          style={{ 
            position: 'fixed', 
            top: 0, 
            left: 0, 
            width: '100%', 
            height: '100vh', 
            zIndex: -1 
          }}  
        >
          <SkyComponent scrollY={scrollY} />
          <ambientLight intensity={Math.PI / 1.5} />
          <spotLight position={[0, 40, 0]} decay={0} distance={45} penumbra={1} intensity={100} />
          <spotLight position={[-20, 0, 10]} color="red" angle={0.15} decay={0} penumbra={-1} intensity={30} />
          <spotLight position={[20, -10, 10]} color="red" angle={0.2} decay={0} penumbra={-1} intensity={20} />
          <CameraControls minDistance={150} maxDistance={150} />
        </Canvas>
        
        <Title />
        <Profile scrollY={scrollY} />
        <Test scrollY={scrollY} />
      </S.Container>
    </>
  );
}

// Title.jsx
import * as S from './Title.style'

export default function Title() {
  return (
    <S.Container>
      <h1>Welcome to My Portfolio ☁️🌸</h1>
    </S.Container>
  )
}

// profile.jsx
function Profile({ scrollY }) {
  const visible = scrollY > 100;

  return (
	  ...
  )
}

// Test.jsx - 임시로 만들어둔 컴포넌트
function Test({scrollY}) {
  const visible = scrollY > 1000;

  return (
	  ...
  )
}