[THREE.JS-EX] TransformControls를 이용하여 Spline 편집


_initialize 함수를 보면 아래의 변수가 정의되는 것을 볼 수 있습니다.

this._splineHelperObjects = [];
this._positions = [];
this._splines = {};

_splineHelperObjects는 스플라인의 제어점에 대한 Mesh 객체를 담고 있습니다. _positions는 _splineHelperObjects에 저장된 Mesh들의 position 속성 객체들 항목으로 참조하고 있고 _splines은 key-value 컨테이너로 uniform, centripetal, chordal를 key로 하여 THREE.CatmullRomCurve3 객체를 value로 가집니다. 이때 이 value에 mesh를 속성으로하여 THREE.Line 객체를 갖습니다.

이 글의 예제 코드는 THREE.JS 공식 사이트의 EXAMPLES에서 제공되는 코드를 이해하고 제 나름대로의 코드로 재구성한 것입니다.

GLSL를 이용한 그래픽 효과

3차원 그래픽에서 특수 효과는 쉐이더를 통해 대부분 구현됩니다. 이 글은 간단한 GLSL 쉐이더 코드를 통해 물과 불에 대한 효과를 소개합니다.

먼저 불에 대해 구현하고자 하는 모습은 다음과 같습니다.

다음은 물에 대한 결과입니다.

전체 소스코드는 아래 링크를 통해 다운로드 받으실 수 있습니다. 웹기반에서 구현된 코드이므로 js와 css, html 파일로 구성되어 있으며 WebGL 2.0으로 쉐이더 코드가 실행됩니다.