React Native for 3D Visualizations

3D graphics and animations bring depth and interactivity to applications. In this blog, we’ll explore using the Three.js library with the @react-three/fiber package in React Native to create stunning 3D visualizations. We’ll cover installation, setup for Android and iOS, writing code, and using platforms like CGTrader to download or create custom 3D models.

What is Three.js?

Three.js is a popular JavaScript library for creating 3D content using WebGL. It’s widely used for building 3D models, interactive visualizations, animations, and even games.

What is @react-three/fiber?

@react-three/fiber is a React renderer for Three.js. It abstracts Three.js into declarative React components, making it easier to integrate 3D graphics into React applications.

Installing and Setting Up Three.js and @react-three/fiber in React Native

Step 1: Create a New React Native Project

npx react-native init ThreeExample
cd ThreeExample

Step 2: Install Required Libraries

Run the following command to install Three.js, @react-three/fiber, and type definitions:

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

Step 3: Install React Native WebView (Required for Three.js in React Native)

npm install react-native-webview

Step 4: Link the Libraries

If you’re using React Native below version 0.60, link the libraries manually:
‍

react-native link react-native-webview

Step 5: Install iOS Dependencies

Navigate to the ios directory and install CocoaPods dependencies:
‍

cd ios
pod install

Writing Code to Render a 3D Scene in React Native

Here’s an example of a basic 3D scene in React Native using Three.js and @react-three/fiber.

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Canvas } from '@react-three/fiber';
import { Mesh } from 'three';

export default function ThreeDVisualization() {
  return (
    <View style={styles.container}>
      <Canvas style={{ flex: 1 }}>
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} />
 <mesh>
          <boxGeometry args={[2, 2, 2]} />
          <meshStandardMaterial color="orange" />
        </mesh>
      </Canvas>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
});

Explanation of the Code

1. Canvas:some text
   • Acts as the root container for the 3D scene, similar to a <div> in Three.js.
   • It provides the rendering context for Three.js.
     
     
2. ambientLight:some text
   • Adds soft light to the entire scene.
   • intensity: Controls the brightness of the light.
     
     
3. pointLight:some text
   • A light source that emits light from a single point.
   • position: Specifies the light's position in 3D space.
     
     
4. mesh:some text
   • Represents a 3D object.
   • boxGeometry: Defines a cube with dimensions [width, height, depth].
   • meshStandardMaterial: Adds material to the object and sets its color.

‍

Platforms for Downloading 3D Models: CGTrader

What is CGTrader?

CGTrader is a platform for downloading and purchasing 3D models. It offers a vast collection of free and paid models, including those for games, animations, and visualizations.

Features of CGTrader:

1. Free and Paid Models:some text
   • Access a large repository of free 3D models.
   • Paid models are also available for professional use.
     
     
2. File Formats:some text
   • Models are available in popular formats like .obj, .fbx, .stl, and .gltf, which are compatible with Three.js.
     
     
3. Customizable Models:some text
   • Many models are editable, allowing you to tailor them to your needs.
     
     
4. Community Support:some text
   • A thriving community of 3D designers provides support and inspiration.

Creating Custom 3D Models

If you need bespoke 3D models, you can create them using powerful tools like:

1. Blender:

• Open-source and widely used for creating 3D models, animations, and effects.
• Export models in .gltf, .fbx, or .obj formats for use with Three.js.

2. Autodesk Maya:

• A professional tool for creating detailed 3D models and animations.
• Ideal for games and cinematic visuals.

3. Cinema 4D:

• A beginner-friendly 3D modeling tool with advanced rendering capabilities.
• Frequently used for motion graphics and animations.

4. Adobe Substance 3D:

• Specialized in creating textures and materials for 3D models.
• Works seamlessly with models exported from other tools like Blender.

Importing and Using 3D Models in React Native

Here’s how to import a 3D model (e.g., .gltf file) and render it in your app:

Example Code

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { Canvas, useLoader } from '@react-three/fiber';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

export default function ThreeDModel() {
  const model = useLoader(GLTFLoader, './path-to-your-model.gltf');

  return (
    <View style={styles.container}>
      <Canvas style={{ flex: 1 }}>
        <ambientLight intensity={0.5} />
        <pointLight position={[10, 10, 10]} />
        <primitive object={model.scene} scale={1.5} />
      </Canvas>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#000',
  },
});

Explanation of the Code

1. GLTFLoader:some text
   • Used to load .gltf or .glb files (widely used formats for 3D models).
     
     
2. useLoader:some text
   • A hook provided by @react-three/fiber to load external assets.
     
     
3. primitive:some text
   • Renders the loaded 3D model into the scene.
   • object: The 3D model object.
   • scale: Adjusts the size of the model.

Running the App

Android:

Run:

npx react-native run-android

iOS:

Run:

npx react-native run-ios

Conclusion

Using Three.js and @react-three/fiber in React Native opens up endless possibilities for creating 3D graphics and animations. Platforms like CGTrader provide a vast repository of models, while tools like Blender and Maya enable custom model creation.

By combining these technologies, you can build visually engaging and interactive applications for Android and iOS. Dive into the world of 3D graphics and take your apps to the next level!

LEARN MORE 

Video 1 : https://www.youtube.com/watch?v=1ahs5R1mPhw

Video 2: https://www.youtube.com/watch?v=GyPyBysxvg4

Happy coding! 🎉