Threejs
1.Three.js 입문
이전부터 HTML5 Canvas에 관심이 많았지만 굉장히 low level의 API에 압도당해서 너무 힘들것같아서 포기했다. 하지만 이번에 Three.js 라는 WebGL을 사용하는 웹기반의 3D 렌더링을 제공해주는 라이브러리를 보고 다시 공부해야겠다고 마음먹고 공부를
2.ThreeJS 1. 라이브러리 사용 준비
Skelleton.html we'll at least need to load the Three.js library, three.js TrackballControls.js, which allows you to use your mouse to rotate and pan around the scenes. In the element of this page, ...
3.ThreeJS 2. Rendering and Viewing a 3D Object
이번 포스트에서는 첫번째 Scene을 만들어보고 몇개의 Objects와 Camera를 추가 해볼 것 입니다. 첫 예제에 들어갈 Objects들은 5가지입니다. Plane, Cube, Sphere, Camera, Axes 평면, 큐브, 구, 카메라, 축 우리
4.ThreeJS 3. Adding materials, lights, and shadows
이번 포스트에서는 이전 포스트에서 만들었던 내용을 가지고 materials 과 light 그리고 shadoq를 추가해보겠습니다. light관련 소스를 scene에 추가해보면서 시작해보겠습니다. THREE.SpotLight는 spotLight의 위치(spotLigh
5.ThreeJS 4. Expanding with animations
scene을 animate하기원한다면 우리가 해야할 첫번째는 특정한 Interval을 가지고 re-render를 반복하는 방법을 찾는 것입니다. HTML5이전에 Javascript API에서는 setInterval이 존재했습니다. setInterval을 가지고, 우리는 반복적으로 하는 행위를 만들수 있습니다. 하지만 이 함수의 문제점은 브라우저에 무슨일이...
6.ThreeJS 5. TrackballControls(카메라 방향 제어)
https://threejs.org/docs/index.html#examples/en/controls/TrackballControls TrackballControl을 사용하면 카메라위치를 저희가 제어할수 있어서 3D Objects들을 다른 방향에서 확인할 수 있습니다. 처음 저희가 해야할 것은 trackball controls을 초기화하는 것입니다. ...
7.ThreeJS 6. Automatically resize the output
브라우저를 사이즈 조절했을 때 카메라는 변화시키는 것은 매우 간단합니다. 처음 할 것은 event listener를 아래와 같이 등록하는 것입니다. register event listener in window addEventListener의 인자 3개는 type:
8.ThreeJS 7. The main components that you can use to create a Three.js application
챕터 2로 넘어왔습니다. 지금까지 해왔던 내용은 매우 기초적이고 ThreeJS 어플리케이션이 어떻게 만들어질지 대충 알아봤습니다. 지금부터는 조금더 깊게 공부해보겠습니다. ThreeJS를 만들 때 사용할 주요 컴포넌트 복습겸 Scene에 무엇을 보여줄 때 필요한 4가지 요소를 정리해보겠습니다. | Component| Description | |---|...
9.ThreeJS 8. Geometries and meshes
지금까지 object를 추가할 때, 위 예시와 같이 SphereGeometry 와 MeshBasicMaterial객체를 생성해서 Mesh 속에서 결합을 했습니다. 이번 포스트에서 geometries와 mesh에 대해 자세히 알아보겠습니다. The Properties and Functions of a geometry ThreeJS에서는 저희가 특별한 설...
10.ThreeJS 9. Different cameras for different uses(PerspectiveCamera)
Three.js 에는 두 가지 타입의 camera가 있습니다. orthographic camera perspective camera 이번 포스트에서는 기초적인 내용만 건들여보겠습니다. Three.js는 VR gear 또는 3D glass를 사용했을 때 보여지는 Sce