logo-3d

Que fait logo-3d ?

Crée un effet de pièce/médaille 3D tournante à partir de n'importe quelle image de logo en utilisant React Three Fiber. Détecte automatiquement le contour, supprime les arrière-plans unis, construit une pièce avec un bord chromé et ajoute des reflets d'environnement. Idéal pour logo 3D, logo tournant, effet pièce ou animation médaille.

Prérequis

• Node.js 18+
• npm ou yarn
• Une image de logo (PNG avec fond transparent ou SVG)

Installation

npm install @react-three/fiber @react-three/drei three

Utilisation

import { Canvas } from '@react-three/fiber'
import { CoinEffect } from './CoinEffect'

function App() {
  return (
    <Canvas>
      <CoinEffect 
        logoUrl="./logo.png"
        spinSpeed={0.02}
        scale={1.5}
        chromeColor="#c0c0c0"
      />
    </Canvas>
  )
}

Propriétés

Propriété	Type	Défaut	Description
logoUrl	string	requis	Chemin vers l'image du logo
spinSpeed	number	0.02	Vitesse de rotation
scale	number	1.5	Facteur d'échelle
chromeColor	string	"#c0c0c0"	Couleur du bord chromé

Structure du projet

• CoinEffect.jsx - Composant React Three Fiber principal
• utils/outlineDetection.js - Détection automatique du contour du logo
• utils/backgroundRemoval.js - Suppression de l'arrière-plan uni

Exemple d'animation

import { useFrame } from '@react-three/fiber'
import { useRef } from 'react'

function SpinningCoin() {
  const meshRef = useRef()
  
  useFrame((state, delta) => {
    meshRef.current.rotation.y += delta * 0.5
  })
  
  return (
    <mesh ref={meshRef}>
      <cylinderGeometry args={[1, 1, 0.1]} />
      <meshStandardMaterial color="#ffd700" />
    </mesh>
  )
}

Astuce : Pour un rendu optimal, utilisez une image de logo avec un fond transparent (format PNG).

Licence

MIT