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..

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

이번 예제는 오픈소스 3D 제작도구인 Blender로 3D Scene을 만들고 이를 Three.js 프레임웍의 Blender Scene Loader로 불러오는 방법에 관한 것입니다.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.js12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152..