Beginner’s Introduction to Creating 3D Animations in React Native with Three.js

Posted on 29 Oct 2025

16 minutes read

Lopa Das

Senior Project Manager – Web Development

Lopa Das

Senior Project Manager – Web Development

With over 13 years of experience, Lopa Das is a seasoned professional at iFlair Web Technologies Pvt Ltd, specializing in web and mobile app development.... See Full Bio

Building an Interactive 3D Nike Shoe Experience with React Three Fiber
Implementation Steps
Challenges & Solutions
Diagrams & Visuals
The Way Forward
Conclusion

Add us as a preferred source on Google

Summary

Learn how to configure React Native with React Three Fiber and install the required libraries to start building 3D experiences.
Understand how to build a 3D scene using Canvas, cameras, lighting, and basic geometries for interactive applications.
Explore how to import GLTF/GLB models and efficiently render them using React Three Fiber and the Drei library.
Implement smooth animations, camera controls, and interactive elements to create engaging user experiences.
Learn best practices for reducing rendering overhead, improving frame rates, and delivering a seamless mobile experience.
Apply these concepts to create immersive React Native applications with scalable architecture and modern development practices.

Building an Interactive 3D Nike Shoe Experience with React Three Fiber

Three-dimensional (3D) graphics are becoming increasingly popular in mobile applications, providing visually stunning and highly interactive experiences. Three.js is a popular JavaScript library for rendering 3D graphics using WebGL. In React Native, we can leverage React Three Fiber, a React renderer for Three.js that enables the creation of interactive 3D scenes through reusable React components and built-in state management.

In this blog, I demonstrate how I integrated a 3D Nike shoe model into a React Native project, added animations, and used the device’s gyroscope to make it interactive.

Creating Interactive 3D Graphics in React Native with Three.jsRead More

Project Overview

Aspect	Description
Objective	A React Native app that renders 3D models with interactivity and animations was built.
Problem Statement	Standard 2D interfaces can be limiting. The addition of 3D models and animations makes the apps more immersive.
Outcome	Users can view, rotate, and interact with 3D models of products (Nike shoes) animated using sensor data.

Key Features

Feature	Description
3D Model Rendering	Load OBJ/MTL 3D shoe models using React Three Fiber and Three.js loaders.
Lighting & Materials	AmbientLight and pointLight are used for realistic lighting, and textures are applied for color, normals, and roughness.
Reusable Components	Build reusable 3D components (boxes, shoes, etc.) that respond to state changes.
Animations	Rotate and animate 3D objects using the useFrame hook.
Sensor Interaction	Gyroscope data were used via react-native-reanimated to rotate the shoe based on the device movement.

Technology Stack

Layer	Technology
Frontend	React Native, React Three Fiber
3D Rendering	Three.js, expo-gl, expo-three
State Management	React State / Context API
Sensors	react-native-reanimated (gyroscope)
Assets	OBJ, MTL, and texture files (jpg, png)

Implementation Steps

Step 1 — Project Setup


npx create-expo-app FirstThreeApp
npm start
Install dependencies:
npx expo install three @react-three/fiber expo-gl expo-three expo-file-system react-native-reanimated

Step 2 — Canvas & Basic 3D Object


import { Canvas } from '@react-three/fiber';
export default function App() {
  return <Canvas>
<ambientLight />
<pointLight position={[10, 10, 10]} />
<mesh>
<sphereGeometry />
<meshStandardMaterial color="orange" />
</mesh>
</Canvas>
}

Step 3 — Reusable Components


function Box(props) {
  return (
<mesh {...props}>
<boxGeometry args={[1, 1, 1]} />
<meshStandardMaterial color="orange" />
</mesh>
  );
}
Render multiple boxes:
<Box position={[0, -1.2, 0]} />
<Box position={[0, 1.2, 0]} />
Animate using useFrame:
const mesh = useRef();
useFrame((state, delta) => (mesh.current.rotation.y += delta));

Step 4 — Rendering 3D Shoe Model

Metro bundler configuration for assets


