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

12 minutes read

Oct 29, 2025

8 Likes

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

Free Consultation

Lopa Das

Oct 29 2025

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. Her technical expertise spans across Laravel, PHP, CodeIgniter, CakePHP, React, Vue.js, Nuxt.js, iOS, Android, Flutter, and React Native. Known for her exceptional skills in team handling, client communication, presales, and risk analysis, Lopa ensures seamless project execution from start to finish. Her proficiency in Laravel CRM, Next.js, and mobile app development makes her a valuable asset in delivering robust, scalable solutions.