A high-fidelity, interactive 3D interpretation of the Google Developer Groups (GDG) logo. This component translates the iconic brackets into extruded geometric volumes using React Three Fiber and Three.js. It features a continuous Y-axis rotation and reactive 'physically-based' materials (PBR) that respond dynamically to the environment's lighting. The use of custom-generated Shape paths ensures the geometry maintains the exact proportions and corner radii of the official brand mark.
import { Canvas } from '@react-three/fiber'
import { OrbitControls, PerspectiveCamera, Environment } from '@react-three/drei'
import { Component } from "@/components/ui/gdg-logo-google-developer-groups";
export default function DemoOne() {
return (
<div className="logo-3d-container">
<Canvas>
<PerspectiveCamera makeDefault position={[0, 0, 5]} />
<ambientLight intensity={0.7} />
<spotLight
position={[10, 10, 10]}
angle={0.15}
penumbra={1}
intensity={1}
/>
<pointLight position={[-10, -10, -10]} intensity={0.5} />
<Component />
<Environment preset="city" />
<OrbitControls
enableZoom={false}
minPolarAngle={Math.PI / 3}
maxPolarAngle={Math.PI / 1.5}
/>
</Canvas>
</div>
)
}