Skip to content

Instantly share code, notes, and snippets.

@supahfunk
Last active January 29, 2024 12:53
Show Gist options
  • Save supahfunk/5426232d729f297b902267e719f014ce to your computer and use it in GitHub Desktop.
Save supahfunk/5426232d729f297b902267e719f014ce to your computer and use it in GitHub Desktop.
React-three fiber instanced mesh with Drei
import { useGLTF, Instances, Instance } from '@react-three/drei'
import { MathUtils } from 'three'
const InstancedMesh = () => {
const { nodes } = useGLTF('./model.glb')
const randomVector = (r) =>
Array(3)
.fill()
.map(() => MathUtils.randFloatSpread(r))
const randomData = Array.from({ length: 8 }, () => ({
position: randomVector(0.5),
rotation: randomVector(Math.PI * 2)
}))
const renderModel = (model) => {
return (
<Instances geometry={model.geometry}>
<meshStandardMaterial color={0xcccccc} />
{randomData.map((props, i) => (
<Instance {...props} key={i.toString()} />
))}
</Instances>
)
}
return renderModel(nodes.geometry)
}
export default InstancedMesh
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment