Golazos in 3D

Katie and I went all in on the U.S. women’s national soccer team as they prepared for the World Cup. We supported them at a friendly match, watched every tournament game and cheered them on at a trophy rally.

Carli Lloyd’s midfield goal in the title game was perhaps the most incredible moment of the title run. Inspired by a New York Times 3D graphic of a key Super Bowl play and some tools I learned at a recent meetup, I tried to recreate the moment Lloyd struck the ball with graphics software. Click the images to see a webGL version, but be warned: the page loads an 8MB data file.

lloyd

keeperI found an awesome model of the World Cup stadium and used a soccer data tutorial and game footage to place the ball and key players as accurately as I could in Sketchup. I’d never used WebGL before, so I learned how to export Sketchup models for use in three.js and hacked my way around positioning the camera with the TweenMax library. I would have liked to more closely replicate the lighting and shadows that affected the goal, but I encountered problems.

Unfortunately, even after removing the awesome jumbotron and most of the seating in the incredible arena model, the data file is still way too large to reasonably serve online. I’ll try to build on this experience and do more efficient 3D projects in the future.

I was most interested in seeing what Lloyd and Japan goalkeeper Ayumi Kaihori saw when Lloyd took the shot, and my WebGL page animates between their two perspectives. Here are some other interesting angles from my Sketchup project.

side stadium top