// 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
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:
1 Like
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
Please share the url for live demo for us to try and see your project