# react-three-fiber
앗! threejs와 React로 취업에 도움되는(?) 포트폴리오를 만들어보자. [실전편 1탄]
오늘은 드디어 orthographic camera를 이용한 포트폴리오의 간단한 세팅을 통해 threejs와 한 층 더 친숙해지는 시간을 가져볼 생각이다.바로 코딩에 착수하는 것이 아니라, 기본적으로 어떠한 구조로 만들 것인지, 또한 중요하게 공부할 만한 포인트는 어떤
앗! threejs와 React로 취업에 도움되는(?) 포트폴리오를 만들어보자. [실전편 intro]
완성된 페이지는 대략 아래와 같은 모습이 될 것이다.포트폴리오 페이지아무튼간 위의 라이브러리와 기술들과 함께 재밌게 구현해 볼 예정이다.!
React-three-fiber geometry
모델의 구조와 모양을 정의하는 객체인데 쉽게 말하면도형입니다.기존의 geometry과 달리 정점(vertices)를 배열 형태로 저장하여 buffer형식으로 정의합니다. 쉽게 말하면일반 geometry보다 이거 쓰시면 됩니다.three.js 에는 수많은 geometry
React-three-fiber 빛
R3F에서는 크게 4종류의 빛을 사용합니다. 각각의 역할과 특징들을 알아보겠습니다.AmbientLight는 다른 조명과 달리 방향성이 없으며, scene 전체에 균일하게 적용됩니다. 즉 그림자가 생기지않습니다.intensity로 빛의 세기를 조절하고 color로 빛의
React-three-fiber
React-three-fiber(R3F)는 React를 사용하여 Three.js 라이브러리를 사용할 수 있게 해주는 라이브러리입니다. 당연하겠지만 R3F를 사용하기위해서 react 문법과 기초적인 three.js 문법을 알아야합니다. R3F는 npm으로 다운로드 받을
react 에서의 three js
TOC 1.Three.js 2.React에서의 Three.js 1. Three.js Three.js 자체는 제작된지 꽤나 많은 시간이 지난 js 3d modeling 라이브러리이다. Three.js 공식 홈페이지에서 한글 설명을 어느정도 지원하고 있기 때문에