How to create simple vertical bounce animation to a sphere - three.js

Question

I'd like for a spinning sphere I created to also bounce vertically an infinite amount of times that looks realistic to the way a ball would bounce in real life strictly on the y axis.
The webgl examples I've found seem be a bit overloaded (multiple balls bouncing on multiple planes) and I haven't been able to deduce the core setup to achieve what I need.
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(50, 300 / 200, 1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(300, 200);
document.body.appendChild(renderer.domElement);
var geometry = new THREE.SphereGeometry(3, 50, 50, 0, Math.PI * 2, 0, Math.PI * 2);
var material = new THREE.MeshNormalMaterial();
var cube = new THREE.Mesh(geometry);
scene.add(cube);
camera.position.z = 10;
var render = function () {
requestAnimationFrame(render);
cube.rotation.x -= 0.10;
cube.rotation.y += 0.00;
renderer.render(scene, camera);
};
render();
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>

Answer 1

So, just an option with Math.sin():
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 1, 1000);
camera.position.set(2, 3, 5);
camera.lookAt(scene.position);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
var plane = new THREE.Mesh(new THREE.PlaneGeometry(5, 10, 5, 10), new THREE.MeshBasicMaterial({
color: 0x00ffff,
wireframe: true
}));
plane.rotation.x = -Math.PI * 0.5;
scene.add(plane);
var ball = new THREE.Mesh(new THREE.SphereGeometry(0.5, 16, 8), new THREE.MeshBasicMaterial({
color: 0xff00ff,
wireframe: true
}));
scene.add(ball);
var clock = new THREE.Clock();
var time = 0;
var delta = 0;
render();
function render() {
requestAnimationFrame(render);
delta = clock.getDelta();
time += delta;
ball.rotation.x = time * 4;
ball.position.y = 0.5 + Math.abs(Math.sin(time * 3)) * 2;
ball.position.z = Math.cos(time) * 4;
renderer.render(scene, camera);
}
body {
overflow: hidden;
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/94/three.min.js"></script>