Camden Yards: an interior drawn from a single plane

· 1 min read · react-three-fiber, three.js, performance, stadium, launch

A baseball stadium environment with a ballpark, trees and clouds in a stylized 3D scene, Camden Yards

Camden Yards was produced in 2022 for Mantis, as a stadium environment with animated trees, birds, clouds, a night mode and interactive reflections. Under the surface it carries a technique that I would like more people to know about: BoxProjectionEnvMap.

The Camden Yards environment

The trick #

BoxProjectionEnvMap renders interior environments from a single plane with a special projection. Instead of modeling the interior, you project an environment map onto a box that matches the room, and the parallax looks right.

The result is that it saves hundreds of thousands of triangles and keeps performance sharp.

Video #

There is a project video of the stadium.

Try it #

The stadium is live at camden-yards.vercel.app, and the details are on the project page.

Related projects