Scientific Computing & Data Science

이번 예제는 PhysiJS라는 Three.js 기반 물리엔진 프레임웍을 이용하여 오브젝트의 낙하 시뮬레이션에 관한 것입니다. PhysiJS 웹사이트를 방문해 보면 PhysiJS에 대하여 다음과 같이 소개하고 있습니다: "Physics Plugin for Three.js"Download Projects Click here to view with full screen mode OperationsMouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Drag: Camera Panningmain.js12345678910111213141516171819202122232425262..

이번 예제는 미리 정의된 특정 동작 애니메이션에 대하여 키보드로 컨트롤하는 내용입니다. 본 예제는 Three.js WebGL 프레임웍을 이용하여 Video Game을 제작할 때 아주 유용하게 응용될 수 있을 것입니다. 컨텐츠의 복잡도를 줄이기 위해 Android 모델을 이용하였습니다. * NOTE: 본 예제는 FULL SCREEN MODE로 들어가야 Android 컨트롤이 가능합니다.Download Project Click here to view with full screen mode!!! OperationsMouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Drag..

이번 예제에서는 Three.js WebGL 프레임웍에서의 그림자를 구현하는 방법에 관한 것입니다.Download Project Click here to view with full screen mode OperationsMouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Drag: Camera Panningmain.js1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757..

이번 예제는 Refraction Material에 관한 것이다. Refraction Material은 유리와 같은 투명 재질을 표현하기 위한 것입니다.Download Project Click here to view with full screen mode OperationsMouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Drag: Camera Panningmain.js1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606..

이번 예제는 Cube Map에 관한 것이며, Cube Map은 environment mapping의 일종으로서 환경이 오브젝트에 반사된 것과 같은 효과를 내기 위한 것입니다.Download Project Click here to view with full screen mode OperationsMouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Drag: Camera Panningmain.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354..

이번 예제는 기본적인 Geometry에 대한 것입니다. 기본적인 Geometry라 함은, Three.js가 제공하는 Geometry Primitives를 의미합니다.Download Project Click here to view with full screen mode OperationsMouse Left Button Click & Drag: Camera Rotating Mouse Wheel: Camera Zoom In & Out Mouse Right Button Click & Drag: Camera Panning main.js12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455..

이번 예제는 Web-Cam으로부터 받은 화면 이미지를 각종 오브젝트의 texture로 출력하는 예제입니다. 웹캠이 없는 경우 각 오브젝트의 texture는 검게 출력되며, 웹 브라우저가 웹캠을 허용하겠냐는 메시지에 대하여 허용하지 않을 경우에도 검게 출력됩니다.Download Project FULL SCREEN[Operations]Mouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Drag: Camera Panning [main.js]// standard global variables var container, scene, camera, renderer, contro..

이번 예제는 Web-Cam을 통해 화면을 웹 페이지에 띄우는 예제입니다. Web-Cam이 없는 경우 화면이 나오지 않으며, "웹캠을 허용하시겠습니까?"라는 메시지가 나올 경우 허용해야만 Web-Cam을 통해 화면이 출력됨에 유의하기 바랍니다.Download Project FULL SCREEN

이번 글에서는 가장 기본적인 Sphere 오브젝트를 하나 표시하는 정도의 수준으로 일종의 Three.js 프레임웍 기반의 WebGL Project 템플릿을 소개하고자 합니다. Download Project FULL SCREENOperationsMouse Left Button Click & Drag: Camera RotatingMouse Wheel: Camera Zoom In & OutMouse Right Button Click & Drag: Camera Panningmain.js12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686..

Written by Geol Choi | Feb. 10, 2014 이번 글에서는 WebGL의 대표적인 프레임워크인 Three.js의 대해 알아보도록 하겠습니다.Three.js 기원 및 역사Browser 플러그인 등 별도의 설치없이 WebGL 기반 JavaScript를 이용하여 구현하는 GPU가속 3D 애니메이션 엔진2010년 4월 Ricardo Cabello가 처음으로 릴리즈본 라이브러의 시초는 2000년 초반으로 거슬러 올라가게 되는데 최초의 코드는 ActionScript로 개발되었으며 2009년에 JavaScript로 포팅함WebGL의 출현에 따라 Paul Brunt는 Three.js에 쉽게 렌더러를 추가할 수 있었음Cabello는 API 설계, CanvasRenderer, SVGRenderer를 추..