Hi,
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 (object.material.name.includes('Green_Grass')) {
const numBlades = 1000
const sampler = new MeshSurfaceSampler(object)
.setWeightAttribute('uv')
.build();
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);
dummy.position.copy(_position);
dummy.lookAt(_normal);
dummy.updateMatrix();
sampleMesh.setMatrixAt(i, dummy.matrix);
}
sampleMesh.instanceMatrix.needsUpdate = true;
gltf.scene.add(sampleMesh);
}
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
key={index}
object={def.scene}
{...def.transforms}
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?