# three
앗! threejs와 React로 취업에 도움되는(?) 포트폴리오를 만들어보자. [실전편 1탄]
오늘은 드디어 orthographic camera를 이용한 포트폴리오의 간단한 세팅을 통해 threejs와 한 층 더 친숙해지는 시간을 가져볼 생각이다.바로 코딩에 착수하는 것이 아니라, 기본적으로 어떠한 구조로 만들 것인지, 또한 중요하게 공부할 만한 포인트는 어떤
앗! threejs와 React로 취업에 도움되는(?) 포트폴리오를 만들어보자. [실전편 intro]
완성된 페이지는 대략 아래와 같은 모습이 될 것이다.포트폴리오 페이지아무튼간 위의 라이브러리와 기술들과 함께 재밌게 구현해 볼 예정이다.!
앗! 취업에 도움되는(?)Threejs를 vanila 및 react-three-fiber 버전의 예제와 함께 복습해보자. [코드편 3탄]
코드편 3탄에서는 light(조명), shadow(그림자), material의 빛과 관련된 속성에 대해서 알아보도록 하겠다. 이번에도 역시, 같은 코드를 vanila javascript와 react 두 가지 방식으로 모두 작성해보겠다. vanila javascrip
앗! 취업에 도움되는(?)Threejs를 vanila 및 react-three-fiber 버전의 예제와 함께 복습해보자. [코드편 2탄]
코드편 2탄은 여기서 마무리하고 3탄에서 계속 공부해보자!
앗! 취업에 도움되는(?)Threejs를 vanila 및 react-three-fiber 버전의 예제와 함께 복습해보자. [코드편 1탄]
Threejs를 Vanila Javascript와 React 두 가지 방식으로 모두 실습해보며 기본적인 내용을 학습할 수 있다.
앗! 취업에 도움되는(?)Threejs를 복습해보자. [개념편 3탄](마지막탄)
앞선 2탄에서는 1탄에 이어, 조금은 고급화된 촬영 기술에 대하여 공부했다. 3탄에서는, 나무 블럭 말고도 다양한 형태의 촬영 객체에 대해 알아보고, 움직이는 객체에 대한 촬영기법에 대해서도 알아보겠다. 7가지(scene, camera, renderer, mesh,
앗! 취업에 도움되는(?)Threejs를 복습해보자. [개념편 2탄]
눈 앞에 있는 키보드를 사진찍는다고 했을 때, 사진 속에 예쁘게 담기게 하려면 키보드와 '적절한 거리' 를 유지해야 할 것이며, 너무 과하지 않은 '각도(시야각)'으로 촬영해야 할 것 이다. 또한, 핸드폰을 가로로 들고 찍느냐, 세로로 들고 찍느냐에 따라서도, 가로
앗! 취업에 도움되는(?)Threejs를 복습해보자. [개념편 1탄]
정확한 설명은 자바스크립트 언어로 구현된 WebGL(Web Graphcis Library)이다.threejs가 궁금하다면, 하단의 링크를 눌러 공식문서를 다녀와 보도록하자.<a href='https://threejs.org/docs/index.htmlsc
threejs(4)
카메라가 대상 주위를 선회할 수 있음마우스로 카메라를 돌리면서 대상 여기저기 살필 수 있음, 확대 축소도 가능BoxGeometry(https://threejs.org/docs/?q=box- 공식 문서의 각 Geometry 별 설명 페이지에 가보면 예시 화면에C
threejs(3)
이번엔\~~ transform 학습3D 벡터를 나타내는 클래스 3D 공간의 한 점 (x, y, z 값을 갖는다.)Scene Graph 를 이용하여 그룹화하기Mesh 들을 그룹화 함 (예를들어 로봇의 몸+팔+다리 를 하나로~)태양계자세히 보면 각각 자기가 돌면서 + 그룹
three.js (1)
👼동료👼분이 강의를 공유해주셔서 inflearn three.js로 시작하는 3D 인터랙티브 웹 을 수강할 수 있게되었다. Threejs 란? 기본 개념 예제를 위한 환경 구성 강의에선 사용하지 않지만 그냥 내가 편해서 eslint, prettier, typesc
Webpack 사용 방법 - Webpack 사용해서 Three.js boilerplate 만들기 03
대략 필요한것들 설치하고 config파일 작성해주었으니 Three.js 용 boilerplate으로 쓸 수 있게 몇가지 설정을 더 해주고 gitgub에 배포해보겠습니다. Dev-server 이용 Dev server 이용해서 개발용 빌드 빠르게 할 수 있도록 설정을 바
Webpack, Bundler 대체 정체가 뭐야? 왜 쓰는거지? - Webpack 사용해서 Three.js boilerplate 만들기 01
이전에 three.js 라이브러리를 이용하기 위해서 처음으로 webpack이라는 도구를 접하게 되었는데 당시에는 모듈, 번들러는 물론이고 자바스크립트도 잘 사용하지 못하는 단계였었다. 그래서 boilerplate를 사용해서 웹팩을 사용했었고 이해하지 못한채로 사용해왔다
