Randomly set point on model's surface

[RedPandore]

Hello, I am creating a React project and I want to add a 3D model that the user can interact with.
Following the documentation, I imported my model (GLB format) I configured my camera.
Now I want to add random points on the surface of the model (like on this example => example )

Unfortunately, I cannot find the method to be applied in the Three Fiber documentation.
Anyone have a lead?

Thank you for your time !

[mwmwmw]

I think your best bet is to do the mesh sampling imperatively in a useEffect() or useMemo()

It's pretty common to work imperatively when working with instanced meshes.

Basically, you'd setup the mesh sampler by passing a reference to a mesh into it. Then, in useFrame or useEffect, adding/updating the meshes to the sampled points.

You could generalize this to a component to reuse.

<MeshSampler meshesToInstance={[array of meshes]}>
   <MeshToSample />
</MeshSampler>

I'll see if I can squeeze in an example today.

[mwmwmw]

Alright, as clean as I can get it without rethinking my approach.

https://codesandbox.io/s/basic-surface-sampling-3-nd48q5?file=/src/index.js

Usage:

    <SampledSurface instance={referenceToInstanceMesh}>
      <mesh> 
        <sphereBufferGeometry args={[2, 10]} />
        <meshStandardMaterial color={0x333333} />
      </mesh>
    </SampledSurface>

Not perfect but should get you going!

[RedPandore]

Oh thank for you'r reply !! I will try this now !

[emalorenzo]

Thanks @mwmwmw for this examples! It helped me a lot to understand how this works and who to put it all together

[drcmda]

i think drei also has a component for this. https://github.com/pmndrs/drei#sampler

// This simple example scatters 1000 spheres on the surface of the sphere mesh.
<Sampler
  weight={"normal"} // the name of the attribute to be used as sampling weight
  transform={transformPoint} // a function that transforms each instance given a sample. See the examples for more.
>
  <mesh>
    <sphereGeometry args={[2]} />
  </mesh>

  <instancedMesh args={[null, null, 1_000]}>
    <sphereGeometry args={[0.1]}>
  </instancedMesh>
</Sampler>

[emalorenzo]

so cool that even this is on Drei, @drcmda this Sampler can handle multiple instanced mesh? I have a Tree model that has 2 meshes and 2 materials