Retour aux projets
En cours
Veriflamme
Veriflamme est une plateforme web dediee a la restauration de tapis. Le site combine WordPress et Elementor pour une gestion de contenu facile, avec des fonctionnalites avancees comme le suivi de commandes en temps reel et une expertise visuelle 3D via Three.js. Le projet vise a digitaliser l'ensemble du parcours client.
Stack technique
Technologies utilisees
WordPress
CMS
Elementor Pro
Page builder
PHP
Backend custom
Three.js
Visualisation 3D
WooCommerce
E-commerce
MySQL
Base de donnees
Fonctionnalites
Points cles
Visualisation 3D
Apercu des tapis restaures en Three.js
Suivi commandes
Tracking en temps reel
Devis en ligne
Formulaire detaille avec upload photos
Catalogue interactif
Filtres et recherche avancee
Espace client
Dashboard personnel
Paiement securise
Stripe via WooCommerce
Approche
Processus de developpement
Analyse metier
Comprehension du processus de restauration
Architecture WordPress
Theme custom, plugins, WooCommerce
Integration 3D
Setup Three.js, modeles, interactions
Tests & Optimisation
Performance, securite, UX mobile
Code
Apercu technique
three-viewer.js
1// three-viewer.js - Setup scene Three.js
2import * as THREE from 'three';
3import { OrbitControls } from 'three/addons/controls/OrbitControls';
4import { GLTFLoader } from 'three/addons/loaders/GLTFLoader';
5
6const initViewer = (container) => {
7 const scene = new THREE.Scene();
8 const camera = new THREE.PerspectiveCamera(
9 75, container.clientWidth / container.clientHeight,
10 0.1, 1000
11 );
12
13 const renderer = new THREE.WebGLRenderer({
14 antialias: true,
15 alpha: true
16 });
17 renderer.setSize(container.clientWidth, container.clientHeight);
18 container.appendChild(renderer.domElement);
19
20 // Eclairage
21 const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
22 scene.add(ambientLight);
23
24 const dirLight = new THREE.DirectionalLight(0xffffff, 0.8);
25 dirLight.position.set(5, 10, 7);
26 scene.add(dirLight);
27
28 // Chargement du modele 3D
29 const loader = new GLTFLoader();
30 loader.load('/models/tapis.glb', (gltf) => {
31 scene.add(gltf.scene);
32 camera.position.set(0, 2, 5);
33 });
34
35 // Controles orbitaux
36 const controls = new OrbitControls(camera, renderer.domElement);
37 controls.enableDamping = true;
38
39 const animate = () => {
40 requestAnimationFrame(animate);
41 controls.update();
42 renderer.render(scene, camera);
43 };
44 animate();
45};