Unsere Projekte

// Three.js React Component
import { Canvas, useFrame } from '@react-three/fiber'
import { OrbitControls, Environment, Float } from '@react-three/drei'
import { useRef, useState } from 'react'

function ProjectModel(props) {
const meshRef = useRef()
const [hovered, setHovered = useState(false)

useFrame((state, delta) => {
  meshRef.current.rotation.x += 0.01 * delta
  meshRef.current.rotation.y += 0.005 * delta
})

return (
  <Float speed={1.5} rotationIntensity={0.2} floatIntensity={0.5}>
    <mesh
      ref={meshRef}
      onPointerOver={() => setHovered(true)}
      onPointerOut={() => setHovered(false)}
    >
      <octahedronGeometry args={[1.5, 0]} />
      <meshStandardMaterial
        color="#10b981"
        wireframe
        metalness={0.8}
        roughness={0.2}
        emissive={hovered ? "#10b981" : "#000000"}
        emissiveIntensity={hovered ? 0.8 : 0}
      />
    </mesh>
  </Float>
)
}

export default function ProjectScene() {
return (
  <Canvas>
    <ambientLight intensity={0.5} />
    <pointLight position={[10, 10, 10]} intensity={1} />
    <ProjectModel />
    <Environment preset="city" />
    <OrbitControls 
      enableZoom={false} 
      enablePan={false} 
      autoRotate 
      autoRotateSpeed={0.5} 
    />
  </Canvas>
)
}