Not able to work with Height Field collider

[ApilKakkar]

import { Canvas } from '@react-three/fiber'
import { Physics, RigidBody, HeightfieldCollider } from '@react-three/rapier'

export default function App() {
return (





<mesh position={[0, 2, 0]}>
<boxGeometry args={[1, 1, 1]} />





)
}

function TestHeightfield() {
// 2x2 grid => you need exactly 4 height values
const heights = [0, 1, 1, 0];

return (

<HeightfieldCollider
args={[2, 2, heights, { x: 1, y: 1, z: 1 }]}
/>

);
}

[theshanergy]

This is poorly documented but after a huge struggle session the other day on my own project I figured it out. HeightfieldCollider expects heights as (width + 1) * (depth + 1).

So, in your 2x2 example, you actually need 9 height values.

Working collider:

<HeightfieldCollider args={[2, 2, [1, 2, 1, 2, 1, 2, 1, 2, 1], { x: 1, y: 1, z: 1 }]} />

Example generation function:

const noise = new Noise(Math.random());
const values = [];
const WIDTH = 3;
const DEPTH = 3;

for (let z = 0; z <= DEPTH; z++) { // depth + 1
  for (let x = 0; x <= WIDTH; x++) { // width + 1
    let height = noise.perlin2(x, z);
    values.push(height);
  }
}