Aller au contenu
Documentation / 3D Configurator - Setup

Configuration 3D Configurator

Configurez le configurateur 3D avec Three.js pour des expériences produit immersives.

Installation

 npm install @luneo/3d three @react-three/fiber @react-three/drei

Exemple de base

 import { ProductConfigurator3D } from '@luneo/3d'; export default function Configurator() { return ( <ProductConfigurator3D productId="shoe-sneaker" modelUrl="/models/shoe.glb" config={{ camera: { position: [0, 2, 5], fov: 45 }, lights: { ambient: 0.5, directional: 1.0 }, materials: { changeable: ['upper', 'sole', 'laces'] }, colors: { upper: ['#FF0000', '#00FF00', '#0000FF'], sole: ['#FFFFFF', '#000000'], laces: ['#FFFFFF', '#000000', '#808080'] } }} onSave={(config) => { }} /> );
}

Préparer vos modèles 3D

  1. 1. Exportez vos modèles au format GLB ou GLTF
  2. 2. Optimisez la géométrie (max 50k polygones recommandé)
  3. 3. Nommez les matériaux de façon claire (ex:"upper_material","sole_material")
  4. 4. Testez dans GLTF Viewer
  5. 5. Uploadez dans Dashboard Luneo → 3D Models

Configuration avancée

 config={{ camera: { position: [0, 2, 5], fov: 45, near: 0.1, far: 1000, controls: true, // Orbit controls autoRotate: false }, lights: { ambient: { color: '#FFFFFF', intensity: 0.5 }, directional: { color: '#FFFFFF', intensity: 1.0, position: [5, 5, 5] }, point: { color: '#FFFFFF', intensity: 0.8, position: [0, 3, 0] } }, environment: { background: '#F0F0F0', skybox: '/textures/skybox.hdr', shadows: true }, materials: { changeable: ['upper', 'sole', 'laces'], textures: { upper: ['/textures/leather.jpg', '/textures/canvas.jpg'], sole: ['/textures/rubber.jpg'] } }, export: { format: 'png', width: 2048, height: 2048, transparent: false }
}}