threejs (4) 썸네일형 리스트형 threejs 스터디 5주차) 두근두근 메탈릭 하트 어느새 threejs 이론 편 마지막 주차이다. 이번 주차는 그림자, 안개, 렌더타겟, 사용자 지정 BufferGeometry를 다뤄야 했지만, BufferGeometry 편에서 약간 응용 편 같이 구현된 예시가 너무 마음에 들어서 비슷한 걸 만들어보고 그 경험을 공유하는 식으로 스터디를 준비해 보았다. 예시에서는 구체를 가로방향으로 24조각, 세로방향으로 16조각 낸다고 했을 때의 꼭짓점의 위치 값을 직접 계산해서 BufferGeometry를 만든다. 이후 시간의 흐름에 따라 BufferGeometry의 모든 꼭짓점들을 일정하게 움직이도록 만든다.홀린 듯이 예시를 보다가, 하트가 박동하며 산산조각 났다가 다시 합쳐지면 예쁘겠단 생각이 들어 구현해 보기로 했다.// 예시코드 https://threejs... three.js 스터디 2주차) Primitives primitives 란 실행 시 인자들을 받아 생성되는 3D Geometry이다. 1주 차 때의 BoxGeometry 도 Primitives이다. 공식문서의 튜토리얼에선 다양한 Primitives 들을 확인해 볼 수 있다. 2주 차는 Primitives, 조명(PointLight, AmbientLight)과 재질(MeshBasicMaterial, MeshPhongMaterial)을 연습해보도록 되어있다. 프로젝트로 제품 쇼케이스 같은 걸 구현하고 싶었는 데, 마침 주제가 비슷하게 구현하기 적절한 것 같아, 조촐한 Primitives 전시회(?)를 구성해 보았다.계획Primitives 중에 하트 모양(ExtrudeGeometry), 도넛 모양(TorusGeometry), 글자모양(TextGeometry).. three.js 스터디 1주차) Hello Cube! 기본 개념저 예시 로봇을 Three.js로 구현하기 위해선저 로봇의 형태를 구성하는 기하학 객체(구, 정육면체, 반구 등)의 정점 데이터들이 Geometry이다. 원시모델(Primitives), 직접 생성하기(세상에), obj 파일 등으로 불러오기 등으로 Geometry 객체를 생성할 수 있다.로봇은 노랗고 무광인데, 이런 색깔과 밝기 등 기하학 객체의 표면의 속성이 Material 이다. 이때 단순히 색깔을 지정하는 대신 이미지를 불러와서 표면에 이미지를 매핑해 줄 수 있는 데, 이때 이미지를 Texture라고 한다.그리고 저 로봇은 어떤 Material로 어떤 Geometry를 그리는 객체인 Mesh 여러 개로 구성되었다. 에스파는 둘이 될 수 없는 것처럼, 로봇을 하나 더 만들어야 한다면 Mesh.. three.js 스터디를 시작하며 글또에서 6개월간 three.js 스터디를 하게 되었다.사실 프론트 작업자들 중 많은 사람들이 다들 three.js를 한 번쯤은 들어보고 간지 난다고 생각했을 거 같다. 나도 그 중 하나였는데, 개인적으로 기술 스택을 늘릴 수 있는 좋은 기회라고 생각해 참여하게 되었다.마침 큰 작업이 끝났고, 본격적으로 외주 작업을 시작하기 전에 이력을 추가하고 싶다고 생각했기 때문에 시기적으로도 잘 맞은 셈이다.스터디를 시작하기 전에 어떤 식으로 내가 스터디를 참여할 것인지 등을 정리하면 좋을 것 같아 이 글을 작성한다.three.js 란?웹페이지에 3D 객체를 쉽게 렌더링 하도록 도와주는 자바스크립트 3D 라이브러리이다. 3D 객체를 렌더링하는 데 WebGL을 사용하는 데, 직접 구현한다면 작성해야 하는 수많은 코드.. 이전 1 다음
