3D_JavaScript

이번 글은 다음 강의를 바탕으로 정리한 글입니다.가장 큰 이유는 Toss에서 제공하는 서비스에서 종종 보이는 아래와 같은 3D 애니메이션! 토스 앱을 이용할 때 처음 봤던 건데, 3D 비디오 소스를 위에 얹어서 구현한 건가 하고 신기해했었다.그런데 이번 토스 채용 공고

이번 포스트는 React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발을 수강한 뒤 정리하는 포스트입니다.Three.js를 선택한 이유(https://velog.io/@blcklamb/Three.js-01-%EA%B8%B0%EC%B4%88-%

이번 포스트는 React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발을 수강한 뒤 정리하는 포스트입니다.Scene: 관찰 당하는 객체Camera: Scene을 관찰하는 추상 객체Renderer: Camera가 보는 view이미지 첨부객체를 렌더하기

초기 transformation을 변경하려면 mesh의 position, scale, rotation property를 변경한다.매초마다 변경 시키려면 useFrame을 활용한다.mesh가 위의 property를 가지는 이유는 Object3D를 상속받았기 때문이다.sc

R3F의 조상은 결국 webGL이었거늘...

R3F, Drei, React-Spring을 곁들인