// metro.config.js
module.exports = {
  resolver: {
    sourceExts: ['js', 'jsx', 'json', 'ts', 'tsx', 'cjs'],
    assetExts: ['glb', 'gltf', 'mtl', 'obj', 'png', 'jpg'],
  },
};
Load OBJ/MTL files:
import { useLoader } from '@react-three/fiber';
import { OBJLoader } from 'three/examples/jsm/loaders/OBJLoader
import { MTLLoader } from 'three/examples/jsm/loaders/MT
const material = useLoader(MTLLoader, require('. /assets/Airmax/shoe.mtl'));
const obj = useLoader(OBJLoader, require('./assets/Airmax/shoe.obj'), loader => {
  material.preload();
  loader.setMaterials(material);
});
Rendering the Shoe with textures:
import { TextureLoader } from 'expo-three';
const [base, normal, rough] = useLoader(TextureLoader, [
  require('./assets/Airmax/textures/BaseColor.jpg'),
  require('./assets/Airmax/textures/Normal.jpg'),
  require('./assets/Airmax/textures/Roughness.png'),
]);
useLayoutEffect(() => {
  obj.traverse((child) => {
    if (child instanceof THREE.Mesh) {
      child.material.map = base texture;
      child.material.normalMap = normal;
      child.material.roughnessMap = rough
    }
  });
}, [obj]);

Step 5 — Animate with Gyroscope


import { useAnimatedSensor, SensorType } from 'react-native-reanimated';
const animatedSensor = useAnimatedSensor(SensorType.GYROSCOPE, { interval: 100 });
useFrame((state, delta) => {
  let { x, y } = props.animatedSensor.sensor.value
  mesh.current.rotation.x += x / 5000
  mesh.current.rotation.y += y / 5000.
});

Moving the phone rotates the shoe in real time, thereby adding an interactive experience.

Challenges & Solutions

Challenge	Solution
Managing 3D assets	Configure the metro bundler to handle OBJ/MTL/glb files.
Performance on mobile	Use useFrame efficiently and optimize the texture sizes.
Lighting realism	AmbientLight and pointLight are combined.
Sensor-based animation	Smooth gyroscope values and scale rotation were used for stability.

Diagrams & Visuals

Project Structure Diagram


/FirstThreeApp
├── assets
│ └── Airmax
│ ├── shoe.obj
│ ├── shoe.mtl
│ └── textures/
├── App.js
├── components/
│ ├── Box.js
│ └── Shoe.js
├── metro.config.js

3D Scene Flow:


Canvas
├── Lights
├── 3D Objects
│ ├── Boxes
│ └── Shoe
└── Animated via useFrame & Sensors

Interaction Flow:

User tilts device → AnimatedSensor → useFrame → 3D Model rotates

Start Building 3D Animations in React Native Today

The Way Forward

By combining React Native, Three.js, and React Three Fiber, we created interactive, sensor-driven 3D experiences on mobile devices. Using reusable components, proper lighting, and animations, realistic 3D models such as Nike shoes can be rendered, and users can be provided with an engaging interface.

This approach can be extended to AR visualizations, product previews and interactive storytelling apps.

Video Reference:

Nike 3D App Demo 1
Nike 3D App Demo 2

Conclusion

The decision isn’t whether staff augmentation is good or bad. It’s whether you have a capacity gap you can direct or a capability gap you can’t. If you have the leadership to run the work, a clear enough roadmap for a senior hire to ramp up in weeks, and a need that fits within an 18-month horizon, staff augmentation can give you speed and specialized skills without the fixed cost and hiring risk of permanent headcount. If any of these are missing, a dedicated team, managed build, or stronger internal leadership may serve you better. And you don’t need to do the math alone; a free 2-hour consultation can help you get clarity on which model fits your situation.

Frequently Asked Questions

What is React Three Fiber, and why use it in React Native?

React Three Fiber is a React renderer for Three.js. It lets you build 3D scenes using reusable React components instead of imperative Three.js code. In React Native, it works with expo-gl and expo-three, so you can manage 3D objects with state, props, and hooks just like any other component.

Which 3D model formats can I use in a React Native app?

You can use OBJ/MTL, GLB, and GLTF files. This blog uses OBJ/MTL with texture files (JPG/PNG). GLB/GLTF is often preferred because it packs the geometry, materials, and textures into a single optimized file. Make sure the formats are listed in assetExts in your metro.config.js.

Do I need Expo to use Three.js in React Native?

Not strictly, but Expo makes setup much easier. Packages like expo-gl, expo-three, and expo-file-system provide the WebGL context and asset loading that Three.js needs on mobile. Bare React Native projects can also use them with some extra configuration.

How does the gyroscope make the 3D model move?

The useAnimatedSensor hook from react-native-reanimated reads gyroscope values (x and y). Inside the useFrame loop, those values are scaled down and added to the model’s rotation. As the user tilts the phone, the shoe rotates in real time.