Adding 3D libraries and physics engines to your React app with Tabnine

Gone are the days of being content with static images and texts on a website. The people crave an experience. Companies such as Google, NVIDIA, and Time Warner are leveraging the 3D JavaScript framework Three.js to create interactive visualizations and high-quality 3D animations that run in the browser. Some creative developers, like Bruno Simon, have even gone as far as to turn their personal website into a fun game.

We recently welcomed Chris Good to our team as a Product Marketing Manager. Inspired by the work of Bruno Simon, Chris decided to use Tabnine to help him create a small Dinosaur Game (similar to the one built into Chrome) using Three.js and Cannon, a lightweight 3D physics for the web. Chris agreed to join me on an episode Tabnine Labs where we attempted to create a Plinko game and add it to an existing Remix application.

Check out the recording:

If you took the time to watch the recording, you’ll notice we had some struggles. We realized halfway through that we’d forgotten to use a physics engine. We were also introduced to React Three Fiber, which was required to render our Three.js graphics in React. This resulted in us being unable to finish our Plinko game before the end of the stream. With a little continued off-camera work, we were able to finish the game. You can view the code in this GitHub repo.

Tabnine was able to generate a good amount of the code based on our input, but there were some roadblocks. The following tips could help you avoid them.

Render on the client

Probably the biggest hurdle we encountered was actually getting React Three Fiber to render the game. The whole site refused to load and the errors we received weren’t helpful. After feeding Tabnine a lot of error messages and follow-up questions, we discovered that React Three Fiber must be rendered client-side. 

How to resolve this will differ based on the web framework you’re using. Because we were using Remix, all our pages were server-side rendered by default. With that in mind, we were able to help guide Tabnine to a solution that involved pulling game components out of the page component and making them client-side by renaming their files to .client.tsx. This removed them from the server bundle and forced them to be rendered on the browser.

Remember the third dimension

The other problem was our “flat” thinking. As the name suggests, Three.js is for creating 3D graphics but we were attempting to build our Plinko components as if they were two-dimensional. Discs were dropping straight through the pegs instead of colliding and bouncing. It wasn’t until we moved the camera, that we realized our components were at different Z positions resulting in them never touching. We weren’t using all the 3D shapes available to us; everything was a sphere or plane. It looked fine when viewed straight on, but caused a lot of confusion when things didn’t work. 

With this knowledge, we asked Tabnine to assist with converting pegs to cylinders and walls to boxes. Using these 3D shapes, it helped us align and size our components so they behaved appropriately in all three dimensions.

Leave the physics to the experts

During our first attempt, we forgot to use the physics engine. Can it be done without one? Sure. We found ourselves tweaking velocity formulas and calculating when items collide and how they should react to each other. Cannon handled that for us and Tabnine knew how to use Cannon. Unless you’re dying to dust off what you learned in that physics course you took long ago, just reach for a physics engine and focus your efforts elsewhere.

Could your website benefit from adding some 3D animations or interactions? Have Tabnine assist you in building something with Three.js —and let us know what you build. 

Not yet a Tabnine user? Sign up for a free 90-day Tabnine Pro trial.