Carte de visite 3D

L'histoire de sa construction

L'idée était simple : remplacer la carte de visite papier classique par une expérience web immersive. La carte Deladev se présente en trois dimensions, avec un rendu WebGL directement dans le navigateur — aucun plugin, aucune app, juste une URL. Techniquement, le projet repose entièrement sur Three.js pour la gestion de la scène 3D, la lumière, les matériaux et les animations. La carte réagit à l'interaction utilisateur, créant un effet de profondeur et de relief qui valorise l'identité visuelle Deladev. Ce projet m'a permis d'explorer les fondamentaux de WebGL via Three.js : gestion de caméra, éclairage PBR, chargement de textures et optimisation des performances pour un rendu fluide sur mobile comme sur desktop.

Technologies utilisées

• Git
• JavaScript
• HTML
• CSS
• Three.js

J'en ai bavé mais j'y suis arrivé 🚀

import * as THREE from 'three';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.set(0, 0, 3);

const geometry = new THREE.PlaneGeometry(1.8, 1);
const texture = new THREE.TextureLoader().load('/assets/carte-deladev.png');
const material = new THREE.MeshStandardMaterial({
  map: texture,
  roughness: 0.3,
  metalness: 0.1,
});

const card = new THREE.Mesh(geometry, material);
scene.add(card);

window.addEventListener('mousemove', (e) => {
  const x = (e.clientX / window.innerWidth - 0.5) * 0.8;
  const y = -(e.clientY / window.innerHeight - 0.5) * 0.8;
  card.rotation.y = x;
  card.rotation.x = y;
});