bouncing marble

Showcase
1 
// Create a scene
const scene = new THREE.Scene();

// Create a camera
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

// Create a renderer
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Create a floor
const floorGeometry = new THREE.PlaneGeometry(10, 10);
const floorMaterial = new THREE.MeshBasicMaterial({ color: 0x808080, side: THREE.DoubleSide });
const floor = new THREE.Mesh(floorGeometry, floorMaterial);
floor.rotation.x = Math.PI / 2;
scene.add(floor);

// Create a marble
const marbleGeometry = new THREE.SphereGeometry(0.5, 32, 32);
const marbleMaterial = new THREE.MeshBasicMaterial({ color: 0xff0000 });
const marble = new THREE.Mesh(marbleGeometry, marbleMaterial);
marble.position.y = 0.5;
scene.add(marble);

// Set up bouncing animation
const speed = 0.05;
let direction = 1;

// Render function
function render() {
  requestAnimationFrame(render);

  // Update marble position
  marble.position.y += speed * direction;

  // Bounce on floor
  if (marble.position.y >= 2.5 || marble.position.y <= 0.5) {
    direction *= -1;
  }

  // Render the scene
  renderer.render(scene, camera);
}

// Start rendering
render();
1 Like
2

Bouncing might look more natural if the ball speed decreases at the top of the trajectory. Instead of parabola, you can use |sin(x)| as a good approximation. Also, have you considered adding some textures, so the marble ball looks like made of marble, like this:

image
image1209×688 42.5 KB

1 Like
3

You should leave a few words and provide the showcase in a live format hosted on a website or in a jsfiddle or codepen.

4 Likes
4

Please share the url for live demo for us to try and see your project