Project 16: Falling Ball Physics Demo

3D Engineer

Builds on these lessons

Step 1 of 2

Project

Simulating Gravity

Without a physics engine, you can still fake gravity: subtract from a velocity ref each frame and apply it to position.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

function FallingBall() {
  const ref = useRef();
  const velocity = useRef(0);
  useFrame((state, delta) => {
    velocity.current -= 9.8 * delta;
    ref.current.position.y += velocity.current * delta;
    if (ref.current.position.y < -1.5) {
      ref.current.position.y = -1.5;
      velocity.current *= -0.6;
    }
  });
  return (
    <mesh ref={ref} position={[0, 2, 0]}>
      <sphereGeometry args={[0.4, 32, 32]} />
      <meshStandardMaterial color="tomato" />
    </mesh>
  );
}

export default function Scene() {
  return (
    <Canvas>
      <ambientLight intensity={0.7} />
      <FallingBall />
    </Canvas>
  );
}

← Previous Next →