[Three js] - 공 바운스

three js를 이용해서 위에 애니메이션 효과를 구현해볼 예정이다.

일단 우리 수학에서 sin, cos에 대해서 알아야 한다.

타원에서 sin, cos은 위와 같이 움직인다.

x축은 cos을 나타내고, y축은 sin을 나타낸다.

그러면 공 바운스 효과는 위의 운동에서 반만 움직이면 된다.

 

        function renderScene() {
            cube.rotation.x += 0.02;
            cube.rotation.y += 0.02;
            cube.rotation.z += 0.02;

            step += 0.04;
            sphere.position.x = 20 + ( 10 * (Math.cos(step)));
            sphere.position.y = 2 + ( 10 * Math.abs(Math.sin(step)));

            requestAnimationFrame(renderScene);
            renderer.render(scene, camera);
        }

y축 코드를 보면 math.abs(절대값)를 사용하고 있다. 그러므로 y축은 0미만이 될수가 없다.