Merge branch 'main' into feature/178-v-always-look-at

docs/.vitepress/config.ts

@@ -92,6 +92,7 @@ export default defineConfig({
           { text: 'Backdrop', link: '/guide/staging/backdrop' },
           { text: 'Environment', link: '/guide/staging/environment' },
           { text: 'useEnvironment', link: '/guide/staging/use-environment' },
+          { text: 'Sky', link: '/guide/staging/sky' },
           { text: 'Stars', link: '/guide/staging/stars' },
           { text: 'Smoke', link: '/guide/staging/smoke' },
           { text: 'Contact Shadows', link: '/guide/staging/contact-shadows' },

docs/guide/staging/sky.md

@@ -0,0 +1,32 @@
+# Sky
+
+![Sky](/cientos/sky.png)
+
+`<Sky />` is a wrapper for the [Three.js `Sky` add-on](https://threejs.org/examples/?q=sky#webgl_shaders_sky).
+
+## Usage
+
+```vue{2,8}
+<script setup lang="ts">
+import { Sky } from '@tresjs/cientos'
+</script>
+
+<template>
+  <TresCanvas>
+    <TresPerspectiveCamera :position="[0, 100, 2000]" />
+    <Sky />
+  </TresCanvas>
+</template>
+```
+
+## Props
+
+| Prop                | Description                                                                                                                         | Default    |
+| :------------------ | :---------------------------------------------------------------------------------------------------------------------------------- | ---------- |
+| `elevation`         | Sun's elevation from the horizon, in degrees                                                                                        | `0.6`      |
+| `azimuth`           | Sun's [azimuth angle](https://en.wikipedia.org/wiki/Solar_azimuth_angle), in degrees – its horizontal coordinate on the horizon     | `180`      |
+| `mie-coefficient`   | [Mie scattering](https://en.wikipedia.org/wiki/Mie_scattering) amount                                                               | `0.005`    |
+| <nobr>`mie-directional-g`</nobr> | [Mie scattering](https://en.wikipedia.org/wiki/Mie_scattering) direction                                               | `0.7`      |
+| `rayleigh`          | [Rayleigh scattering](https://en.wikipedia.org/wiki/Rayleigh_scattering)                                                            | `3`        |
+| `turbidity`         | Haziness                                                                                                                            | `3.4`      |
+| `distance`          | Sky box scale                                                                                                                       | `450000`   |

playground/src/pages/staging/EnvironmentDemo.vue

@@ -48,12 +48,11 @@ const { progress, hasFinishLoading } = await useProgress()
   <TresCanvas v-bind="gl">
     <OrbitControls />
     <Suspense>
-      <Environment v-bind="environmentOptions" />
-      <!-- <Environment
+      <Environment
         background
         :files="environmentFiles"
-        :path="'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap'"
-      /> -->
+        path="https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap"
+      />
     </Suspense>
     <TresGridHelper />
     <TresAmbientLight :intensity="1" />

playground/src/pages/staging/SkyDemo.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { TresCanvas } from '@tresjs/core'
+import { OrbitControls, Sky } from '@tresjs/cientos'
+import { SRGBColorSpace, ACESFilmicToneMapping } from 'three'
+import { TresLeches, useControls } from '@tresjs/leches'
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#333',
+  outputColorSpace: SRGBColorSpace,
+  toneMapping: ACESFilmicToneMapping,
+  toneMappingExposure: 1,
+}
+
+const [turbidity, rayleigh, mieCoefficient, mieDirectionalG, elevation, azimuth, distance, exposure] = 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: 0.99, step: 0.01 },
+  elevation: { value: 2, min: 0, max: 90, step: 0.1 },
+  azimuth: { value: 180, min: 0, max: 360, step: 1 },
+  distance: { value: 450000, min: 1000, max: 1000000, step: 1000 },
+  exposure: { value: 0.5, min: 0, max: 1, step: 0.01 },
+})
+</script>
+
+<template>
+  <TresLeches class="important-fixed important-left-2 important-w-90" />
+  <TresCanvas
+    v-bind="gl"
+    :tone-mapping-exposure="exposure.value.value"
+  >
+    <TresPerspectiveCamera :position="[0, 100, 2000]" />
+    <Sky
+      :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"
+      :distance="distance.value.value"
+    />
+    <OrbitControls 
+      :enable-pan="false"
+      :enable-zoom="false"
+    />
+  </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/directives/vLightHelper.ts

@@ -9,21 +9,25 @@ export const vLightHelper = {
       logWarning(`${el.type} is not a light`)
       return
     }
-    const currentHelper = helpers[el.type]
+    currentHelper = helpers[el.type]
     el.parent.add(new currentHelper(el))
   },
+  updated: (el: any) => {
+    currentInstance = el.parent.children.find((child: any) => child instanceof currentHelper)
+    currentInstance.update()
+  },
   unmounted: (el: any) => {
     if (!el.isLight) {
       logWarning(`${el.type} is not a light`)
       return
     }
-    const currentHelper = helpers[el.type]
-    const currentInstance = el.parent.children.find((child: any) => child instanceof currentHelper)
+    currentInstance = el.parent.children.find((child: any) => child instanceof currentHelper)
     currentInstance.dispose()
     el.parent.remove(currentInstance)
   },
 }
-
+let currentHelper: any
+let currentInstance: any
 const helpers = {
   DirectionalLight: DirectionalLightHelper,
   PointLight: PointLightHelper,

src/core/staging/Sky.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { MathUtils, Vector3 } from 'three'
+import { Sky as SkyImpl } from 'three/examples/jsm/objects/Sky'
+import { computed } 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: 180,
+  distance: 450000,
+})
+
+const skyImpl = new SkyImpl()
+const sunPosition = computed(() => getSunPosition(props.azimuth, props.elevation))
+
+function getSunPosition(azimuth: number, elevation: number) {
+  const phi = MathUtils.degToRad(90 - elevation)
+  const theta = MathUtils.degToRad(azimuth)
+  return new Vector3().setFromSphericalCoords(1, phi, theta)
+}
+</script>
+
+<template>
+  <primitive
+    :object="skyImpl"
+    :material-uniforms-turbidity-value="props.turbidity"
+    :material-uniforms-rayleigh-value="props.rayleigh"
+    :material-uniforms-mieCoefficient-value="props.mieCoefficient"
+    :material-uniforms-mieDirectionalG-value="props.mieDirectionalG"
+    :material-uniforms-sunPosition-value="sunPosition"
+    :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,
 }

src/core/staging/useEnvironment/const.ts

@@ -1,4 +1,3 @@
-import type { TextureEncoding } from 'three'
 
 export interface EnvironmentOptions {
   /**
@@ -7,7 +6,7 @@ export interface EnvironmentOptions {
    * @type {boolean}
    * @default false
    */
-  background?: boolean
+  background?: boolean | string
   /**
    * The blur radius of the environment.
    *

src/core/staging/useEnvironment/index.ts

@@ -65,7 +65,7 @@ export async function useEnvironment({
 
   if (scene.value) {
     scene.value.environment = texture
-    if (background) {
+    if (background || background === '') {
       scene.value.background = texture
     }
     if (blur) {