import * as THREE from 'three';

// 1. Scene, Camera & WebGL Renderer Initialization
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 5, 10);

const renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2)); // High-DPI clamping
document.body.appendChild(renderer.domElement);

// 2. High-Performance 60/120 FPS Animation Loop
function animate(time) {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate(0);

// Rendering 50,000 Asteroids in 1 Single GPU Draw Call!
const count = 50000;
const geometry = new THREE.DodecahedronGeometry(0.5, 1);
const material = new THREE.MeshStandardMaterial({ roughness: 0.8, metalness: 0.2 });

const instancedMesh = new THREE.InstancedMesh(geometry, material, count);
const dummy = new THREE.Object3D();

for (let i = 0; i < count; i++) {
    dummy.position.set(
        (Math.random() - 0.5) * 200,
        (Math.random() - 0.5) * 200,
        (Math.random() - 0.5) * 200
    );
    dummy.rotation.set(Math.random() * Math.PI, Math.random() * Math.PI, 0);
    dummy.updateMatrix();
    instancedMesh.setMatrixAt(i, dummy.matrix);
}

instancedMesh.instanceMatrix.needsUpdate = true;
scene.add(instancedMesh);

// Custom GLSL ShaderMaterial in Three.js
const customWaveMaterial = new THREE.ShaderMaterial({
    uniforms: {
        uTime: { value: 0.0 },
        uColorA: { value: new THREE.Color("#4285F4") },
        uColorB: { value: new THREE.Color("#34A853") }
    },
    vertexShader: `
        uniform float uTime;
        varying vec2 vUv;
        void main() {
            vUv = uv;
            vec3 pos = position;
            pos.z += sin(pos.x * 4.0 + uTime * 2.0) * cos(pos.y * 4.0 + uTime * 2.0) * 0.2;
            gl_Position = projectionMatrix * modelViewMatrix * vec4(pos, 1.0);
        }
    `,
    fragmentShader: `
        uniform vec3 uColorA;
        uniform vec3 uColorB;
        varying vec2 vUv;
        void main() {
            vec3 finalColor = mix(uColorA, uColorB, vUv.y);
            gl_FragColor = vec4(finalColor, 1.0);
        }
    `
});

import React, { useRef } from 'react';
import { Canvas, useFrame } from '@react-three/fiber';
import { OrbitControls, Float } from '@react-three/drei';

function SpinningOrb() {
    const meshRef = useRef();
    useFrame((state, delta) => {
        meshRef.current.rotation.y += delta * 0.5;
    });

    return (
        <Float speed={2} rotationIntensity={1} floatIntensity={2}>
            <mesh ref={meshRef}>
                <sphereGeometry args={[1.5, 64, 64]} />
                <meshPhysicalMaterial roughness={0.1} transmission={0.9} thickness={1.2} />
            </mesh>
        </Float>
    );
}