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>
객체 추가
<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를 넣어준다.
완성!! 완성완성!! 완성!! (이것저것 만져보라구!!)
See the Pen rgaeRL by JaeCool (@JaeCool) on CodePen.
'Three.js' 카테고리의 다른 글
| [React] R3F(React Three Fiber) 상자 만들어보기 (0) | 2023.11.24 |
|---|---|
| [Three.js ] Three.js 간단한 Animation를 넣어보자 (1) | 2019.04.03 |
| [Three.js ] Three.js를 시작해보자 (2) | 2019.03.27 |
