이전 포스팅에서는 Mesh를 통해 3D를 만들었는데, 3D를 만들었다고 바로 화면에 보여지지 않는다. 화면에 보이게 하려면 무대 (Scene)와 무대를 보여줄 카메라 (Camera)가 필요하다. const scene = new THREE.Scene(); const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000); renderer.render(scene, camera); renderer.render 메소드에 scene, camera를 전달해주면 무대가 완성된다. 위 코드 중 camera에 전달된 값들을 조금 더 알아보자면 순서대로 fov, aspect, near, far 값을 전달해주면 되는..
요즘 새로운 관심 분야가 생겼다. Three.js, WebGL을 통해 Canvas에 그래픽을 렌더링을 할 수 있어 인터랙티브한 웹을 만들 수 있도록 도와주는 기술이다. 국내보다는 해외에서 많이 WebGL 사용한 웹 사이트가 많은데 보면 굉장히 화려하다. HTML,CSS로는 구현이 불가능할 것처럼 느껴질 정도로 화려한데, "도대체 어떻게 저런 웹을 만들지? 나도 한번 해보고 싶다. "라는 생각이 들어 여유가 될 때 꼭 학습해봐야지 마음 다짐을 한 분야다. Three.js는 웹 페이지에 3D 객체를 쉽게 표현할 수 있도록 도와주는 자바스크립트 라이브러리다. 만약 Three.js 없이 WebGL로 3D를 개발해야 한다면 엄청나게 고생해야 하지 않나 싶다. 3D 객체는 점,선, 꼭지점 등을 이용하여 만들어지는데..
- Total
- Today
- Yesterday
- typescript
- vue3
- Redux
- Front
- JS
- vuetify
- react
- composition
- react native
- vuex
- pagination
- react-query
- three.js
- Core Components
- vue.js
- 포트폴리오
- 타입스크립트
- 호이스팅
- NUXT
- CORS
- 퍼블리셔
- Store
- pinia
- 자바스크립트
- e2e
- vue
- react query
- backend
- Cypress
- frontend
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |