MeshSurfaceSampler - incorrect position


I am traversing scenes I load with a GLTF loader, and trying to put foliage on meshes with a specific material. Something like:

gltf.scene.traverse(object => {

                if ('Green_Grass')) {
                  const numBlades = 1000
                  const sampler = new MeshSurfaceSampler(object)

                  const sampleMesh = new InstancedMesh(grassBlade, grassMaterial, numBlades);

                  const dummy = new Object3D();
                  const _position = new Vector3();
                  const _normal = new Vector3();

                  // Sample randomly from the surface, creating an instance of the sample
                  // geometry at each sample point.
                  for (let i = 0; i < numBlades; i++) {

                    sampler.sample(_position, _normal);


                    sampleMesh.setMatrixAt(i, dummy.matrix);

                  sampleMesh.instanceMatrix.needsUpdate = true;


This is using react-three-fiber. The gltf scenes are then included in my top-level scene using:

{Object.values(objectDefs).map((def, index) => (
        def.scene ? (<primitive

With the transforms being scale, rotation, and position (in this order).

Unfortunately, this is not yielding the desired result, and all of my foliage appears on the left side of my scene, far away from the meshes it should be attached to.

What do I seem to be doing wrong?

It may be that the Green_Grass object has a position/rotation/scale of its own, or has inherited that from a parent. Attaching sampleMesh to the root of the scene, it won’t get that transform, and it returns samples in the local space of the sampled mesh. Perhaps attach sampleMesh to the Green_Grass object instead? Or you could transform each sample position into world space.

Sounds quite likely. Thanks for the prompt reply!