From 5d07ec9c9be437885e9a9326903ebf78540fdf3f Mon Sep 17 00:00:00 2001
From: Cody Bennett <hi@codyb.co>
Date: Thu, 2 Jan 2025 11:43:49 -0600
Subject: [PATCH] fix: use new instance shape

---
 src/core/MotionPathControls.tsx |  9 +++++++--
 src/core/MultiMaterial.tsx      | 11 +++++++----
 2 files changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/core/MotionPathControls.tsx b/src/core/MotionPathControls.tsx
index 01d5d00df..160f9995c 100644
--- a/src/core/MotionPathControls.tsx
+++ b/src/core/MotionPathControls.tsx
@@ -1,6 +1,6 @@
 import * as THREE from 'three'
 import * as React from 'react'
-import { ThreeElements, useFrame, useThree } from '@react-three/fiber'
+import { ThreeElements, useFrame, useThree, Instance } from '@react-three/fiber'
 import { easing, misc } from 'maath'
 
 export type MotionPathProps = Omit<ThreeElements['group'], 'ref'> & {
@@ -113,7 +113,12 @@ export const MotionPathControls = /* @__PURE__ */ React.forwardRef<THREE.Group,
 
     React.useLayoutEffect(() => {
       path.curves = []
-      const _curves = curves.length > 0 ? curves : (ref.current as any)?.__r3f.objects
+      const _curves =
+        curves.length > 0
+          ? curves
+          : (ref.current as THREE.Group & { __r3f: Instance<THREE.Group> }).__r3f!.children.map(
+              (instance) => instance.object
+            )
       for (var i = 0; i < _curves.length; i++) path.add(_curves[i])
 
       //Smoothen curve
diff --git a/src/core/MultiMaterial.tsx b/src/core/MultiMaterial.tsx
index 7b6f7b63f..49b0cf596 100644
--- a/src/core/MultiMaterial.tsx
+++ b/src/core/MultiMaterial.tsx
@@ -2,19 +2,22 @@
  * Original idea by https://x.com/verekia
  */
 
-import { ThreeElements } from '@react-three/fiber'
+import { ThreeElements, Instance } from '@react-three/fiber'
 import * as React from 'react'
+import * as THREE from 'three'
 
 export type MultiMaterialProps = Omit<ThreeElements['group'], 'ref'>
 
 export function MultiMaterial(props: MultiMaterialProps) {
-  const group = React.useRef(null!)
+  const group = React.useRef<THREE.Group>(null!)
   React.useLayoutEffect(() => {
-    const parent = (group.current as any)?.parent
+    const parent = group.current.parent as THREE.Mesh<THREE.BufferGeometry, THREE.Material[]> | undefined
     const geometry = parent?.geometry
     if (geometry) {
       const oldMaterial = parent.material
-      parent.material = (group.current as any).__r3f.objects
+      parent.material = (group.current as THREE.Group & { __r3f: Instance<THREE.Group> }).__r3f.children.map(
+        (instance) => instance.object
+      ) as THREE.Material[]
       const oldGroups = [...geometry.groups]
       geometry.clearGroups()
       parent.material.forEach((material, index) => {