[3D 인터랙티브 웹] Three.js에서 회전 애니메이션 적용시키기 - 3D 시계 모델링

시계의 시침, 분침, 초침에 회전 적용하는 방법

function Rotate() {

    scene.getObjectByName("sec").rotation.z = -(Math.PI/180)*90;

    scene.getObjectByName("min").rotation.z = -(Math.PI/180)*180;

    scene.getObjectByName("hour").rotation.z = -(Math.PI/180)*265;

    scene.getObjectByName("orbit").rotation.y = (Math.PI/180)*45;

}

 

실제시간 정보 가져와서 애니메이션 적용하기

function setTime(){

    const hour = scene.getObjectByName("hour");

    const sec = scene.getObjectByName("sec");

    const min = scene.getObjectByName("min");

    const orbit = scene.getObjectByName("orbit");

    const date = new Date();

    const hourRate = date.getHours()/24;

    const minRate = date.getMinutes()/60;

    const secRate = date.getSeconds()/60;

    hour.rotation.z = -(Math.PI*2)*2*hourRate;

    min.rotation.z = -(Math.PI*2) * minRate;

    sec.rotation.z = -(Math.PI*2) * secRate;

    orbit.rotation.y = -(Math.PI*2)*hourRate;

   

    console.log(date, hourRate, minRate, secRate)

}

 

실시간으로 시계에 시간 적용하기

function render() {

    setTime();

    requestAnimationFrame(render);

    controls.update();

    renderer.render(scene, camera);

}

init();

 

낮과 밤에 따라서  3가지의 색상 적용하기

//colors 변수 설정

const colors = {

    day:{

        sky: "hsl(45,100%,60%)",

        ground: "hsl(10,100%,50%)",

        background: "hsl(20,80%,10%)",

    },

    night:{

        sky: "#ffffff",

        ground: "hsl(180,80%,25%)",

        background: "hsl(200,80%,15%)",

    }

}

 

 let currentSky, currentGround, currentBackground;

    if(date.getHours() > 6 && date.getHours() < 18){

        //day

        currentSky = colors.day.sky;

        currentGround = colors.day.ground;

        currentBackground = colors.day.background;

    }else{

        // night

        currentSky = colors.night.sky;

        currentGround = colors.night.ground;

        currentBackground = colors.night.background;

    }

    scene.background = new THREE.Color(currentBackground);

    hemiLight.color = new THREE.Color(currentSky);

    hemiLight.groundColor = new THREE.Color(currentGround)

 

3D 시계 모델링 결과