Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: pmndrs/drei
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: v9.88.1
Choose a base ref
...
head repository: pmndrs/drei
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: v9.88.2
Choose a head ref
  • 1 commit
  • 94 files changed
  • 1 contributor

Commits on Oct 12, 2023

  1. 1
    Copy the full SHA
    8a64fb7 View commit details
Showing with 1,419 additions and 1,371 deletions.
  1. +10 −7 src/core/AccumulativeShadows.tsx
  2. +45 −45 src/core/ArcballControls.tsx
  3. +2 −2 src/core/BBAnchor.tsx
  4. +18 −17 src/core/Billboard.tsx
  5. +1 −1 src/core/Bounds.tsx
  6. +1 −1 src/core/CameraControls.tsx
  7. +64 −66 src/core/CameraShake.tsx
  8. +40 −38 src/core/CatmullRomLine.tsx
  9. +14 −13 src/core/Caustics.tsx
  10. +67 −69 src/core/Center.tsx
  11. +1 −1 src/core/Clone.tsx
  12. +10 −10 src/core/Cloud.tsx
  13. +1 −1 src/core/ContactShadows.tsx
  14. +1 −1 src/core/CubicBezierLine.tsx
  15. +3 −4 src/core/CurveModifier.tsx
  16. +69 −68 src/core/Decal.tsx
  17. +1 −1 src/core/Detailed.tsx
  18. +1 −1 src/core/DeviceOrientationControls.tsx
  19. +1 −1 src/core/Edges.tsx
  20. +1 −1 src/core/Effects.tsx
  21. +1 −1 src/core/Example.tsx
  22. +4 −4 src/core/FaceControls.tsx
  23. +1 −1 src/core/FaceLandmarker.tsx
  24. +106 −104 src/core/Facemesh.tsx
  25. +22 −20 src/core/FirstPersonControls.tsx
  26. +4 −1 src/core/Float.tsx
  27. +1 −1 src/core/FlyControls.tsx
  28. +6 −6 src/core/GizmoHelper.tsx
  29. +3 −3 src/core/GizmoViewcube.tsx
  30. +1 −1 src/core/Gltf.tsx
  31. +8 −7 src/core/Grid.tsx
  32. +23 −13 src/core/Image.tsx
  33. +39 −40 src/core/Instances.tsx
  34. +1 −1 src/core/Lightformer.tsx
  35. +1 −1 src/core/Line.tsx
  36. +1 −1 src/core/MapControls.tsx
  37. +36 −34 src/core/MarchingCubes.tsx
  38. +1 −1 src/core/Mask.tsx
  39. +6 −4 src/core/MeshDiscardMaterial.tsx
  40. +1 −1 src/core/MeshDistortMaterial.tsx
  41. +6 −7 src/core/MeshPortalMaterial.tsx
  42. +183 −181 src/core/MeshReflectorMaterial.tsx
  43. +1 −1 src/core/MeshTransmissionMaterial.tsx
  44. +1 −1 src/core/MeshWobbleMaterial.tsx
  45. +2 −2 src/core/MotionPathControls.tsx
  46. +69 −71 src/core/OrbitControls.tsx
  47. +1 −1 src/core/OrthographicCamera.tsx
  48. +10 −3 src/core/Outlines.tsx
  49. +1 −1 src/core/PerformanceMonitor.tsx
  50. +1 −1 src/core/PerspectiveCamera.tsx
  51. +4 −3 src/core/PointMaterial.tsx
  52. +1 −1 src/core/PointerLockControls.tsx
  53. +18 −21 src/core/Points.tsx
  54. +1 −1 src/core/PositionalAudio.tsx
  55. +39 −40 src/core/QuadraticBezierLine.tsx
  56. +6 −3 src/core/Reflector.tsx
  57. +73 −72 src/core/RenderCubeTexture.tsx
  58. +1 −1 src/core/RenderTexture.tsx
  59. +1 −1 src/core/Resize.tsx
  60. +42 −40 src/core/RoundedBox.tsx
  61. +1 −1 src/core/ScreenQuad.tsx
  62. +15 −14 src/core/ScreenSpace.tsx
  63. +12 −13 src/core/Segments.tsx
  64. +1 −1 src/core/Shadow.tsx
  65. +1 −1 src/core/Sky.tsx
  66. +4 −3 src/core/Sparkles.tsx
  67. +3 −2 src/core/Stars.tsx
  68. +62 −60 src/core/Svg.tsx
  69. +1 −1 src/core/Text.tsx
  70. +1 −1 src/core/Text3D.tsx
  71. +45 −42 src/core/TrackballControls.tsx
  72. +4 −4 src/core/Trail.tsx
  73. +96 −93 src/core/TransformControls.tsx
  74. +3 −4 src/core/Wireframe.tsx
  75. +4 −4 src/core/meshBounds.tsx
  76. +19 −19 src/core/shapes.tsx
  77. +1 −1 src/core/useBVH.tsx
  78. +1 −1 src/core/useProgress.tsx
  79. +5 −0 src/helpers/constants.ts
  80. +2 −3 src/materials/ConvolutionMaterial.tsx
  81. +1 −1 src/materials/DiscardMaterial.tsx
  82. +8 −7 src/materials/MeshRefractionMaterial.tsx
  83. +2 −1 src/materials/SpotLightMaterial.tsx
  84. +4 −4 src/materials/WireframeMaterial.tsx
  85. +4 −4 src/web/Html.tsx
  86. +1 −1 src/web/KeyboardControls.tsx
  87. +3 −3 src/web/ScrollControls.tsx
  88. +1 −1 src/web/Select.tsx
  89. +1 −1 src/web/View.tsx
  90. +4 −4 src/web/pivotControls/AxisArrow.tsx
  91. +6 −6 src/web/pivotControls/AxisRotator.tsx
  92. +3 −3 src/web/pivotControls/PlaneSlider.tsx
  93. +1 −1 src/web/pivotControls/context.ts
  94. +21 −21 src/web/pivotControls/index.tsx
