Chargement de l'aide...
Chargement...
Configurez le configurateur 3D avec Three.js pour des expériences produit immersives
npm install @luneo/3d three @react-three/fiber @react-three/dreiimport { 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) => {
// Handle save
}}
/>
);
}GLB ou GLTFconfig={{
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
}
}}