import './style.css'
import ReactDOM from 'react-dom/client'
import { Canvas } from '@react-three/fiber'
import Flux from './Flux'
import ResultsFlux from './ResultsFlux'


const firstModel = ReactDOM.createRoot(document.querySelector('.webgl'))
const secondModel = ReactDOM.createRoot(document.querySelector('.resultswebgl'))

firstModel.render(
    <Canvas
        shadows
        camera={ {
            fov: 55,
            near: 0.1,
            far: 200,
            position: [ - 3, 3, 7 ],
        } }
    >
        <Flux />
    </Canvas>
)

secondModel.render(

    <Canvas
        shadows
        camera={ {
            fov: 15,
            near: 0.1,
            far: 200,
            position: [ - 4, 3, 12 ]
        } }
    >
        <ResultsFlux />
    </Canvas>

)