17 changes: 10 additions & 7 deletions src/core/AccumulativeShadows.tsx
Original file line number Diff line number Diff line change
@@ -4,6 +4,7 @@ import { extend, ReactThreeFiber, useFrame, useThree } from '@react-three/fiber'
import { shaderMaterial } from './shaderMaterial'
import { DiscardMaterial } from '../materials/DiscardMaterial'
import { ForwardRefComponent } from '../helpers/ts-utils'
import { version } from '../helpers/constants'

function isLight(object: any): object is THREE.Light {
return object.isLight
@@ -72,11 +73,13 @@ declare global {
}
}

export const accumulativeContext = React.createContext<AccumulativeContext>(null as unknown as AccumulativeContext)
export const accumulativeContext = /* @__PURE__ */ React.createContext<AccumulativeContext>(
null as unknown as AccumulativeContext
)

const SoftShadowMaterial = shaderMaterial(
const SoftShadowMaterial = /* @__PURE__ */ shaderMaterial(
{
color: new THREE.Color(),
color: /* @__PURE__ */ new THREE.Color(),
blend: 2.0,
alphaTest: 0.75,
opacity: 0,
@@ -97,14 +100,14 @@ const SoftShadowMaterial = shaderMaterial(
vec4 sampledDiffuseColor = texture2D(map, vUv);
gl_FragColor = vec4(color * sampledDiffuseColor.r * blend, max(0.0, (1.0 - (sampledDiffuseColor.r + sampledDiffuseColor.g + sampledDiffuseColor.b) / alphaTest)) * opacity);
#include <tonemapping_fragment>
#include <${parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
#include <${version >= 154 ? 'colorspace_fragment' : 'encodings_fragment'}>
}`
)

export const AccumulativeShadows: ForwardRefComponent<
JSX.IntrinsicElements['group'] & AccumulativeShadowsProps,
AccumulativeContext
> = React.forwardRef(
> = /* @__PURE__ */ React.forwardRef(
(
{
children,
@@ -253,7 +256,7 @@ export type RandomizedLightProps = {
export const RandomizedLight: ForwardRefComponent<
JSX.IntrinsicElements['group'] & RandomizedLightProps,
AccumulativeLightContext
> = React.forwardRef(
> = /* @__PURE__ */ React.forwardRef(
(
{
castShadow = true,
@@ -266,7 +269,7 @@ export const RandomizedLight: ForwardRefComponent<
position = [0, 0, 0],
radius = 1,
amount = 8,
intensity = parseInt(THREE.REVISION.replace(/\D+/g, '')) >= 155 ? Math.PI : 1,
intensity = version >= 155 ? Math.PI : 1,
ambient = 0.5,
...props
}: JSX.IntrinsicElements['group'] & RandomizedLightProps,
90 changes: 45 additions & 45 deletions src/core/ArcballControls.tsx
Original file line number Diff line number Diff line change
@@ -23,55 +23,55 @@ export type ArcballControlsProps = Omit<
'ref'
>

export const ArcballControls: ForwardRefComponent<ArcballControlsProps, ArcballControlsImpl> = forwardRef<
ArcballControlsImpl,
ArcballControlsProps
>(({ camera, makeDefault, regress, domElement, onChange, onStart, onEnd, ...restProps }, ref) => {
const invalidate = useThree((state) => state.invalidate)
const defaultCamera = useThree((state) => state.camera)
const gl = useThree((state) => state.gl)
const events = useThree((state) => state.events) as EventManager<HTMLElement>
const set = useThree((state) => state.set)
const get = useThree((state) => state.get)
const performance = useThree((state) => state.performance)
const explCamera = camera || defaultCamera
const explDomElement = (domElement || events.connected || gl.domElement) as HTMLElement
const controls = useMemo(() => new ArcballControlsImpl(explCamera), [explCamera])
export const ArcballControls: ForwardRefComponent<ArcballControlsProps, ArcballControlsImpl> =
/* @__PURE__ */ forwardRef<ArcballControlsImpl, ArcballControlsProps>(
({ camera, makeDefault, regress, domElement, onChange, onStart, onEnd, ...restProps }, ref) => {
const invalidate = useThree((state) => state.invalidate)
const defaultCamera = useThree((state) => state.camera)
const gl = useThree((state) => state.gl)
const events = useThree((state) => state.events) as EventManager<HTMLElement>
const set = useThree((state) => state.set)
const get = useThree((state) => state.get)
const performance = useThree((state) => state.performance)
const explCamera = camera || defaultCamera
const explDomElement = (domElement || events.connected || gl.domElement) as HTMLElement
const controls = useMemo(() => new ArcballControlsImpl(explCamera), [explCamera])

useFrame(() => {
if (controls.enabled) controls.update()
}, -1)
useFrame(() => {
if (controls.enabled) controls.update()
}, -1)

useEffect(() => {
controls.connect(explDomElement)
return () => void controls.dispose()
}, [explDomElement, regress, controls, invalidate])
useEffect(() => {
controls.connect(explDomElement)
return () => void controls.dispose()
}, [explDomElement, regress, controls, invalidate])

useEffect(() => {
const callback = (e: Event) => {
invalidate()
if (regress) performance.regress()
if (onChange) onChange(e)
}
useEffect(() => {
const callback = (e: Event) => {
invalidate()
if (regress) performance.regress()
if (onChange) onChange(e)
}

controls.addEventListener('change', callback)
if (onStart) controls.addEventListener('start', onStart)
if (onEnd) controls.addEventListener('end', onEnd)
controls.addEventListener('change', callback)
if (onStart) controls.addEventListener('start', onStart)
if (onEnd) controls.addEventListener('end', onEnd)

return () => {
controls.removeEventListener('change', callback)
if (onStart) controls.removeEventListener('start', onStart)
if (onEnd) controls.removeEventListener('end', onEnd)
}
}, [onChange, onStart, onEnd])
return () => {
controls.removeEventListener('change', callback)
if (onStart) controls.removeEventListener('start', onStart)
if (onEnd) controls.removeEventListener('end', onEnd)
}
}, [onChange, onStart, onEnd])

useEffect(() => {
if (makeDefault) {
const old = get().controls
set({ controls })
return () => set({ controls: old })
}
}, [makeDefault, controls])
useEffect(() => {
if (makeDefault) {
const old = get().controls
set({ controls })
return () => set({ controls: old })
}
}, [makeDefault, controls])

return <primitive ref={ref} object={controls} {...restProps} />
})
return <primitive ref={ref} object={controls} {...restProps} />
}
)
4 changes: 2 additions & 2 deletions src/core/BBAnchor.tsx
Original file line number Diff line number Diff line change
@@ -2,8 +2,8 @@ import * as React from 'react'
import * as THREE from 'three'
import { useFrame, GroupProps } from '@react-three/fiber'

const boundingBox = new THREE.Box3()
const boundingBoxSize = new THREE.Vector3()
const boundingBox = /* @__PURE__ */ new THREE.Box3()
const boundingBoxSize = /* @__PURE__ */ new THREE.Vector3()

export interface BBAnchorProps extends GroupProps {
anchor: THREE.Vector3 | [number, number, number]
35 changes: 18 additions & 17 deletions src/core/Billboard.tsx
Original file line number Diff line number Diff line change
@@ -20,23 +20,24 @@ export type BillboardProps = {
* </Billboard>
* ```
*/
export const Billboard: ForwardRefComponent<BillboardProps, Group> = React.forwardRef<Group, BillboardProps>(
function Billboard({ follow = true, lockX = false, lockY = false, lockZ = false, ...props }, ref) {
const localRef = React.useRef<Group>()
useFrame(({ camera }) => {
if (!follow || !localRef.current) return
export const Billboard: ForwardRefComponent<BillboardProps, Group> = /* @__PURE__ */ React.forwardRef<
Group,
BillboardProps
>(function Billboard({ follow = true, lockX = false, lockY = false, lockZ = false, ...props }, ref) {
const localRef = React.useRef<Group>()
useFrame(({ camera }) => {
if (!follow || !localRef.current) return

// save previous rotation in case we're locking an axis
const prevRotation = localRef.current.rotation.clone()
// save previous rotation in case we're locking an axis
const prevRotation = localRef.current.rotation.clone()

// always face the camera
camera.getWorldQuaternion(localRef.current.quaternion)
// always face the camera
camera.getWorldQuaternion(localRef.current.quaternion)

// readjust any axis that is locked
if (lockX) localRef.current.rotation.x = prevRotation.x
if (lockY) localRef.current.rotation.y = prevRotation.y
if (lockZ) localRef.current.rotation.z = prevRotation.z
})
return <group ref={mergeRefs([localRef, ref])} {...props} />
}
)
// readjust any axis that is locked
if (lockX) localRef.current.rotation.x = prevRotation.x
if (lockY) localRef.current.rotation.y = prevRotation.y
if (lockZ) localRef.current.rotation.z = prevRotation.z
})
return <group ref={mergeRefs([localRef, ref])} {...props} />
})
2 changes: 1 addition & 1 deletion src/core/Bounds.tsx
Original file line number Diff line number Diff line change
@@ -39,7 +39,7 @@ const isOrthographic = (def: THREE.Camera): def is THREE.OrthographicCamera =>
def && (def as THREE.OrthographicCamera).isOrthographicCamera
const isBox3 = (def: any): def is THREE.Box3 => def && (def as THREE.Box3).isBox3

const context = React.createContext<BoundsApi>(null!)
const context = /* @__PURE__ */ React.createContext<BoundsApi>(null!)
export function Bounds({ children, damping = 6, fit, clip, observe, margin = 1.2, eps = 0.01, onFit }: BoundsProps) {
const ref = React.useRef<THREE.Group>(null!)
const { camera, invalidate, size, controls: controlsImpl } = useThree()
2 changes: 1 addition & 1 deletion src/core/CameraControls.tsx
Original file line number Diff line number Diff line change
@@ -38,7 +38,7 @@ export type CameraControlsProps = Omit<
'ref'
>

export const CameraControls: ForwardRefComponent<CameraControlsProps, CameraControlsImpl> = forwardRef<
export const CameraControls: ForwardRefComponent<CameraControlsProps, CameraControlsImpl> = /* @__PURE__ */ forwardRef<
CameraControlsImpl,
CameraControlsProps
>((props, ref) => {
130 changes: 64 additions & 66 deletions src/core/CameraShake.tsx
Original file line number Diff line number Diff line change
@@ -28,77 +28,75 @@ export interface CameraShakeProps {
rollFrequency?: number
}

export const CameraShake: ForwardRefComponent<CameraShakeProps, ShakeController | undefined> = React.forwardRef<
ShakeController | undefined,
CameraShakeProps
>(
(
{
intensity = 1,
decay,
decayRate = 0.65,
maxYaw = 0.1,
maxPitch = 0.1,
maxRoll = 0.1,
yawFrequency = 0.1,
pitchFrequency = 0.1,
rollFrequency = 0.1,
},
ref
) => {
const camera = useThree((state) => state.camera)
const defaultControls = useThree((state) => state.controls) as unknown as ControlsProto
const intensityRef = React.useRef<number>(intensity)
const initialRotation = React.useRef<Euler>(camera.rotation.clone())
const [yawNoise] = React.useState(() => new SimplexNoise())
const [pitchNoise] = React.useState(() => new SimplexNoise())
const [rollNoise] = React.useState(() => new SimplexNoise())
export const CameraShake: ForwardRefComponent<CameraShakeProps, ShakeController | undefined> =
/* @__PURE__ */ React.forwardRef<ShakeController | undefined, CameraShakeProps>(
(
{
intensity = 1,
decay,
decayRate = 0.65,
maxYaw = 0.1,
maxPitch = 0.1,
maxRoll = 0.1,
yawFrequency = 0.1,
pitchFrequency = 0.1,
rollFrequency = 0.1,
},
ref
) => {
const camera = useThree((state) => state.camera)
const defaultControls = useThree((state) => state.controls) as unknown as ControlsProto
const intensityRef = React.useRef<number>(intensity)
const initialRotation = React.useRef<Euler>(camera.rotation.clone())
const [yawNoise] = React.useState(() => new SimplexNoise())
const [pitchNoise] = React.useState(() => new SimplexNoise())
const [rollNoise] = React.useState(() => new SimplexNoise())

const constrainIntensity = () => {
if (intensityRef.current < 0 || intensityRef.current > 1) {
intensityRef.current = intensityRef.current < 0 ? 0 : 1
const constrainIntensity = () => {
if (intensityRef.current < 0 || intensityRef.current > 1) {
intensityRef.current = intensityRef.current < 0 ? 0 : 1
}
}
}

React.useImperativeHandle(
ref,
() => ({
getIntensity: (): number => intensityRef.current,
setIntensity: (val: number): void => {
intensityRef.current = val
constrainIntensity()
},
}),
[]
)
React.useImperativeHandle(
ref,
() => ({
getIntensity: (): number => intensityRef.current,
setIntensity: (val: number): void => {
intensityRef.current = val
constrainIntensity()
},
}),
[]
)

React.useEffect(() => {
if (defaultControls) {
const callback = () => void (initialRotation.current = camera.rotation.clone())
defaultControls.addEventListener('change', callback)
callback()
return () => void defaultControls.removeEventListener('change', callback)
}
}, [camera, defaultControls])
React.useEffect(() => {
if (defaultControls) {
const callback = () => void (initialRotation.current = camera.rotation.clone())
defaultControls.addEventListener('change', callback)
callback()
return () => void defaultControls.removeEventListener('change', callback)
}
}, [camera, defaultControls])

useFrame((state, delta) => {
const shake = Math.pow(intensityRef.current, 2)
const yaw = maxYaw * shake * yawNoise.noise(state.clock.elapsedTime * yawFrequency, 1)
const pitch = maxPitch * shake * pitchNoise.noise(state.clock.elapsedTime * pitchFrequency, 1)
const roll = maxRoll * shake * rollNoise.noise(state.clock.elapsedTime * rollFrequency, 1)
useFrame((state, delta) => {
const shake = Math.pow(intensityRef.current, 2)
const yaw = maxYaw * shake * yawNoise.noise(state.clock.elapsedTime * yawFrequency, 1)
const pitch = maxPitch * shake * pitchNoise.noise(state.clock.elapsedTime * pitchFrequency, 1)
const roll = maxRoll * shake * rollNoise.noise(state.clock.elapsedTime * rollFrequency, 1)

camera.rotation.set(
initialRotation.current.x + pitch,
initialRotation.current.y + yaw,
initialRotation.current.z + roll
)
camera.rotation.set(
initialRotation.current.x + pitch,
initialRotation.current.y + yaw,
initialRotation.current.z + roll
)

if (decay && intensityRef.current > 0) {
intensityRef.current -= decayRate * delta
constrainIntensity()
}
})
if (decay && intensityRef.current > 0) {
intensityRef.current -= decayRate * delta
constrainIntensity()
}
})

return null
}
)
return null
}
)
Loading