dat.GUI를 이용해보자
dat.GUI는 구글의 엔지니어들이 만든 라이브러리로,
dat.GUI가 생성 한 패널 부분에서 매개 변수를 변경하면 이미지의 위치, 크기, 회전 속도 등을 동적으로 반영할 수 있도록 한다. ( 일단 재밌다 )
페이지의 우측 상단에 있는 UI가 dat.GUI를 실행하면 나타난다!!!
script 추가
https://threejs.org/ 사이트에서 파일을 다운로드한다.
다운로드한 파일(three.js-master) > examples > js > libs > dat.gui.min.js를 사용하면 된다.
<body>
<div id="WebGL-output"></div>
<script type="text/javascript" src="./js/three.js"></script>
<script type="text/javascript" src="./js/dat.gui.js"></script>
</body>
또는
<body>
<div id="WebGL-output"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/three.js/110/three.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.6/dat.gui.js"></script>
</body>
객체 추가
<script type="text/javascript">
var sphere;
var controls = new function () {
this.spherePosX = 0;
this.spherePosY = 5;
this.spherePosZ = 0;
this.sphereScale = 1;
this.redraw = function () {
var sphereGeometry = new THREE.SphereGeometry(controls.sphereScale, 50, 50);
var sphereMaterial = new THREE.MeshLambertMaterial({color: 0xd4db7a});
sphere = new THREE.Mesh(sphereGeometry, sphereMaterial);
sphere.position.set(controls.spherePosX, controls.spherePosY, controls.spherePosZ);
scene.add(sphere);
};
};
</script>화면 안의 sphere를 X축, Y축, Z축 이동과 크기를 조절하려고 한다.
controls의 초기값을 설정한다.
처음 화면이 로드되었을때 기본값으로 사용된다.
sphere의 크기, 위치의 값 (controls.sphereScale, controls.spherePosX, controls.spherePosY, controls.spherePosZ)을 받아올 것이기 때문에 redraw 함수 안에 따로 넣어 주었다.
<script type="text/javascript">
var gui = new dat.GUI();
guiSphere = gui.addFolder('guiSphere');
guiSphere.add(controls, 'spherePosX', -20, 20);
guiSphere.add(controls, 'spherePosY', 5, 20);
guiSphere.add(controls, 'spherePosZ', -15, 15);
guiSphere.add(controls, 'sphereScale', 1, 10);
camera.lookAt(scene.position);
controls.redraw();
render();
</script>guiSphere라는 folder를 추가한다. - gui.add(controls, 'spherePosX', -20, 20); 하면 폴더 없이 추가된다!
객체명 뒤의 숫자는 범위를 나타낸다. (-20 부터 20 까지) 조절 가능하다.
<script type="text/javascript">
function render() {
sphere.position.x = controls.spherePosX;
sphere.position.y = controls.spherePosY;
sphere.position.z = controls.spherePosZ;
sphere.scale.x = controls.sphereScale;
sphere.scale.y = controls.sphereScale;
sphere.scale.z = controls.sphereScale;
requestAnimationFrame(render);
renderer.render(scene, camera);
}
</script>sphere의 position.x 값에 controls의 spherePosX를 넣어준다.
완성!!
아래 [RunPen] 클릭 > 우상단[EDIT ON CODEPEN] 클릭 > 우상단[guiSphere] 클릭 > 이것저것 만져 보세요~
See the Pen JjoQOGY by 최충현 (@nenara) on CodePen.
추가로 적습니다...
입력 문자열을 선택하게 만들고 싶다면
gui.add(myData, "dataString", ["Dip2K", "James", "Anold"]);0~100 사이의 값만 입력받고, 0.1 단위로 증감 시키고자 한다면
gui.add(myData, "dataNumber", 0, 100).step(0.1);숫자값도 선택하게 만들고 싶다면
gui.add(myData, "dataNumber", { A: 0, B:50, C:100 });컬러값을 받고자 한다면
gui.addColor(myData, "dataColor1");화면에 값을 표시만 하고 싶다면
gui.add(myData, "dataNumber").listen();컨트롤 값이 변화할때 이벤트 호출을 하고 싶다면
gui.add(myData, "dataNumber")
.onChange(function(v) { //onChange는 값 변경 중의 매 순간 발생
alert(v);
}).onFinishChange(function(v) { //onFinishChange는 최종적인 값의 변경이 발생
alert(v);
});컨트롤러 화면을 새로고침 하고 싶다면
var controls = new function () {
this.speed = 2; //변수 정의
this.refresh = function () { //화면 새로고침
for (var i in gui.__controllers) {
gui.__controllers[i].updateDisplay();
}
}
};
gui = new dat.GUI();
gui.add(controls, 'speed', 0, 100).step(2);
controls.speen = 10;
controls.refresh(); //새로고침
이외에도 dat.gui는 설정된 값을 localStorage에 저장할 수 있는 기능도 있다는 것도 알아두시면 유용할듯합니다.
출처 : https://jj-k-ul.tistory.com/entry/Threejs-datGUI를-이용해보자?category=1046305 [불꽃놀이보고싶다]
출처 : http://www.gisdeveloper.co.kr/?p=5654
'프론트엔드 개발 놀이터 > Three.js' 카테고리의 다른 글
| Three.js - 오브젝트(mesh) 와 빛(light) (0) | 2020.01.31 |
|---|---|
| Three.js - camera생성, PerspectiveCamera (0) | 2020.01.31 |
| Three.js 간단한 Animation (0) | 2020.01.31 |
| Three.js 를 시작해 보자 (0) | 2020.01.31 |
| Three.js 링크 모음 (0) | 2020.01.31 |