Merge branch 'master' of https://github.com/pmndrs/drei

README.md

@@ -448,7 +448,7 @@ Scroll controls create a HTML scroll container in front of the canvas. Everythin
 You can listen and react to scroll with the `useScroll` hook which gives you useful data like the current scroll `offset`, `delta` and functions for range finding: `range`, `curve` and `visible`. The latter functions are especially useful if you want to react to the scroll offset, for instance if you wanted to fade things in and out if they are in or out of view.
 
 ```jsx
-;<ScrollControls pages={3} damping={0.1}>
+<ScrollControls pages={3} damping={0.1}>
   {/* Canvas contents in here will *not* scroll, but receive useScroll! */}
   <SomeModel />
   <Scroll>
@@ -1596,7 +1596,7 @@ Radial gradient.
 
 ```jsx
 import { GradientTexture, GradientType } from './GradientTexture'
-;<mesh>
+<mesh>
   <planeGeometry />
   <meshBasicMaterial>
     <GradientTexture
@@ -3726,7 +3726,7 @@ If you still experience flip flops despite the bounds you can define a limit of
 PerformanceMonitor can also have children, if you wrap your app in it you get to use `usePerformanceMonitor` which allows individual components down the nested tree to respond to performance changes on their own.
 
 ```jsx
-;<PerformanceMonitor>
+<PerformanceMonitor>
   <Effects />
 </PerformanceMonitor>
 
@@ -3756,19 +3756,16 @@ type HudProps = {
 ```
 
 ```jsx
-{
-  /* Renders on top of the default scene with a perspective camera */
-}
-;<Hud>
+{ /* Renders on top of the default scene with a perspective camera */ }
+<Hud>
   <PerspectiveCamera makeDefault position={[0, 0, 10]} />
   <mesh>
     <ringGeometry />
   </mesh>
 </Hud>
-{
-  /* Renders on top of the previous HUD with an orthographic camera */
-}
-;<Hud renderPriority={2}>
+
+{ /* Renders on top of the previous HUD with an orthographic camera */ }
+<Hud renderPriority={2}>
   <OrthographicCamera makeDefault position={[0, 0, 10]} />
   <mesh>
     <boxGeometry />
@@ -4297,7 +4294,7 @@ const config = {
   controls: undefined, // if using orbit controls, pass a ref here so we can update the rotation
 }
 
-;<CameraShake {...config} />
+<CameraShake {...config} />
 ```
 
 ```ts
@@ -4888,6 +4885,8 @@ type CloudsProps = JSX.IntrinsicElements['group'] & {
   range?: number
   /** Which material it will override, default: MeshLambertMaterial */
   material?: typeof Material
+  /** Frustum culling, default: true */
+  frustumCulled?: boolean
 }
 
 type CloudProps = JSX.IntrinsicElements['group'] & {

src/core/Cloud.tsx

@@ -58,6 +58,8 @@ type CloudsProps = JSX.IntrinsicElements['group'] & {
   range?: number
   /** Which material it will override, default: MeshLambertMaterial */
   material?: typeof Material
+  /** Frustum culling, default: true */
+  frustumCulled?: boolean
 }
 
 type CloudProps = JSX.IntrinsicElements['group'] & {
@@ -88,8 +90,6 @@ type CloudProps = JSX.IntrinsicElements['group'] & {
   opacity?: number
   /** Color, default: white */
   color?: ReactThreeFiber.Color
-  /** Frustum culling, default: true */
-  frustumCulled?: boolean
 }
 
 const parentMatrix = /* @__PURE__ */ new Matrix4()

src/core/Effects.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react'
-import { RGBAFormat, HalfFloatType, WebGLRenderTarget, UnsignedByteType, TextureDataType, TextureEncoding } from 'three'
+import { RGBAFormat, HalfFloatType, WebGLRenderTarget, UnsignedByteType, TextureDataType } from 'three'
 import { ReactThreeFiber, extend, useThree, useFrame } from '@react-three/fiber'
 import { EffectComposer, RenderPass, ShaderPass, GammaCorrectionShader } from 'three-stdlib'
 import { ForwardRefComponent } from '../helpers/ts-utils'
+import { TextureEncoding } from '../helpers/deprecated'
 
 type Props = ReactThreeFiber.Node<EffectComposer, typeof EffectComposer> & {
   multisamping?: number

src/core/useEnvironment.tsx

@@ -9,20 +9,17 @@ import {
 } from 'three'
 import { RGBELoader, EXRLoader } from 'three-stdlib'
 import { presetsObj, PresetsType } from '../helpers/environment-assets'
+import { LinearEncoding, sRGBEncoding, TextureEncoding } from '../helpers/deprecated'
 
 const CUBEMAP_ROOT = 'https://raw.githack.com/pmndrs/drei-assets/456060a26bbeb8fdf79326f224b6d99b8bcce736/hdri/'
 const isArray = (arr: any): arr is string[] => Array.isArray(arr)
 
-const LinearEncoding = 3000
-const sRGBEncoding = 3001
-
 export type EnvironmentLoaderProps = {
   files?: string | string[]
   path?: string
   preset?: PresetsType
   extensions?: (loader: Loader) => void
-  // TextureEncoding was deprecated in r152, and removed in r162.
-  encoding?: typeof LinearEncoding | typeof sRGBEncoding
+  encoding?: TextureEncoding
 }
 
 export function useEnvironment({

src/core/useTexture.tsx

@@ -1,6 +1,6 @@
 import { Texture, TextureLoader } from 'three'
 import { useLoader, useThree } from '@react-three/fiber'
-import { useLayoutEffect, useEffect } from 'react'
+import { useLayoutEffect, useEffect, useMemo } from 'react'
 
 export const IsObject = (url: any): url is Record<string, string> =>
   url === Object(url) && !Array.isArray(url) && typeof url !== 'function'
@@ -32,14 +32,18 @@ export function useTexture<Url extends string[] | string | Record<string, string
     }
   }, [gl, textures])
 
-  if (IsObject(input)) {
-    const keyed = {} as MappedTextureType<Url>
-    let i = 0
-    for (const key in input) keyed[key] = textures[i++]
-    return keyed
-  } else {
-    return textures
-  }
+  const mappedTextures = useMemo(() => {
+    if (IsObject(input)) {
+      const keyed = {} as MappedTextureType<Url>
+      let i = 0
+      for (const key in input) keyed[key] = textures[i++]
+      return keyed
+    } else {
+      return textures
+    }
+  }, [input, textures])
+
+  return mappedTextures
 }
 
 useTexture.preload = (url: string extends any[] ? string[] : string) => useLoader.preload(TextureLoader, url)

src/helpers/deprecated.ts

@@ -13,3 +13,11 @@ export const setUpdateRange = (
     attribute.updateRange = updateRange
   }
 }
+
+export const LinearEncoding = 3000
+export const sRGBEncoding = 3001
+
+/**
+ * TextureEncoding was deprecated in r152, and removed in r162.
+ */
+export type TextureEncoding = typeof LinearEncoding | typeof sRGBEncoding