non ce n'est pas réaliste. Je veux

index.html

@@ -88,146 +88,87 @@
         });
         renderer.setPixelRatio(window.devicePixelRatio);
         renderer.setSize(canvasContainer.clientWidth, canvasContainer.clientHeight);
-        // === Create Realistic Female Face ===
+        // === Create Abstract Face Mesh ===
         const headGroup = new THREE.Group();
         scene.add(headGroup);
 
-        // Head (Ellipsoid for more realistic shape)
-        const headGeometry = new THREE.SphereGeometry(1.8, 64, 64);
-        headGeometry.scale(0.8, 1.1, 0.9); // More oval shape
+        // Main face shape (simple sphere)
+        const headGeometry = new THREE.SphereGeometry(1.5, 32, 32);
         const headMaterial = new THREE.MeshStandardMaterial({ 
-            color: 0xF5D0B9,
-            roughness: 0.4,
-            metalness: 0.1,
-            map: new THREE.TextureLoader().load('https://static.photos/people/1024x576/35')
+            color: 0x3498db,
+            wireframe: true,
+            transparent: true,
+            opacity: 0.8
         });
         const head = new THREE.Mesh(headGeometry, headMaterial);
         headGroup.add(head);
 
-        // Eyes
-        const eyeGeometry = new THREE.SphereGeometry(0.25, 32, 32);
+        // Eyes (simple dots)
+        const eyeGeometry = new THREE.SphereGeometry(0.15, 16, 16);
         const eyeMaterial = new THREE.MeshStandardMaterial({ 
-            color: 0xffffff,
-            roughness: 0.1,
-            metalness: 0.1
+            color: 0x2ecc71,
+            emissive: 0x2ecc71,
+            emissiveIntensity: 0.5
         });
         
         // Left Eye
         const eyeLeft = new THREE.Mesh(eyeGeometry, eyeMaterial);
-        eyeLeft.position.set(-0.7, 0.3, 1.8);
+        eyeLeft.position.set(-0.5, 0.2, 1.2);
         headGroup.add(eyeLeft);
 
         // Right Eye
         const eyeRight = new THREE.Mesh(eyeGeometry, eyeMaterial.clone());
-        eyeRight.position.set(0.7, 0.3, 1.8);
+        eyeRight.position.set(0.5, 0.2, 1.2);
         headGroup.add(eyeRight);
 
