Realme GT 6T — Realistic 3D Smartphone Model (Three.js r166)

[ALAN_JOSEPH_MONICHAN]

Realme GT 6T — Realistic 3D Smartphone Model (Three.js r166)

Hey everyone ,

I’d like to share my latest Three.js project — a fully procedural 3D model of the Realme GT 6T smartphone.

Live Demo:
https://alanjoseph77.github.io/RealmeGT_6T_3dModel/

Source Code (GitHub):
https://github.com/alanjoseph77/RealmeGT_6T_3dModel

---

Project Overview

This project recreates the Realme GT 6T smartphone in 3D using pure Three.js —
no imported 3D models or texture assets.
All visual details (back panel, logo, glass, mirror finish) are generated dynamically via the Canvas API and custom shaders.

---

Features

• Procedural Textures

  • Dynamic “realme” branding
  • Mirror & matte dual-finish back panel
  • Three color variants: Fluid Silver, Razor Green, Miracle Purple

• Lighting & Reflections

  • Multi-light setup (key, fill, rim, and hemisphere)
  • Realistic reflections via HDRI environment (RGBELoader)

• Mobile Optimized

  • Adaptive pixel ratio & shadow toggles
  • Touch-optimized OrbitControls
  • Responsive GUI layout

• Interactive Controls

  • Switch colors and camera angles using lil-gui
  • Snap to Front, Rear 3/4, or Side views instantly

---

Tech Stack

Library / API	Purpose
Three.js (r166)	3D rendering engine
OrbitControls	Camera navigation
RGBELoader	HDRI environment reflections
RoundedBoxGeometry	Realistic phone body geometry
lil-gui	GUI for color & view control

---

---

Notes

• No external .glb or .obj files — everything is procedural.
• Uses only browser-side code, served via GitHub Pages.
• Designed to demonstrate real-time material realism and procedural design in Three.js.

---

Author

Alan Joseph
GitHub
Live Demo

---

Feedback Welcome

I’d love to hear your thoughts, suggestions, and optimization ideas from the community!
Feel free to test it on desktop and mobile — performance tweaks and reflections vary by device.

Thanks for checking it out!