fix(core): deprecation useLegacyLights instead of physicallyCorrectLights

packages/tres/src/App.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import TheEnvironment from '/@/components/TheEnvironment.vue'
+import TheBasic from '/@/components/TheBasic.vue'
 </script>
 
 <template>
   <Suspense>
-    <TheEnvironment />
+    <TheBasic />
     <!-- <VectorSetProps /> -->
   </Suspense>
 </template>

packages/tres/src/components/TheBasic.vue

@@ -10,7 +10,7 @@ const state = reactive({
   clearColor: '#201919',
   shadows: true,
   alpha: false,
-  physicallyCorrectLights: true,
+
   shadowMapType: BasicShadowMap,
   outputEncoding: sRGBEncoding,
   toneMapping: NoToneMapping,
@@ -18,14 +18,14 @@ const state = reactive({
 
 const sphereRef = ref()
 
-const { onLoop } = useRenderLoop()
+/* const { onLoop } = useRenderLoop()
 
 onLoop(({ elapsed }) => {
   sphereRef.value.position.y += Math.sin(elapsed * 0.01) * 0.1
-})
+}) */
 </script>
 <template>
-  <TresCanvas v-bind="state">
+  <TresCanvas v-bind="state" physically-correct-lights>
     <TresPerspectiveCamera :position="[5, 5, 5]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
     <OrbitControls make-default />
     <TresScene>

packages/tres/src/core/useRenderer/component.ts

@@ -9,12 +9,24 @@ import { TresVNodeType } from '/@/types'
  * Vue component for rendering a Tres component.
  */
 
+const { logError, logWarning } = useLogger()
+
 export const TresCanvas = defineComponent({
   name: 'TresCanvas',
   props: {
     shadows: Boolean,
     shadowMapType: Number as PropType<ShadowMapType>,
-    physicallyCorrectLights: Boolean,
+    physicallyCorrectLights: {
+      type: Boolean,
+      default: false,
+      validator: (value: boolean) => {
+        if (value) {
+          logWarning('physicallyCorrectLights is deprecated. Use useLegacyLights instead.')
+        }
+        return true
+      },
+    },
+    useLegacyLights: Boolean,
     outputEncoding: Number as PropType<TextureEncoding>,
     toneMapping: Number as PropType<ToneMapping>,
     toneMappingExposure: Number,
@@ -26,8 +38,6 @@ export const TresCanvas = defineComponent({
     preset: String as PropType<RendererPresetsType>,
   },
   setup(props, { slots, attrs }) {
-    const { logError } = useLogger()
-
     const canvas = ref<HTMLCanvasElement>()
     const container = ref<HTMLElement>()
 

packages/tres/src/core/useRenderer/const.ts

@@ -2,7 +2,6 @@ import { ACESFilmicToneMapping, PCFSoftShadowMap, sRGBEncoding } from 'three'
 
 export const rendererPresets = {
   realistic: {
-    physicallyCorrectLights: true,
     outputEncoding: sRGBEncoding,
     toneMapping: ACESFilmicToneMapping,
     toneMappingExposure: 3,

packages/tres/src/core/useRenderer/index.ts

@@ -48,9 +48,16 @@ export interface UseRendererOptions extends WebGLRendererParameters {
    * See the [lights / physical example](https://threejs.org/examples/#webgl_lights_physical).
    *
    * @default false
+   * @deprecated Use {@link WebGLRenderer.useLegacyLights useLegacyLights} instead.
    */
   physicallyCorrectLights?: MaybeComputedRef<boolean>
-
+  /**
+   * Whether to use legacy lighting mode.
+   *
+   * @type {MaybeComputedRef<boolean>}
+   * @memberof UseRendererOptions
+   */
+  useLegacyLights?: MaybeComputedRef<boolean>
   /**
    * Defines the output encoding of the renderer.
    * Can be LinearEncoding, sRGBEncoding
@@ -130,6 +137,7 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
     shadows = false,
     shadowMapType = PCFShadowMap,
     physicallyCorrectLights = false,
+    useLegacyLights = false,
     outputEncoding = LinearEncoding,
     toneMapping = NoToneMapping,
     toneMappingExposure = 1,
@@ -178,7 +186,8 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
     renderer.value.outputEncoding = (resolveUnref(outputEncoding) as TextureEncoding) || LinearEncoding
     if (clearColor?.value) renderer.value.setClearColor(normalizeColor(resolveUnref(clearColor) as TresColor))
 
-    renderer.value.physicallyCorrectLights = resolveUnref(physicallyCorrectLights) as boolean
+    /*    renderer.value.physicallyCorrectLights = resolveUnref(physicallyCorrectLights) as boolean */
+    renderer.value.useLegacyLights = resolveUnref(useLegacyLights) as boolean
   }
 
   const init = () => {