간단한 rotate transform 추가하기 + 리액트 훅/props 사용하기
1. 첫번째와 똑같이 Basic Scene 생성
<Canvas
style={{ width: '100%', height: '50vh', background: 'yellow' }}
camera={{ position: [5, 5, 0] }}
>
{/* Basic Setting */}
<PerspectiveCamera position={[0.0, 4]} />
<CameraControls minPolarAngle={0} maxPolarAngle={Math.PI / 0.5} />
<ambientLight intensity={0.1} />
<directionalLight color='#F5EEC8' position={[0, 1, 0]} />
{/* Object Setting*/}
<mesh>
<boxGeometry args={args} position={pst} />
<meshPhongMaterial color='#687EFF' />
</mesh>
</Canvas>다른 점이 있다면 args, position을 prop으로 전달했다.
2. 훅을 사용해보자
// Mesh Object로 직접 접근하게 함
const ref = useRef();
// 이벤트를 위한 useState
const [hovered, setHovered] = useState(false);
const [clicked, setClicked] = useState(false);
// 애니메이션을 위한 useFrame
useFrame((state, delta) => (ref.current.rotation.x += delta));
원래는 맨 처음 scene처럼 Canvas 안에 카메라, 조명 , object를 다 넣어놓고 실행했다.
그러나
Hooks can only be used within the Canvas component!
에러가 떠서 구글링을 하니 훅은 Canvas 안에서만 실행되어야 한다는 것이었다.
=> Canvas가 모든 걸 감싸야 하는 구조였다.
1) 따라서 깃허브, 스택 오버플로우의 예시를 참고해 최종 컴포넌트를 하나 더 만들어 그 안에 Basic Setting을 한 후 Geometry를 포함시켰다.
2) props 역시 App에서 바로 보냈었는데 최종 컴포넌트에서 전달했다.
import React, { useRef, useState } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { PerspectiveCamera, CameraControls } from '@react-three/drei';
function AddAnimation({ args, pst }) {
// Mesh Object로 직접 접근하게 함
const ref = useRef();
// 이벤트를 위한 useState
const [hovered, setHovered] = useState(false);
const [clicked, setClicked] = useState(false);
// 애니메이션을 위한 useFrame
useFrame((state, delta) => (ref.current.rotation.y += delta));
console.log(hovered);
return (
<>
{/* Object Setting*/}
<mesh
ref={ref}
scale={clicked ? 6 : 4}
style={hovered ? { background: 'aqua' } : { background: 'blue' }}
onClick={(e) => setClicked(!clicked)}
onPointerEnter={(e) => setHovered(true)}
onPointerOut={(e) => setHovered(false)}
>
<boxGeometry args={args} position={pst} />
<meshPhongMaterial color='#687EFF' />
</mesh>
</>
);
}
export default function AddAnimationContainer() {
return (
<div>
<Canvas
style={{ width: '100%', height: '50vh', background: 'yellow' }}
camera={{ position: [0, 5, 0] }}
>
{/* Basic Setting */}
<PerspectiveCamera position={[0.0, 4]} />
<CameraControls minPolarAngle={0} maxPolarAngle={Math.PI / 0.5} />
<ambientLight intensity={0.1} />
<directionalLight color='#F5EEC8' position={[0, 1, 0]} />
{/* import Object Component */}
<AddAnimation args={[4, 4, 4]} pst={[0, 0, 0]} />
</Canvas>
</div>
);
}
이벤트, 애니메이션이 추가된 모습이다. (상단 첫번째 씬과 비교)
그러나, hover Event는 먹지 않는데, 이유를 탐구해봐야겠다.
