// new function
function modelController() {
const zoomInBtn = document.querySelector('.zoom-in-btn');
const zoomOutBtn = document.querySelector('.zoom-out-btn');
zoomInBtn.addEventListener('click', () => {
MODEL_VIEWER.zoom(5);
});
zoomInBtn.addEventListener('click', () => {
MODEL_VIEWER.zoom(-5);
});
}
해당 기능은 손쉽게 구현이 가능합니다.
애니메이션 토글 기능 구현
저번 포스팅에서 로드된 모델의 사용 가능한 애니메이션이 있는지 체크 후 있다면 model-veiwer에 animation-name 속성을 추가해주는 준비 단계까지 맞추어놓은 상태가 되어 있어야 합니다.
function modelController() {
const zoomInBtn = document.querySelector('.zoom-in-btn');
const zoomOutBtn = document.querySelector('.zoom-out-btn');
// new variable
const animationBtn = document.querySelector('.animation-btn');
zoomInBtn.addEventListener('click', () => {
MODEL_VIEWER.zoom(5);
});
zoomInBtn.addEventListener('click', () => {
MODEL_VIEWER.zoom(-5);
});
// new eventListener
animationBtn.addEventListener('click', () => {
if (animationArr.length > 0) {
MODEL_VIEWER.classList.toggle('activeAni');
toggleAnimation();
}
});
}
// new function
function toggleAnimation() {
const isActive = MODEL_VIEWER.classList.contains('activeAni');
if (isActive) {
MODEL_VIEWER.setAttribute('animation-name', animationArr[animationArr.length - 1]);
} else {
MODEL_VIEWER.setAttribute('animation-name', animationArr[0]);
}
}
애니메이션 토글 버튼을 클릭할 때마다 한번 더 animationArr가 존재하는지 확인 후
현재 애니메이션이 활성화되었는지 체크하기 위해 'activeAni' 클래스를 toggle 시켜줍니다.
'toggleAnimation' 함수에서 toggle 시켰던 'activeAni' 클래스를 가지고 있는지 확인하는 변수 'isActive'를 만들어 줍니다.
이제 isActive 변수를 통해 조건문으로 true라면 aniamtionArr의 마지막, false라면 첫 번째(기본)로 animation-name 속성을 설정해줍니다.
저는 저번 포스팅에서도 말했듯 제가 사용한 모든 model 파일은 사용 가능한 animation이 2개로 고정되어있는데 가끔 사용하지 않는 애니메이션이 중간에 포함돼서 3개가 들어있는 경우가 있어서 [0]으로 첫 번째는 고정, Array.length - 1로 배열의 length가 2이던 3이던 마지막 요소를 선택하도록 해놨습니다.
본인 프로젝트에 맞게 바꾸시면 될 거 같습니다.
풀 스크린 기능 구현하기
function modelController() {
const zoomInBtn = document.querySelector('.zoom-in-btn');
const zoomOutBtn = document.querySelector('.zoom-out-btn');
const animationBtn = document.querySelector('.animation-btn');
// new variable
const fullScreenBtn = document.querySelector('.fullscreen-btn');
zoomInBtn.addEventListener('click', () => {
MODEL_VIEWER.zoom(5);
});
zoomInBtn.addEventListener('click', () => {
MODEL_VIEWER.zoom(-5);
});
animationBtn.addEventListener('click', () => {
if (animationArr.length > 0) {
MODEL_VIEWER.classList.toggle('activeAni');
toggleAnimation();
}
});
// new eventListener
fullScreenBtn.addEventListener('click', () => {
toggleFullScreen(MODEL_VIEWER.parentElement);
});
}
// new function
function toggleFullScreen(element) {
const agent = navigator.userAgent.toLowerCase();
const target =
agent.indexOf('safari') > -1
? !document.webkitFullscreenElement
: !document.fullscreenElement;
if (target) {
if (element.requestFullscreen) return element.requestFullscreen();
if (element.webkitRequestFullscreen) return element.webkitRequestFullscreen();
if (element.mozRequestFullScreen) return element.mozRequestFullScreen();
if (element.msRequestFullscreen) return element.msRequestFullscreen();
} else {
if (document.exitFullscreen) return document.exitFullscreen();
if (document.webkitExitFullscreen) return document.webkitExitFullscreen();
if (document.mozCancelFullScreen) return document.mozCancelFullScreen();
if (document.msExitFullscreen) return document.msExitFullscreen();
}
}
