60 lines
1.9 KiB
JavaScript
60 lines
1.9 KiB
JavaScript
import { Canvas } from '@react-three/fiber'
|
|
import { OrbitControls } from '@react-three/drei'
|
|
import { useControls, Leva } from 'leva' // Import leva
|
|
import PhyllotaxisSystem from './PhyllotaxisSystem' // Import Phyllotaxis system
|
|
// import PolyTwistSystem from './PolyTwistSystem' // Import PolyTwist system
|
|
import './App.css'
|
|
|
|
// Define animation options
|
|
const animationOptions = {
|
|
Phyllotaxis: 'Phyllotaxis',
|
|
PolyTwist: 'PolyTwist',
|
|
// Add more animation names here as you implement them
|
|
}
|
|
|
|
function App() {
|
|
// Leva controls for animation selection and global settings
|
|
const { selectedAnimation, speedMultiplier } = useControls({
|
|
selectedAnimation: {
|
|
options: animationOptions,
|
|
value: animationOptions.Phyllotaxis, // Default selection
|
|
label: 'Animation',
|
|
},
|
|
speedMultiplier: {
|
|
value: 1.0, // Global speed multiplier
|
|
min: 0.01,
|
|
max: 5.0,
|
|
step: 0.01,
|
|
label: 'Global Speed',
|
|
},
|
|
})
|
|
|
|
// Function to render the selected animation component
|
|
const renderSelectedAnimation = () => {
|
|
switch (selectedAnimation) {
|
|
case animationOptions.Phyllotaxis:
|
|
return <PhyllotaxisSystem speedMultiplier={speedMultiplier} />
|
|
// case animationOptions.PolyTwist:
|
|
// return <PolyTwistSystem speedMultiplier={speedMultiplier} />
|
|
// Add cases for other animations
|
|
default:
|
|
return null
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
{/* Leva panel will be added here automatically */}
|
|
<Leva /> {/* Add the Leva panel, initially collapsed */}
|
|
<Canvas camera={{ position: [0, 0, 500], fov: 75 }}> {/* Adjusted camera Z */}
|
|
<ambientLight intensity={0.8} /> {/* Increased ambient light */}
|
|
<pointLight position={[100, 100, 100]} intensity={1.5} /> {/* Adjusted point light */}
|
|
{renderSelectedAnimation()} {/* Render the chosen animation */}
|
|
<OrbitControls />
|
|
</Canvas>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default App
|