feat(app): Add Environment, allowing it to mount sub-components and Lightformer via FBO

[hawk86104]

Modified at: #374
Preview: https://hawk86104.github.io/#/plugins/skyBox/newEnvironment
&& https://hawk86104.github.io/#/plugins/industry4/showLambo

modifying the Environment, enabling us to replicate R3F use cases using Vue3

<Suspense>
    <Environment :blur="1" background :far="10000">
        <Lightformer :intensity="0.75" :rotation-x="Math.PI / 2" :position="[0, 5, -9]" :scale="[10, 10, 1]" />
        <Lightformer :intensity="4" :rotation-y="Math.PI / 2" :position="[-5, 1, -1]" :scale="[20, 0.1, 1]" />
        <Lightformer :rotation-y="Math.PI / 2" :position="[-5, -1, -1]" :scale="[20, 0.5, 1]" />
        <Lightformer :rotation-y="-Math.PI / 2" :position="[10, 1, 0]" :scale="[20, 11, 1]" />

        <Levioso :speed="5" :floatFactor="2" :rotationFactor="2">
            <Lightformer form="ring" color="red" :intensity="1" :scale="10" :position="[-15, 4, -18]" />
        </Levioso>

        <TresGroup :rotation="[0, 0.5, 0]">
            <TresGroup ref="group">
                <Lightformer v-for="( i, x ) in lightFormerPositions " :key="i" form="circle" :intensity="2"
                    :rotation="[Math.PI / 2, 0, 0]" :position="[x, 4, i * 4]" :scale="[3, 1, 1]" />
            </TresGroup>
        </TresGroup>

        <TresMesh :scale="[100, 100, 100]">
            <TresSphereGeometry :args="[1, 64, 64]" />
            <TresMeshNormalMaterial />
        </TresMesh>
    </Environment>
</Suspense>

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[JaimeTorrealba]

Nice work, thanks for this, I just drop little comments.

But important I don't see the documentation for this one, please remember to add it.

[hawk86104]

Maybe It's already refined

[JaimeTorrealba]

@hawk86104 Thanks man :)