React/Vite/Three.js 3D Development Specialist

# React + Vite + Three.js 3D Developer / Freelancer

## Project Overview

We are looking for an experienced **React + Vite + Three.js developer** to work on the development of reusable, lightweight, and interactive **3D modules, components, and elements** for a web-based industrial/warehouse visualization application.

The project involves creating **3D warehouse, conveyor, shuttle, VRC, storage, and material-handling components** that can be integrated into a larger React-based application.

The focus is on developing **clean, reusable, modular, and performance-optimized 3D components** rather than building a complete application from scratch.

## Required Technology Stack

* React.js
* Vite
* Three.js
* React Three Fiber (R3F)
* @react-three/drei
* GSAP for animations
* JavaScript / TypeScript
* HTML / CSS
* Git / GitHub

## Key Responsibilities

The freelancer will be responsible for:

* Developing reusable 3D React components using Three.js / React Three Fiber.
* Creating industrial/warehouse-related 3D elements such as:

* Conveyors
* Roller conveyors
* Chain conveyors
* VRC / Vertical Reciprocating Conveyors
* Shuttles
* Pallets
* Storage racks/bays
* Profile Checkers
* Sensors
* Beams and structural elements
* Charging stations
* Other material-handling equipment
* Creating configurable components where dimensions, positions, orientations, colors, labels, and statuses can be controlled through props or JSON data.
* Implementing smooth animations using GSAP and/or Three.js.
* Supporting dynamic movement of objects based on backend/API data.
* Creating components that can work in both different layouts and camera views where required.
* Optimizing 3D models and components for good browser performance.
* Maintaining clean and reusable React component architecture.
* Ensuring components can be easily integrated into an existing React/Vite application.
* Debugging visual, positioning, animation, and performance issues.

## Example Requirement

For example, a conveyor component should not be hardcoded for only one conveyor.

It should be configurable through properties such as:

* Length
* Width
* Height
* Position
* Rotation
* Conveyor type
* Roller count
* Conveyor status
* Pallet presence
* Label
* Label position/direction
* Color
* Animation state

The same component should be reusable for multiple conveyors with different configurations.

## 3D Performance Requirements

Performance is very important for this project.

The freelancer should have experience with:

* Optimizing Three.js scenes
* Reducing unnecessary geometry
* Reusing geometries and materials
* Instancing where appropriate
* Efficient rendering
* Avoiding unnecessary React re-renders
* Managing large numbers of 3D objects
* Optimizing animations
* Maintaining smooth interaction and camera controls

The final components should be **lightweight and suitable for a web-based industrial 3D visualization system**.

## Data-Driven Development

The components should be designed to work with dynamic JSON/API data rather than hardcoded values.

For example:

```js
{
conveyorNumber: "C0353",
conveyorType: "Chain",
position: {
x: 10,
y: 2,
z: 5
},
length: 12,
width: 2,
height: 1,
orientation: "horizontal",
isPalletPresent: true,
status: "running"
}
```

The component should render the 3D element based on the provided configuration.

## Animation Requirements

Experience with 3D animations is preferred.

Examples include:

* Conveyor movement
* Shuttle movement
* Pallet movement
* VRC up/down movement
* Sensor/laser animations
* Status indicators
* Loading/unloading animations
* Smooth object transitions
* Start/stop/error states

GSAP will be used where appropriate for smooth and controlled animations.

## UI / Visualization Requirements

The 3D elements may also require:

* Labels
* Status indicators
* Tooltips
* Hover effects
* Selection effects
* HTML overlays
* Camera interaction
* Different status colors
* Dynamic visibility
* Object highlighting

The freelancer should understand how to combine **Three.js 3D objects with React UI elements**.

## Code Quality

We expect:

* Clean and maintainable code
* Reusable components
* Proper component separation
* Meaningful naming conventions
* Minimal hardcoding
* Proper prop/configuration handling
* Good folder structure
* Comments where necessary
* Git-based development
* Easy integration with an existing React/Vite project

## Preferred Experience

Experience in the following areas is a strong advantage:

* React Three Fiber
* Three.js
* Industrial 3D visualization
* Warehouse visualization
* Digital Twin applications
* SCADA / HMI visualization
* ASRS / Automated Storage and Retrieval Systems
* Material Handling Systems
* Factory/industrial automation visualization
* Web-based 3D dashboards

## What We Will Provide

We can provide:

* Existing React/Vite project structure
* Existing Three.js/R3F components
* Reference images/videos
* 3D design requirements
* JSON/API data structures
* Component behavior requirements
* Visual references for industrial equipment
* Feedback during development

## Deliverables

The freelancer is expected to provide:

1. Reusable React Three Fiber components.
2. Configurable 3D industrial elements.
3. Smooth animations where required.
4. Integration-ready source code.
5. Performance-optimized implementation.
6. Properly structured and documented code.
7. Git commits/source code for completed work.
8. Any required supporting assets/configuration.

## Freelancer Requirements

Please apply only if you have practical experience with:

* React
* Vite
* Three.js
* React Three Fiber
* GSAP
* Interactive 3D web applications

Please include the following in your proposal:

1. Your experience with React Three Fiber and Three.js.
2. Examples/links to previous 3D web projects.
3. GitHub or portfolio link, if available.
4. Your experience creating reusable 3D components.
5. Your experience with performance optimization in Three.js.
6. Your hourly/project-based rate.
7. Your estimated availability per week.
8. Your expected timeline for completing individual components.

## Important

This is not simply a 3D modeling task.

We are specifically looking for a developer who can **build interactive, reusable, data-driven 3D components using React, Vite, Three.js, and React Three Fiber**.

The ideal freelancer should be comfortable converting 2D/reference designs into **functional and configurable web-based 3D components**.

We are interested in a long-term working relationship if the initial development work is successful.