Web6 [1] 기분 좋은 날 어제는 우중충한 날씨에 비도 내려서, 집에만 콕 박혀 있었더니 온몸이 다 쑤셨는데 비가 그치고 나니 해도 쨍쨍하고 날씨도 선선하니 기분이 너무 좋았다. 오늘 날씨와 기분을 자바스크립트를 통해 반영해보자. 문제 index.html ⛈️ 😞 index.js 의 파일을 수정하여 ⛈️ 를 ☀️로, 😞를 😊로 바꾸어보아요! 주의 ) HTML 코드를 수정하시면 안됩니다! 공부할 자료 [1] DOM 트리 [2] DOM 탐색하기 [3] getElement*, querySelector*로 요소 검색하기 2020. 11. 15. [4] Three.js - Material Material은 Object의 피부같은 것으로, Geometry가 투명한지, Metallic한지 "피부"같은 것을 결정한다. 다양한 Material이 있는데, 대표적으로 다음과 같다. MeshBasicMaterial -> 단순한 색깔 및 와이어프레임을 부여 MeshDepthMaterial -> 카메라와의 거리를 이용해 색상을 결정한다 MeshNormalMaterial -> Normal Vector 방향을 색상으로 표현함. 해당 지점의 법선 벡터가 가르키는 방향에 대해 색상이 변경된다. MeshFaceMaterial -> 사용자가 개별 Face에 대해 독립적인 material을 지정할 수 있음 MeshLambertMaterial -> Vertice에서 lighting을 계산하여 Shiny 하지 않음 Me.. 2020. 9. 28. [3] Three.js - Scene, Light Sources 이전 시작 단계에서 간단한 튜토리얼을 통해 Three.js 를 어떻게 사용하는지 알아보는데요 이번 단계에서는 Three.js 의 Scene을 구성하는데 사용되는 Object와 역할 three.Scene Object의 역할 geometric과 mesh와의 관계 orthographic camera와 perspective camera의 차이 를 알아보겠습니다. Scene api 화면에 무언가를 보여주려면 다음 3가지 요소가 필요합니다. - Camera -> 화면에 어떤 요소가 렌더링되는지를 결정 - Lights -> 물체가 어떻게 보이고, 그림자를 어떻게 생성하는지를 결정 - Objects -> Camera에 비춰지는 물체들 Scene 객체는 이런 서로 다른 요소들을 담는 역할을 합니다. Scene에 추가된 .. 2020. 9. 23. [2] Three.js - 시작하기 Three.js 는 자바스크립트 3d 라이브러리로 많은 곳에서 사용되고 있습니다. 다양한 라이브러리가 있지만, Three js를 사용하는건 아무래도 커뮤니티가 크고 TypeScript 지원이 잘 된다는 것이 그 이유입니다. Three.js 엔 여러 장점이 있는데 우선 대부분의 브라우저에서 동작하고 3d 를 구현하기 위해 개별 플러그인이 필요하지 않습니다. 무엇보다 가장 큰 장점은 WebGL을 몰라도 쉽게 사용할 수 있다는 큰 장점이 있습니다. WebGL은 일반 캔버스와는 달리 GPU 자원을 사용할 수 있어 성능상의 이점을 보입니다. 저는 간단한 웹팩 설정으로 ts를 이용하여 로컬에서 작업하였습니다. 설정 방식은 이 글을 참고하시면 좋을 것 같습니다. 설정하기 위 웹팩 설정을 완료했다면, 프로젝트의 구조는.. 2020. 9. 22. 이전 1 2 다음
