DIGITALFORGERYWORKSHOP
CREATIVE DESIGN STUDIO FOR VIRTUAL / SPATIAL WEB
© 2024 DFW, All rights reserved Milan, Italy EST.2021
Open Source Avatars Viewer Implementation Guide
I'll organize this project into detailed requirements and an implementation strategy broken down into 5 key parts, just as you requested. This guide will ensure your Wix HTML viewer can display 3D avatars with all the functionality you described.
Project Requirements Overview
Core Functionality
-
Display 3D GLB models with animations
-
Avatar selection sidebar with thumbnails
-
Detailed avatar information display
-
Multiple viewing modes (animated, T-pose, wireframe)
-
Download and purchase options
-
Collection filtering system
-
Search functionality
-
Support for advanced GLB features (Draco, MeshPT, KTX2 compression)
-
3D artwork toggle capability
-
Loading indicator with percentage
Viewer Specifications
-
Transparent background (no grid)
-
Camera rotation only (no panning)
-
HDRI lighting for optimal material rendering
-
Support for PBR materials (roughness, metalness, diffuse, emission, normal maps)
-
Performance optimization
Implementation Strategy
Part 1: Visual Layout & UI Structure
-
Main container layout (sidebar, viewer, info panel)
-
Collection filtering system
-
Search functionality
-
Responsive design elements
-
UI components (buttons, toggles, loading indicator)
Part 2: Lighting & Material Systems
-
HDRI environment setup
-
PBR material rendering
-
Optimization for different material types
-
Transparent background implementation
Part 3: Animation & GLB Engine
-
GLB loader with compression support
-
Animation system (default/T-pose toggle)
-
Camera controls (rotation only)
-
Wireframe mode implementation
Part 4: Content Management
-
Avatar data structure
-
Dynamic content loading
-
Link handling for purchases/downloads
-
Thumbnail integration
Part 5: Interactive Features
-
Avatar/artwork switching logic
-
Collection filtering
-
Search functionality
-
Loading indicator
-
Download/purchase button conditionals
DIGITALFORGERYWORKSHOP
CREATIVE DESIGN STUDIO FOR VIRTUAL / SPATIAL WEB
© 2024 DFW, All rights reserved Milan, Italy EST.2021
BÖYLE B,R ARAYÜZE İHTİYACIM VAR. WİX HTML VİEWER ÜZERİNDE OLMALI- ONA GÖRE KODLA. SOLDA SUTUN HALİNDE TIKLAYABİLECEĞİMİZ AVATARLAR OLMALIDIR. PROPORSİYONLARI BÖYLE KALSIN. ORTADA BİR ANİMATED GLB LOOP DÖNECEKTİR. BU GLB DRACO MESHPT KTX2 GİBİ COMPRESSİONLARI BARINDIRABİLİR. ONA GÖRE YAP. KAMERA BU ŞEKİLDE GÖZÜKMELİDİR. PAN YAPMAMALIYIZ, SADECE ETRAFINDA ROTATE EDEBİLİRİZ. MODEL ANIMATED OLARAK DEFAULT GÖZÜKÜR, ÜSTTE BİR TUŞ VARDIR BASILDIĞI ZAMAN T-POSE OLARAK GÖZÜKÜR, AYNI ŞEKİLDE WİREFRAME GÖRMEK İÇİN BİR TUŞ DA OLMALDIIR. HER BİR AVATARIN KODUN CONTENT KISMINDA, İSMİ, AİT OLDUĞU KOLEKSİYON, GÖSTERİLECEK JPEH THUMBNAIL LINKI, DOWNLOAD LİNKİ, LİNSANSI, SATIN ALMA LİNKİ, VE NOTE KISMINDA DA AÇIKLAMA YAZISI BULUNUR. ALTTA DOWNLOAD VRM YAZAN YERDE DOWNLOAD VRM, BUY VRM, VIEW 3D ARTWORK, BUY 3D ARTWORK YAZAR. HER BİRİNİN KONTENTTE YERİ VARDIR, EĞER NULL YAZIYORSA KODDA YANINDA GÖSTERİLMEZ. TUŞ OLARAK O AVATAR TIKLANDIĞI ZAMAN. BUY VRM VE BUY 3D ARTWORK KODDA YERLEŞTİRİLMİŞ LİNKİ YENİ SEKMEDE AÇAR. VIEW 3D ARTWORK TIKLANDIĞI ZAMAN ASIL GÖSTERİLEN ANA GLB DOSYASI YERİNE, 3D ARTWORK ÜN YANINDA YAZAN GLB DOSYASI GÖSTERİLİR. 3D ARTWORK GÖSTERİLİRKEN, VIEW 3D ARTWORK TUŞU VIEW AVATAR'A DÖNÜŞÜR. VIEW AVATAR TIKLANDIĞI ZAMAN İSE GENE VİEW 3D ARTWORK E DÖNÜŞÜR VE ANA GLB VİEWER DA ANIMATED AVATAR GLBSİNİ YANI KONTENTTE EN ÜSTTE GÖRÜNEN GLB LİNKİNİ DİSPLAY EDERİZ. BU BİRBİRİLERİYLE SÜREKLİ AKILLI BİR ŞEKİLDE TIKLANDIKÇA DÖNÜŞÜR. EĞER 3D ARTWORK KISMI "NULL" İSE, O ZAMAN O TUŞU GÖRMEYİZ VE BU DÖNÜŞÜM SAĞLANMAZ. EĞER DOWNLOAD DA NULL YAZIYORSA, O ZAMAN O TUŞU DA GÖRMEYİZ AŞAĞIDA. BU HEPSİ İÇİN GEÇERLİDİR.
HER YÜKLEMEDE FORGING... VE YÜZDE KAÇ YÜKLENDİĞİNİ GÖSTEREN YÜKLENME DOSYASI OLMALDIR.
SOLDAKİ BARDA İSİMLERİ VE ALTTA DA AYNI ŞEKİLDE KOLEKSİYONLARI YAZAR.
SCREENSHOTTAKİ GİBİ SEARCH BUTTONU BULUNUR VE İSİMDEN VEYA KOLEKSİYONDAN ARAMA YAPILABİLİR.
FAKAR SELECT DESELECT KISMI YERİNE KOLEKSİYONALRIN İSMİ YAZILIDIR, 6-7 TANE KOLEKSİYON OLACAK, ORDA TIKLANDIĞI ZAMAN FİLTRELENİR. KONTENT KISMINDA KOLEKSİYON OLARAK BÖLÜNÜR.
EN BAŞTA SEÇİLİ OLAN EN BAŞTAKİ KOLEKSİYONDUR, SADECE O KOLEKSİYONUN CONTENTİNİ YANDA GÖRÜRÜZ, ONUN BAŞLIĞI 800 THİCKNESS LA YAZAR- SEÇİLİ OLDUĞU İÇİN, DİĞERLERİ NORMAL YAZILIDIR.
SCREENSHOTTAKİ GİBİ GLB VİEWERİN İÇİNDE BİR GRİD YA DA MEKAN GÖRMEYİZ, TRANSPARENT BİR BACKGROUND VARDIR.
ROUGHNESS METALLNESS DİFFUSE EMİSSİON NORMAL MAP GİBİ MALZEMELERİ OLAN GLB DOSYALARINI GÖSTERECEĞİZ. DOLAYISIYLA BU ORGANİZE GLB VİEWERIN BUNLARI EN İYİ ŞEKİLDE GÖSTERMESİ GEREKMEKTEDİR. ARTIFICAL IŞIK-YANI NOKTASAL IŞIK VS KULLANILMAMALIDIR PERFORMANS AÇISINDAN, HAFİF VE HOMOJEN IŞIK VEREN AZ MB2LI BİR HDRI KULLANILACAKTIR, VE BU HDRI KONTENT KISMINDA GİTHUBDAN LİNKENECEKTİR.
BU PROJENİN TÜM GEREKSİNİMLERİNİ, ANLATTIĞIM ENNN UFAK DETAYINA KADAR! TEK TEK ORGANİZE ET, LİSTELE, VE NELER GEREKİYOR NASIL YAPILMALDIR ANLATAN DETAYLI BİR GUİDE OLUŞTUR. BİR İMPLEMENTATİON STRATEJİSİ GELİŞTİR VE HATASIZ 5 PROMPTTA, PARÇALARA BÖLÜNMÜŞ BAĞIMSIZ BİR UYGULAMA STRATEJİSİ OLMALDIIR. PART 5İ GELİŞTİR DEDİĞİM ZAMAN, YA DA PART 3Ü DİREK ORAYA ODAKLANMALIDIR. BU 5 KISIM 1-GÖRÜNÜŞ LAYOUTU 2- IŞIK VE MALZEME MOTORLARI 3- ANİMASYON VE GLB MOTORLARI, VİEWER MOTORU 4- KONTENT GELİŞTİRME 5- YAN FAKTÖRLER OLARAK KAFAMDA DÜŞÜNDÜM, EĞER DAHA İYİ BİR ÖNERİN VARSA LÜTFEN BELİRT.
HER BİR KOD, ALT ALTA KOPYALANDIĞI ZAMAN KUSURSUZ ÇALIŞACAK ŞEKİLDE OLMALDIR.
WİX HTML VİEWERDA ÇALIŞACAK BİR KODDAN BAHSEDİYORUZ.