Create React components to three.js primitives (3D objects).

The first thing you might be asking is, “What is react-three-fiber?”. According to the documentation:

“react-three-fiber is a React renderer for three. js on the web and react-native”.?

The renderer is responsible for rendering React components to the DOM and native views. This means that we are able to create regular React components and let react-three-fiber handle converting those components into three.?

This means that we are able to create regular React components and let react-three-fiber handle converting those components into three.js primitives (3D objects). Components render outside of React. It outperforms Threejs in scale due to React's scheduling abilities.

Let's take a look at this simple example.?

What if I would like to render a complex 3D Model?

First of all I will use?Ready Player Me to create an avatar. The site is free and creating your avatar is pretty simple. You can then also download the glb file of your model.

After that, you can create an animation of your avatar in blender , which is also free software you can use to manipulate 3d.

Now let's prepare our React project.

1 - Let's create our react project.

npx create-react-app my-3d-model        

2 - Install ?@react-three/fiber ?and?@react-three/drei

npm install three @react-three/fiber @react-three/drei        

3 - Convert your glb model to a reusable React component

npx gltfjsx modelName.glb        

The file will result into something like this.

Now... you need to import "useEffect" from React and also include it like this.

useEffect(() => {/* highlight-line */
      actions['Armature|mixamo.com|Layer0'].play(); /* highlight-line */
   });         

After this, just create your scene and add your model to it.

Test the app here!

As WebXR continues to evolve, it could integrate into even more natural ways, encouraging the use of XR with devices that people already have on hand instead of the need for expensive hardware that many currently expect (while still supporting those expensive devices for those who do have them). It will affect consumers, also as consumers acclimate to this changing landscape, WebXR gains more value to businesses looking to leverage the new media for marketing, training, and generally increasing customer engagement.

Of course, WebXR is currently in its early stages. At 3XM Group (an Allata company) we are excited to keep an eye on WebXR and where it’s going as we continue to implement solutions in the XR space.

In case you would like to read more about our recent Success story on XR Development click here: "3XM Helps Frigus Bohn demonstrate inner workings of complex refrigeration systems to customers through 3D holograms"