NUI interface for FiveM
Every detail,an identity.
A 3D character panel for FiveM servers.
Character look panel with 3D, for roleplay servers.
- Next.js
- React
- Three.js
- Lua
NUI interface for FiveMEvery detail,an identity.
A 3D character panel for FiveM servers.
- Next.js
- React
- Three.js
- Lua
Character look panel with 3D, for roleplay servers.
- Next.js
- React
- Three.js
- Lua
Opening the file
Before the 3D, 16 bytes tell the size.
Each clothing piece arrives in a compressed file. The first 16 bytes say whether it's the right format and how much each part will take once opened. Change the pages and watch the bytes and sizes change together.
The first 16 bytes
System
Graphics
Once opened
512 × 8542.5 KB1,024 × 218218 KBUncompressed total260.5 KB
The math is the program's (PageSystem.ts): each flag stores page counts in bit groups (×1, ×2, ×4, ×8, ×16, ×32, ×64…) and, in the lowest 4 bits, the base size (512 bytes doubled n times). System holds the structures; graphics, vertices and textures. The values here are examples.
Your look, category by category.
Clothes and accessories organized in a dedicated panel.
17 slots · 7 categoriesThe panel stores no coordinates: it reads the name of each piece file and knows on its own where it goes. Pick a file, or type a name, and watch the name split and the right drawer open.
Examples
The part after ^, split
- Slot
- uppr
- Piece number
- 002
- Variant
- u · universal
- Category · type
- Shirt · Shirt
- In FiveM
- component 3
Shirt
Pants
Shoes
Hair
Hat
Glasses
Accessory
The rules are the program's (categorias.ts): drop the extension, take what comes after ^ and split on _; starting with p, it's a prop. There are 17 slots in 7 categories, and each slot has its number in FiveM. Position doesn't live here: the model's skeleton fits the piece on its own.
Original interface. Engineering behind it.
3D engine and model reading in TypeScript.
Three.js · React · FiveMOn the server, the panel fits itself into whatever system is already running. Turn resources on and off, change the mode and start: the chain tests in order and stops at the first one it finds.
Resources running on the server
What the server decides
- vRPvrp
- QBoxqbx_core
- QBCoreqb-core
- ESXes_extended
- Standalonelicense
The real screens
The rules are the program's (bridge.lua): wait 1 second, read the convar; in auto it tests vrp, qbx_core, qb-core and es_extended, in that order, and stops at the first one started; with none, standalone. An invalid name in the convar or a framework that doesn't respond also fall back to standalone, with an error in the log.
The technologies
What it is made of, piece by piece
An interface that runs inside the game server: a Next.js site exported as a FiveM screen, a Three.js 3D viewer with hand-written model readers in TypeScript, and a Lua bridge that talks to the server. Pick a piece to see what it does here and which file it is in.
9technologies, in 3 layers
Screen
3D
Server
Next project08 / 51
Roblox game creationRoblox Creator StudioA desktop app in Tauri, React, Rust and Python that generates and optimizes 3D, builds drivable cars, maps, places and forests, and applies every animation at once, straight into the gameTauri 2React 18Three.jsglTF Transform
← PreviousBlackout Casino