코드로 대화하기

안녕하세요 오늘은 @react-three/fiber의 useFrame을 사용하여 geometry에 애니메이션을 추가해 보겠습니다. 애니메이션 Vanila JS에서는 requestAnimationFrame을 사용했지만 react에서는 useFrame을 사용합니다. y 축으로 계속 회전하는 애니메이션입니다. import { useFrame } from '@react-three/fiber'; import React, { useRef } from 'react'; const ReactModel = (props) => { const modelRef = useRef(); useFrame(() => { modelRef.current.rotation.y += 0.01; }) return( ) }; export defau..

안녕하세요! 오늘은 threejs를 다뤄보겠습니다. 포폴과 가볍게 취미 생활용으로 만들 예정이라 다른 글들에 비해 가볍습니다! three.js 관련 글을 쓸 때가 부담 없고 가장 재밌는것 같습니다 :) 이전 글에서 씬과 오브젝트를 만들었는데요. 아마 이 상태일겁니다. 이제 빛, 컨트롤러, 그림자를 추가해보겠습니다. Light 빛이 있어야 도형의 색을 볼 수 있고 그림자도 볼 수 있습니다. 저는 Canvas 안에 LightController라는 컴포넌트를 추가 후 light 관련 코드들을 다 넣었습니다. . . . // lightController.jsx import React from 'react'; const LightController = (props) => ( ); export default Lig..

안녕하세요! 오늘은 제가 가장 좋아하는 threejs를 다뤄보겠습니다. three.js로는 포폴과 가볍게 취미 생활용으로 만들 예정이라 다른 글들에 비해 가볍습니다! 단순히 제가 재밌어서 만드는 용도라.. ㅎㅎ 대학교 때 과제와 졸업작품으로 많이 활용했었는데요. 그때는 Vanila JS로 했다면 이제는 React로 진행하겠습니다. 며칠 해보면서 느낀 것을 react로 할 때가 훨씬 간단하다고 느꼈습니다. 바닐라로 했을때는 모든 세팅을 일일이 다해주어야 하지만 리액트에서는 코드 몇 줄만 치면 해결되었습니다. 하지만 react three 관련 자료가 많이 안 나와있고 예전 버전의 코드들이 구글에 올라와져있어 힘든 점이 있습니다 ㅜㅜ 우선 제 목표는 이렇습니다! 1. 중간에 3D 오브젝트가 있고, wasd로 ..