Devcrow

아래 예제는 가장 기본적인 Three.js의 Texture를 사용한 것입니다. Three.js는 ImageUtils의 loadTexture를 통해 아주 간단하게 Texture를 불러올 수 있습니다. 불러온 이 Texture를 map한 Material을 만들어주고, 이를 Mesh에 사용해주면 됩니다. 각 면에 다른 Texture를 사용하려면 각각 다른 Texture를 사용한 각 면의 Material을 배열로 만든 뒤, 이를 MeshFaceMaterial을 통해 MultiMaterial로 만들고 이것을 Mesh에 입혀주면 됩니다. 하단의 Source 링크를 통해 소스를 확인해 보시기 바랍니다. Source

Three.js는 몇 개의 2D Mesh와 상당수의 3D Mesh를 생성하는 Geometry를 제공합니다. 이들 Geometry들을 활용하여 다양한 형태의 Mesh를 만들 수 있습니다. 아래 예제의 구체적인 사용법을 확인하시려면 three.js 공식 홈페이지 document의 Geometries section을 참고해 보시기 바랍니다. Source

이번에는 물체의 색상에 대해 좀 더 살펴보겠습니다. 이전 예제인 05. Materials - Basic 을 보시면, Basic Material과 Normal Material은 조명(빛)에 영향을 받지 않는다고 설명했습니다.여기서 Normal Material은 약간 특수한 Material이므로 논외로 치고.. Basic의 경우는 GUI에서 지정된 색상값이 정확하게 보여지는 반면, Standard, Lambert, Phong Material은 지정한 색상과 유사하긴 하나 정확히 일치하지 않는것을 보실 수 있습니다. 그럼 이들의 색상은 어떻게 결정되는 것일까요.. 3D Graphics에서 물체의 색상은 여러가지 복합적인 요소에 의해 결정되는데, 바로 아래의 4가지의 요소가 그것입니다. Ambient Color..

물체의 표면을 결정하는 요소는 Material 입니다. 여기서 물체란 Mesh를 말하며, 이 Mesh는 Geometry와 Material로 생성됩니다. 이 때, Geometry는 오브젝트의 모양을 결정하며, Material은 그 물체가 어떤 외피(표면)을 가질지를 결정합니다. Three.js는 여러가지 다양한 기본 Material을 제공하며, 본 샘플에서는 그 기본 Material을 갖는 Cube들을 그리고 있습니다. 각 Material들은 아래와 같은 특성을 갖습니다. Basic Material : 간단한 Shading을 지원하는 가장 기본적인 Material 입니다.Normal Materal : RGB 색상에 의해 표현되는 제한된 Material 입니다. Wireframe 표현이나 Morphing등의..

이 샘플은 브라우저 사이즈에 변경이 일어날 때, camera의 종횡비와 projection matrix를 업데이트 하고, renderer를 재설정함으로서 브라우저 크게에 맞게 출력 영역을 재조정합니다. 아래 출력은 고정된 크기의 iframe 내에 출력하는 것이라 브라우저 크기를 변경해도 변화를 확인하기 어려우므로, 다음 링크를 클릭해서 새로운 창으로 띄운 후 확인해 보시기 바랍니다. 새창으로 띄우기 Source

화면 회전을 위한 Orbit-control을 추가한 예제입니다. 기본적인 rotation, panning, zoom in/out을 지원합니다.Orbit Control에 대한 자세한 내용은 다음의 Github를 참고하시기 바랍니다. Source

01.Basic 화면에서 간단한 animation만 추가한 화면입니다. animation을 위해 render 함수를 주기적으로 호출하고 있습니다.객체들의 동작이나 상태 조정을 위해 gui를 추가했으며, performance 체크를 위해 FPS status를 함께 출력합니다.3d graphics에서 속도값이나 색상, 움직임의 변화값과 같은 수치는 미리 예측하여 결정하기 어렵기 때문에, 이와같은 gui를 통해 결과를 확인하며 수치값을 결정하는 것이 좋습니다. 이 정도가 Three.js를 개발하기 위한 가장 기본적인 요소들을 갖춘 boilerplate라고 하겠습니다. Source

Three.js의 기본 요소인 scene, camera, renderer를 통해 구성한 기본적인 화면입니다.하단의 Source 버튼을 클릭하여 전체 소스를 확인하실 수 있습니다. Source