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

Posted on 29 Oct 2025

11 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

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.

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