feat: multimaterial

src/core/MultiMaterial.tsx

@@ -0,0 +1,28 @@
+/**
+ * Original idea by https://x.com/verekia
+ */
+
+import * as React from 'react'
+
+export function MultiMaterial(props: JSX.IntrinsicElements['group']) {
+  const group = React.useRef(null!)
+  React.useLayoutEffect(() => {
+    const parent = (group.current as any)?.parent
+    const geometry = parent?.geometry
+    if (geometry) {
+      const oldMaterial = parent.material
+      parent.material = (group.current as any).__r3f.objects
+      const oldGroups = [...geometry.groups]
+      geometry.clearGroups()
+      parent.material.forEach((material, index) => {
+        if (index < parent.material.length - 1) material.depthWrite = false
+        geometry.addGroup(0, Infinity, index)
+      })
+      return () => {
+        parent.material = oldMaterial
+        geometry.groups = oldGroups
+      }
+    }
+  })
+  return <group ref={group} {...props} />
+}

src/core/index.ts

@@ -88,6 +88,7 @@ export * from './MeshReflectorMaterial'
 export * from './MeshRefractionMaterial'
 export * from './MeshTransmissionMaterial'
 export * from './MeshDiscardMaterial'
+export * from './MultiMaterial'
 export * from './PointMaterial'
 export * from './shaderMaterial'
 export * from './softShadows'