fix: updated breaking changes of three v152 color maangement

Tresjs · May 3, 2023 · 1e47a5f · 1e47a5f
1 parent ff1dd13
commit 1e47a5f
Show file tree

Hide file tree

Showing 6 changed files with 28 additions and 17 deletions.
diff --git a/docs/.vitepress/theme/components/FirstScene.vue b/docs/.vitepress/theme/components/FirstScene.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
-import { sRGBEncoding } from 'three'
+import { sRGBEncoding, BasicShadowMap,
+NoToneMapping } from 'three'
 import { TresCanvas } from '@tresjs/core'
 import { OrbitControls } from '@tresjs/cientos'
 const LightRef = ref()
@@ -14,10 +15,19 @@ onMounted(() => {
   LightRef.value.shadow.camera.top = 10
   LightRef.value.shadow.camera.bottom = -10
 })
+
+const gl = {
+  clearColor: '#82DBC5',
+  shadows: true,
+  alpha: false,
+  outputEncoding: sRGBEncoding,
+  shadowMapType: BasicShadowMap,
+  toneMapping: NoToneMapping,
+}
 </script>
 
 <template>
-  <TresCanvas clear-color="#82DBC5" shadows alpha physically-correct-lights :output-encoding="sRGBEncoding">
+  <TresCanvas v-bind="gl">
     <TresPerspectiveCamera :position="[11, 11, 11]" :fov="45" :aspect="1" :near="0.1" :far="1000" />
 
     <OrbitControls />

diff --git a/playground/src/components/TheExperience.vue b/playground/src/components/TheExperience.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, watchEffect } from 'vue'
-import { BasicShadowMap, sRGBEncoding, NoToneMapping } from 'three'
+import { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'
 import { TresCanvas } from '/@/'
 import TheSphere from './TheSphere.vue'
 import { OrbitControls } from '@tresjs/cientos'
@@ -10,7 +10,7 @@ const gl = {
   shadows: true,
   alpha: false,
   shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
+  outputColorSpace: SRGBColorSpace,
   toneMapping: NoToneMapping,
 }
 

diff --git a/src/components/TresCanvas.ts b/src/components/TresCanvas.ts
@@ -9,7 +9,7 @@ export interface TresCanvasProps {
   shadowMapType?: ShadowMapType
   physicallyCorrectLights?: boolean
   useLegacyLights?: boolean
-  outputEncoding?: TextureEncoding
+  outputColorSpace?: TextureEncoding
   toneMapping?: ToneMapping
   toneMappingExposure?: number
   context?: WebGLRenderingContext
@@ -32,7 +32,7 @@ export const TresCanvas = defineComponent<TresCanvasProps>({
     'shadowMapType',
     'physicallyCorrectLights',
     'useLegacyLights',
-    'outputEncoding',
+    'outputColorSpace',
     'toneMapping',
     'toneMappingExposure',
     'context',

diff --git a/src/components/TresScene.ts b/src/components/TresScene.ts
@@ -15,7 +15,7 @@ export interface TresSceneProps {
   shadowMapType?: ShadowMapType
   physicallyCorrectLights?: boolean
   useLegacyLights?: boolean
-  outputEncoding?: TextureEncoding
+  outputColorSpace?: TextureEncoding
   toneMapping?: ToneMapping
   toneMappingExposure?: number
   context?: WebGLRenderingContext
@@ -40,7 +40,7 @@ export const TresScene = defineComponent<TresSceneProps>({
     'shadowMapType',
     'physicallyCorrectLights',
     'useLegacyLights',
-    'outputEncoding',
+    'outputColorSpace',
     'toneMapping',
     'toneMappingExposure',
     'context',

diff --git a/src/composables/useRenderer/const.ts b/src/composables/useRenderer/const.ts
@@ -1,8 +1,8 @@
-import { ACESFilmicToneMapping, PCFSoftShadowMap, sRGBEncoding } from 'three'
+import { ACESFilmicToneMapping, PCFSoftShadowMap, SRGBColorSpace } from 'three'
 
 export const rendererPresets = {
   realistic: {
-    outputEncoding: sRGBEncoding,
+    outputColorSpace: SRGBColorSpace,
     toneMapping: ACESFilmicToneMapping,
     toneMappingExposure: 3,
     shadowMap: {

diff --git a/src/composables/useRenderer/index.ts b/src/composables/useRenderer/index.ts
@@ -11,7 +11,7 @@ import {
 import {
   WebGLRendererParameters,
   NoToneMapping,
-  LinearEncoding,
+  LinearSRGBColorSpace,
   WebGLRenderer,
   ShadowMapType,
   PCFShadowMap,
@@ -59,11 +59,11 @@ export interface UseRendererOptions extends WebGLRendererParameters {
   useLegacyLights?: MaybeRefOrGetter<boolean>
   /**
    * Defines the output encoding of the renderer.
-   * Can be LinearEncoding, sRGBEncoding
+   * Can be LinearSRGBColorSpace, SRGBColorSpace
    *
-   * @default LinearEncoding
+   * @default LinearSRGBColorSpace
    */
-  outputEncoding?: MaybeRefOrGetter<TextureEncoding>
+  outputColorSpace?: MaybeRefOrGetter<TextureEncoding>
 
   /**
    * Defines the tone mapping used by the renderer.
@@ -134,7 +134,7 @@ export function useRenderer(options: UseRendererOptions) {
     shadows = false,
     shadowMapType = PCFShadowMap,
     useLegacyLights = false,
-    outputEncoding = LinearEncoding,
+    outputColorSpace = LinearSRGBColorSpace,
     toneMapping = NoToneMapping,
     toneMappingExposure = 1,
     context = undefined,
@@ -189,7 +189,8 @@ You could set windowSize=true to force the canvas to be the size of the window.`
     renderer.value.shadowMap.type = toValue(shadowMapType) as ShadowMapType
     renderer.value.toneMapping = (toValue(toneMapping) as ToneMapping) || NoToneMapping
     renderer.value.toneMappingExposure = toValue(toneMappingExposure) as number
-    renderer.value.outputEncoding = (toValue(outputEncoding) as TextureEncoding) || LinearEncoding
+    // Wating for https://github.com/DefinitelyTyped/DefinitelyTyped/pull/65356/files to be merged
+    renderer.value.outputColorSpace = (toValue(outputColorSpace) as TextureEncoding) || LinearSRGBColorSpace
     if (clearColor?.value) renderer.value.setClearColor(normalizeColor(toValue(clearColor) as TresColor))
 
     /*    renderer.value.physicallyCorrectLights = toValue(physicallyCorrectLights) as boolean */
@@ -243,7 +244,7 @@ You could set windowSize=true to force the canvas to be the size of the window.`
   watch([aspectRatio, pixelRatio], updateRendererSize)
 
   watch(
-    [shadows, shadowMapType, outputEncoding, useLegacyLights, toneMapping, toneMappingExposure, clearColor],
+    [shadows, shadowMapType, outputColorSpace, useLegacyLights, toneMapping, toneMappingExposure, clearColor],
     updateRendererOptions,
   )