[RTF] 3. 카메라 설정하기 Camera & Orbit Control

이 페이지는 youtube에서 Devving It With Sohail 님의 영상을 보고 정리한 글입니다.

Three js, React Three Fiber, React Three Drei Tutorial 2022 | Part 1 | Getting started

Hey there! 🙋 This series is meant to get you started with React-Three-Fiber and React-Three-Drei EVEN if you don't have any prior experience with Three.js. I'll be explaining to you Three.js concepts as we go over implementing these with React.js. The next parts will keep on coming one day after the other. 👨‍💻 Source code: https://github.com/captain-woof/threejs-tutorial-2022 ------------------------------------------- DOCUMENTATIONS 📖 Three.js: https://threejs.org/docs/ 📖 React-Three/Fiber: https://docs.pmnd.rs/react-three-fiber/getting-started/introduction ------------------------------------------- 👋 DROP ME A LINE Twitter: https://twitter.com/realCaptainWoof Github: https://github.com/captain-woof Linkedin: https://linkedin.com/in/sohail-saha

https://www.youtube.com/watch?v=y5CAuAZ7kKM&list=PLIRTsuB0iPJvxaYyg8MOrjffPPcYnccL0&index=1

1. Orbit Control?

Orbit Control을 사용하면 드래그 한 후에 360도로 화면을 회전할 수 있다.

각도에는 두가지 종류가 있다.

azimuth angle(방위각, 좌우로 움직이는 각도)polar angle (상하로 움직이는 각도)

import React from 'react'

import { OrbitControls, PerspectiveCamera } from '@react-three/drei'

import { angleToRadians } from '@/utills/angle'

function Three() {
  return (
    <>
      <PerspectiveCamera makeDefault position={[0, 1, 5]} />
      <OrbitControls />
   ...

Perspective Camera 는 최초 camera 시점을 지정한다. 이후 Orbit Controls를 이용하면 단순하게 카메라를 움직이는 것이 아니라, 계산한 이후에 mesh를 추적한 위치를 계산해서 camera 위치를 바꿔준다.

2. 마우스 위치에 따라 시점(camera) 이동시켜보기

Orbit Control을 이용하면 드래그해서 화면을 이동시켜야 한다. 그냥 마우스 위치에 따라서 Mesh를 회전하는 코드를 구현해 본다.

1. UseFrame

React 에서 Hook을 쓰는 것처럼 1프레임마다 콜백함수를 실행시킨다.

1초에 60회 콜백함수를 실행시킨다고 생각하면 된다.

2. UseRef

Mesh, Orbit Control등의 속성을 수정하고 싶을 때에는 React에 있는 UseRef Hook을 이용해서 사용하면 된다.

TypeScript를 사용한다면 타입 지정해주는 것 잊지말자

3. MinAngle, MaxAngle

Orbit Controls에 있는 MinAngle, MaxAngle 속성으로 마우스를 조정했을 때 볼 수 있는 최소, 최대 각도를 설정할 수 있다.

3. 최종코드

import React, { useEffect, useRef } from 'react'

import { OrbitControls, PerspectiveCamera } from '@react-three/drei'

import { useFrame } from '@react-three/fiber'
import * as THREE from 'three'

import type { OrbitControls as OrbitControlsImpl } from 'three-stdlib'

import { angleToRadians } from '@/utills/angle'

function Three() {
  const orbitControlRef = useRef<OrbitControlsImpl>(null)
  useFrame((state) => {
    if (orbitControlRef.current) {
      const { x, y } = state.mouse
      orbitControlRef.current.setAzimuthalAngle(-x * angleToRadians(45))
      orbitControlRef.current.setPolarAngle(y + 0.5 + angleToRadians(90 - 60))
      orbitControlRef.current.update()
    }
  })
  useEffect(() => {
    if (orbitControlRef.current) {
      console.log(orbitControlRef.current)
    }
  }, [orbitControlRef.current])
  return (
    <>
      <PerspectiveCamera makeDefault position={[0, 1, 5]} />
      <OrbitControls
        ref={orbitControlRef}
        maxPolarAngle={angleToRadians(80)}
        minPolarAngle={angleToRadians(40)}
      />
      {/* circle */}
      <mesh position={[0, 0.5, 0]}>
        <sphereGeometry args={[0.5, 32, 32]} />
        <meshStandardMaterial color="#E0DA46" />
      </mesh>

      {/* floor */}
      <mesh rotation={[-angleToRadians(90), 0, 0]}>
        <planeGeometry args={[7, 7]} />
        <meshStandardMaterial color="#60FC4E" />
      </mesh>
      <ambientLight args={['#ffffff', 1]} />
    </>
  )
}

export default Three

Uploaded by N2T