-        // Pupils
-        const pupilGeometry = new THREE.SphereGeometry(0.12, 32, 32);
-        const pupilMaterial = new THREE.MeshStandardMaterial({ 
-            color: 0x4A2C12,
+        // Mouth (simple line)
+        const mouthGeometry = new THREE.TorusGeometry(0.3, 0.02, 8, 32, Math.PI);
+        const mouthMaterial = new THREE.MeshStandardMaterial({ 
+            color: 0xe74c3c,
+            emissive: 0xe74c3c,
+            emissiveIntensity: 0.3
         });
-        
-        // Left Pupil
-        const pupilLeft = new THREE.Mesh(pupilGeometry, pupilMaterial);
-        pupilLeft.position.set(0, 0, 0.25);
-        eyeLeft.add(pupilLeft);
-
-        // Right Pupil
-        const pupilRight = new THREE.Mesh(pupilGeometry, pupilMaterial.clone());
-        pupilRight.position.set(0, 0, 0.25);
-        eyeRight.add(pupilRight);
-
-        // Eyelashes
-        const eyelashGeometry = new THREE.ConeGeometry(0.02, 0.15, 4);
-        const eyelashMaterial = new THREE.MeshBasicMaterial({ color: 0x000000 });
-        
-        // Left Eyelashes
-        for (let i = 0; i < 8; i++) {
-            const angle = (i / 8) * Math.PI * 0.5 - Math.PI * 0.25;
-            const eyelash = new THREE.Mesh(eyelashGeometry, eyelashMaterial);
-            eyelash.position.set(-0.7 + Math.cos(angle) * 0.3, 0.3 + Math.sin(angle) * 0.3, 1.85);
-            eyelash.rotation.z = angle;
-            headGroup.add(eyelash);
-        }
-
-        // Right Eyelashes
-        for (let i = 0; i < 8; i++) {
-            const angle = (i / 8) * Math.PI * 0.5 - Math.PI * 0.25;
-            const eyelash = new THREE.Mesh(eyelashGeometry, eyelashMaterial.clone());
-            eyelash.position.set(0.7 + Math.cos(angle) * 0.3, 0.3 + Math.sin(angle) * 0.3, 1.85);
-            eyelash.rotation.z = angle;
-            headGroup.add(eyelash);
-        }
-
-        // Nose (more refined)
-        const noseGeometry = new THREE.ConeGeometry(0.3, 0.6, 32);
-        const noseMaterial = new THREE.MeshStandardMaterial({ 
-            color: 0xE8BBA5,
-            roughness: 0.4
+        const mouth = new THREE.Mesh(mouthGeometry, mouthMaterial);
+        mouth.position.set(0, -0.3, 1.2);
+        mouth.rotation.x = Math.PI / 8;
+        headGroup.add(mouth);
+
+        // Facial points (abstract representation)
+        const pointsGeometry = new THREE.SphereGeometry(0.05, 8, 8);
+        const pointsMaterial = new THREE.MeshStandardMaterial({ 
+            color: 0xf1c40f,
+            emissive: 0xf1c40f,
+            emissiveIntensity: 0.2
         });
-        const nose = new THREE.Mesh(noseGeometry, noseMaterial);
-        nose.position.set(0, 0, 1.9);
-        nose.rotation.x = Math.PI / 10;
-        headGroup.add(nose);
 
-        // Lips
-        const lipGeometry = new THREE.TorusGeometry(0.4, 0.08, 16, 32, Math.PI);
-        const lipMaterial = new THREE.MeshStandardMaterial({ 
-            color: 0xC45C6B,
-            roughness: 0.3,
-            metalness: 0.2
+        // Create facial points
+        const pointsPositions = [
+            [0, 0.5, 1.3],  // Forehead
+            [-0.3, -0.1, 1.3], // Left cheek
+            [0.3, -0.1, 1.3],  // Right cheek
+            [0, 0.1, 1.5]     // Nose
+        ];
+
+        pointsPositions.forEach(pos => {
+            const point = new THREE.Mesh(pointsGeometry, pointsMaterial.clone());
+            point.position.set(pos[0], pos[1], pos[2]);
+            headGroup.add(point);
         });
-        const lips = new THREE.Mesh(lipGeometry, lipMaterial);
-        lips.position.set(0, -0.3, 1.7);
-        lips.rotation.x = Math.PI / 8;
-        headGroup.add(lips);
-
-        // Eyebrows
-        const eyebrowGeometry = new THREE.BoxGeometry(0.5, 0.05, 0.02);
-        const eyebrowMaterial = new THREE.MeshStandardMaterial({ color: 0x3A2A1A });
-        
-        // Left Eyebrow
-        const leftEyebrow = new THREE.Mesh(eyebrowGeometry, eyebrowMaterial);
-        leftEyebrow.position.set(-0.7, 0.5, 1.8);
-        leftEyebrow.rotation.z = -0.2;
-        headGroup.add(leftEyebrow);
-
-        // Right Eyebrow
-        const rightEyebrow = new THREE.Mesh(eyebrowGeometry, eyebrowMaterial.clone());
-        rightEyebrow.position.set(0.7, 0.5, 1.8);
-        rightEyebrow.rotation.z = 0.2;
-        headGroup.add(rightEyebrow);
-
-        // Hair (simplified)
-        const hairGeometry = new THREE.SphereGeometry(2.0, 32, 32);
-        hairGeometry.scale(0.9, 1.2, 1.0);
-        const hairMaterial = new THREE.MeshStandardMaterial({ 
-            color: 0x4B3A2D,
-            roughness: 0.8,
-            metalness: 0.1
-        });
-        const hair = new THREE.Mesh(hairGeometry, hairMaterial);
-        hair.position.set(0, 0.4, 0);
-        headGroup.add(hair);
-        // Enhanced Lighting
-        const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+        // Abstract Lighting
+        const ambientLight = new THREE.AmbientLight(0x333333, 0.8);
         scene.add(ambientLight);
 
-        const directionalLight = new THREE.DirectionalLight(0xffffff, 1.2);
-        directionalLight.position.set(3, 5, 5);
-        directionalLight.castShadow = true;
-        directionalLight.shadow.mapSize.width = 1024;
-        directionalLight.shadow.mapSize.height = 1024;
-        scene.add(directionalLight);
+        const directionalLight1 = new THREE.DirectionalLight(0x3498db, 0.8);
+        directionalLight1.position.set(5, 3, 5);
+        scene.add(directionalLight1);
 
-        const fillLight = new THREE.DirectionalLight(0xffffff, 0.5);
-        fillLight.position.set(-3, 2, 3);
-        scene.add(fillLight);
+        const directionalLight2 = new THREE.DirectionalLight(0xe74c3c, 0.5);
+        directionalLight2.position.set(-5, 3, 5);
+        scene.add(directionalLight2);
 
-        const rimLight = new THREE.DirectionalLight(0xffffff, 0.3);
-        rimLight.position.set(0, 3, -5);
-        scene.add(rimLight);
+        const directionalLight3 = new THREE.DirectionalLight(0x2ecc71, 0.3);
+        directionalLight3.position.set(0, -5, 5);
+        scene.add(directionalLight3);
 // === Controls ===
         const sliderY = document.getElementById('rotate-y');
         const sliderX = document.getElementById('rotate-x');
@@ -254,27 +195,25 @@
             rotateYValue.textContent = '0°';
             rotateXValue.textContent = '0°';
         });
-        // Animation Loop with subtle blinking
-        let blinkTimer = 0;
-        let blinkState = false;
+        // Animation Loop with pulsing effect
+        let pulseDirection = 1;
+        let pulseIntensity = 0;
         
         function animate() {
             requestAnimationFrame(animate);
             
-            // Blinking animation
-            blinkTimer += 0.01;
-            if (blinkTimer > 5 && !blinkState) {
-                eyeLeft.scale.y = 0.05;
-                eyeRight.scale.y = 0.05;
-                blinkState = true;
-                blinkTimer = 0;
-            } else if (blinkTimer > 0.1 && blinkState) {
-                eyeLeft.scale.y = 1;
-                eyeRight.scale.y = 1;
-                blinkState = false;
-                blinkTimer = 0;
+            // Pulsing animation
+            pulseIntensity += 0.01 * pulseDirection;
+            if (pulseIntensity > 0.3 || pulseIntensity < 0) {
+                pulseDirection *= -1;
             }
             
+            headGroup.children.forEach(child => {
+                if (child.material && child.material.emissiveIntensity !== undefined) {
+                    child.material.emissiveIntensity = 0.2 + pulseIntensity;
+                }
+            });
+            
             renderer.render(scene, camera);
         }
 // Handle Window Resize