diff --git a/README.md b/README.md index 1b2b5cae81a8828af97985c78209b5a98aeabf74..c4a48cf4951aed04a48fc7f24bee36bbe78bfab6 100644 --- a/README.md +++ b/README.md @@ -11,7 +11,11 @@ webgl에서 rotate와 view와 관련하여 다양한 함수를 제공하고 있 따라서 본 Tutorial은 각 x, y, z 축에 따른 rotate, view의 변화를 시각화하여 webgl을 처음 배우는 사람의 3D에서의 rotate와 view의 개념 이해를 돕고자 하는 것에 있습니다. - +정리하자면, +* x, y, z축을 따라 사용자가 직접 object를 rotate 해본다. +* 사용자가 선택한 축을 따라 object를 자동으로 rotate 해본다. +* x, y, z축을 따라 사용자가 직접 object를 translate 해본다. +* eye vector, center vector, up vector를 사용자가 직접 조절하여 camera view를 조정해본다. <br/> # How to make? @@ -23,7 +27,7 @@ webgl을 처음 배우는 사람의 3D에서의 rotate와 view의 개념 이해 rotate는 사용자가 지정한 축을 기준으로 rotate를 합니다. gl-matrix의 rotate 함수를 사용하여 rotate를 구현할 수 있으나, 이번에는 xrotate, yrotate, zrotate로 내가 원하는 축을 선택하여 rotate를 할 수 있도록 해보고자 합니다. -어느 축을 기준으로 얼마나 rotate할 것인지 사용자로부터 입력을 받을 수 있게 다음과 같은 코드를 index.html 에 추가합니다. +어느 축을 기준으로 얼마나 rotate할 것인지 사용자로부터 입력을 받을 수 있게 다음과 같은 코드를 ```index.html``` 에 추가합니다. ``` <label>X rotate : </label> <input style="width:400px" id="x_rotate" type="range" min="0" max="360" value="0" oninput="fn_update_xrotate(this.value);"></input> @@ -58,7 +62,7 @@ function fn_update_zrotate(val) zRot = val * 3.141592 / 360.0; } ``` -사용자로부터 받은 값을 변수에 저장할 수 있게 되었습니다. 이제 이 값을 따라 실제로 rotate가 됩니다. 이때, object를 rotate하므로 Model Matrix를 사용합니다. script.js에서 Model Matrix는 ```mMat```이라는 이름으로 쓰고 있습니다. 기존에 받아온 코드에서 다음 부분이 이와 같은 역할을 합니다. +사용자로부터 받은 값을 변수에 저장할 수 있게 되었습니다. 이제 이 값을 따라 실제로 rotate가 됩니다. 이때, object를 rotate하므로 Model Matrix를 사용합니다. ```script.js```에서 Model Matrix는 ```mMat```이라는 이름으로 쓰고 있습니다. 기존에 받아온 코드에서 다음 부분이 이와 같은 역할을 합니다. ``` function renderScene() { ...