Your 3D Wilderness Bearings: ThreeJS Helpers in React-Three-Fiber

Our planet is layered with millions of digital windows that exhibit a terrain vastly assembled from 2D interfaces. With the rise of 3D browser support and AR development kits (e.g Apple’s ARKit and ARCore by Google), the landscape is gradually shifting and our digital terrain is revealing newly crafted realities and 3D worlds. Many developers have set out to traverse the landscape and investigate the territory of 3D coding.

When it comes to developing for 3D and immersive experiences, there is more for us developers to consider than usual. Normally, we only need to consider two axes when creating websites and apps (x and y). The additional z-axis when building 3D experiences can be disorientating for developers, especially when starting out. It is this that I’ll be casting some light over in this article. This is a guide to getting your head around 3D in general, with the help of ThreeJS Helpers and how to use them in React-Three-Fiber.

“The classic five aside, there’s more than meets the visual cortex when it comes to senses.” — Amber Jorgenson, Discovery Magazine

Discovering our other senses

Over two thousand years have passed since Aristotle penned De Anima, describing the five senses that help us to perceive the world. Neuroscience has come a long way since then and we have discovered that we, in fact, have far more than five senses.

Proprioception and spatial awareness are extremely beneficial to us in reality. We use proprioception to tell us where our body parts are in relation to each other and spatial awareness helps us to understand the relationship between our body and our environment. They are both developed from childhood and continue to helps us throughout our adult lives.