Scientific Computing & Data Science

이번 예제는 특정 오브젝트가 마우스 클릭해 반응하도록 하는 것입니다. 마우스 포인터가 놓여진 오브젝트를 인식시켜 클릭 시 그 오브젝트가 회전하도록 합니다.Download Project Click here to view with full screen mode Operations 해당 카드를 마우스 클릭 main.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110..

이번 예제는 마우스 드래그를 통해 컨텐츠를 컨트롤 하는 것에 관한 것입니다. 개인적으로는 본 테스트 프로젝트를 만들면서 꽤 재밌었던 기억이 납니다. 매우 심플하지만 응용하면 요긴한 프로젝트라는 생각이 듭니다.Download Project Click here to view with full screen mode OperationsMouse Left Button Click + Dragmain.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293..

이번 글은 Leap Motion Controller를 이용한 오브젝트 컨트롤에 대한 두번째 예제이다. 아쉽게도 현재 필자는 개발 당시에는 Leap Motion Controller를 가지고 있었으나, 현재는 보유하고 있지 않아 본 테스트 프로젝트가 제대로 작동하는지 검증을 할 수 없는 상태이다.다만, 개발 당시에는 본 테스트 프로젝트가 정상 작동하였었기 때문에 일단 올려본다. Leap Motion Controller를 가지고 계신 분은 테스트 해 보시기 바란다. [Download Project] FULL SCREEN [main.js]// standard global variables var container, scene, camera, renderer, controls, stats; var keyboard..

이번 예제는 Leap Motion Controller를 이용한 오브젝트 컨트롤에 관한 것이다. 아쉽게도 현재 필자는 개발 당시에는 Leap Motion Controller를 가지고 있었으나, 현재는 보유하고 있지 않아 본 테스트 프로젝트가 제대로 작동하는지 검증을 할 수 없는 상태이다.다만, 개발 당시에는 본 테스트 프로젝트가 정상 작동하였었기 때문에 일단 올려본다. Leap Motion Controller를 가지고 계신 분은 테스트 해 보시기 바란다. [Download Project] FULL SCREEN [main.js]// standard global variables var container, scene, camera, renderer; var keyboard = new THREEx.Keyboar..

이번 예제는 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..

이번 예제는 충돌을 감지와 관련된 것이다. 컨트롤하는 오브젝트가 다른 오브젝트와 충돌 시 상단에 충돌했다는 메시지를 표시하도록 하였습니다. * NOTE: FULL SCREEN MODE로 실행해야 제대로 컨트롤 할 수 있습니다.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.js1234567891011121314151617181920212223242526272829303132333435363738394..

이번 예제는 뷰포트를 네 개로 분할하는 방법에 관한 것이다. 즉, Front View, Top View, Left View, Right View로 뷰포트를 분할한다.Download Project Click here to view with full screen mode OperationsW: Move ForwardS: Move BackwardA: Turn LeftD: Turn Rightmain.js1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192..

이번 예제는 미리 정의된 특정 동작 애니메이션에 대하여 키보드로 컨트롤하는 내용입니다. 본 예제는 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..

이번 예제에서는 Tween JS를 이용한 오브젝트의 두 상태(state) 간 보간 애니메이션에 관한 것입니다.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.js123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172..

이번 예제는 free & open source 3D 제작도구인 Blender에서 제작한 애니메이션 씬을 Three.js 프레임웍의 Loader(JSONLoader)로 불러오는 것에 관한 것입니다. Blender에서 간단한 물리 시뮬레이션을 수행하고 이 애니메이션에 대하여 Frame Baking을 하여 각 Frame에 대한 애니메이션 데이터를 생성합니다.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...