feat(Sky): add Sky

playground/src/pages/staging/SkyDemo.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import { shallowRef } from 'vue'
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, Sky } from '@tresjs/cientos'
+import { SRGBColorSpace, NoToneMapping } from 'three'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#333',
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: NoToneMapping,
+}
+
+const [turbidity, rayleigh, mieCoefficient, mieDirectionalG, elevation, azimuth] = useControls({
+  turbidity: { value: 3.4, min: 0, max: 20, step: 0.1 },
+  rayleigh: { value: 3, min: 0, max: 4, step: 0.1 },
+  mieCoefficient: { value: 0.005, min: 0, max: 0.1, step: 0.001 },
+  mieDirectionalG: { value: 0.7, min: 0, max: 1, step: 0.1 },
+  elevation: { value: 2, min: 0, max: 90, step: 0.1 },
+  azimuth: { value: 180, min: 0, max: 360, step: 1 },
+})
+
+const skyRef = shallowRef(null)
+</script>
+
+<template>
+  <TresLeches class="important-fixed important-left-2 important-w-90" />
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera :position="[0, 100, 2000]" />
+    <Sky
+      ref="skyRef"
+      :elevation="elevation.value.value"
+      :azimuth="azimuth.value.value"
+      :mie-coefficient="mieCoefficient.value.value"
+      :mie-directional-g="mieDirectionalG.value.value"
+      :rayleigh="rayleigh.value.value"
+      :turbidity="turbidity.value.value"
+    />
+    <TresGridHelper :args="[10, 10]" />
+    <OrbitControls :zoom-speed="0" />
+  </TresCanvas>
+</template>

playground/src/router/routes/staging.ts

@@ -30,4 +30,9 @@ export const stagingRoutes = [
     name: 'ContactShadows',
     component: () => import('../../pages/staging/ContactShadowsDemo.vue'),
   },
+  {
+    path: '/staging/sky',
+    name: 'Sky',
+    component: () => import('../../pages/staging/SkyDemo.vue'),
+  },
 ]

src/core/staging/Sky.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { MathUtils, Vector3 } from 'three'
+import { Sky as SkyImpl } from 'three/examples/jsm/objects/Sky'
+import { watch } from 'vue'
+
+export interface SkyProps {
+  turbidity?: number
+  rayleigh?: number
+  mieCoefficient?: number
+  mieDirectionalG?: number
+  elevation?: number
+  azimuth?: number
+  distance?: number
+}
+
+const props = withDefaults(defineProps<SkyProps>(), {
+  turbidity: 3.4,
+  rayleigh: 3,
+  mieCoefficient: 0.005,
+  mieDirectionalG: 0.7,
+  elevation: 0.6,
+  azimuth: 0,
+  distance: 450000,
+})
+
+const skyImpl = new SkyImpl()
+{
+  const uniforms = skyImpl.material.uniforms
+  uniforms.sunPosition.value = getSunPosition(props.azimuth, props.elevation)
+  uniforms.mieCoefficient.value = props.mieCoefficient
+  uniforms.mieDirectionalG.value = props.mieDirectionalG
+  watch(() => [props.azimuth, props.elevation],
+    () => getSunPosition(props.azimuth, props.elevation, uniforms.sunPosition.value))
+  watch(() => [props.mieCoefficient], () => skyImpl.material.uniforms.mieCoefficient.value = props.mieCoefficient)
+  watch(() => [props.mieDirectionalG], () => skyImpl.material.uniforms.mieDirectionalG.value = props.mieDirectionalG)
+}
+
+function getSunPosition(azimuth: number, elevation: number, v?: Vector3) {
+  if (!v) {
+    v = new Vector3(0, 0, 0)
+  }
+  const phi = MathUtils.degToRad(90 - elevation)
+  const theta = MathUtils.degToRad(azimuth)
+  return v.setFromSphericalCoords(1, phi, theta)
+}
+</script>
+
+<template>
+  <primitive
+    :object="skyImpl"
+    :material-uniforms-turbidity-value="props.turbidity"
+    :material-uniforms-rayleigh-value="props.rayleigh"
+    :scale="props.distance"
+  />
+</template>

src/core/staging/index.ts

@@ -4,6 +4,7 @@ import ContactShadows from './ContactShadows.vue'
 import Stars from './Stars.vue'
 import Precipitation from './Precipitation.vue'
 import Smoke from './Smoke.vue'
+import Sky from './Sky.vue'
 
 export {
   Backdrop,
@@ -12,4 +13,5 @@ export {
   Precipitation,
   Smoke,
   Environment,
+  Sky,
 }