MeshSurfaceSampler and three fiber

Questions
1

I don’t succeed to make MeshSurfaceSampler works with three fibber.

what is the way to implement it officially ? I would like to put some sphere on the surface of a fbx model.

Thank you.

2

There’s an abstraction for it in drei, <Sampler />:

https://github.com/pmndrs/drei?tab=readme-ov-file#sampler

1 Like
3

I am not succeeding to make that work, even with the examples given in the documentation. Can you give me a very simple example of some spheres positionned on the surface of a square ?

4

I make this:

import React, { useRef, useEffect, Suspense } from "react";
import { Canvas, useFrame, extend } from "@react-three/fiber";
import { Box, Float, Text, Sampler } from "@react-three/drei";
import "./styles.css";
import * as THREE from "three";

import { Environment, OrbitControls } from "@react-three/drei";

const transformInstance = ({ dummy, sampledMesh, position, normal }) => {
  dummy.scale.setScalar(Math.random() * 0.1);

  const worldPosition = sampledMesh.localToWorld(position);
  dummy.position.copy(worldPosition);

  dummy.lookAt(normal.clone().add(position));
  dummy.rotation.y += Math.random() - 0.5 * (Math.PI * 0.5);
  dummy.rotation.z += Math.random() - 0.5 * (Math.PI * 0.5);
  dummy.rotation.x += Math.random() - 0.5 * (Math.PI * 0.5);
};

const Kaka = () => {
  return (
    <Sampler
      weight={"normal"} // the name of the attribute to be used as sampling weight
      transform={transformInstance} // a function that transforms each instance given a sample. See the examples for more.
      count={16} // Number of samples
    >
      <mesh>
        <sphereGeometry args={[2]} />
      </mesh>

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

export default function App() {
  return (
     <Canvas>
      <OrbitControls />
      <color attach="background" args={[10, 0, 0]} />
      <directionalLight intensity={0.5} />

      <Suspense fallback={null}>
        <Kaka />
      </Suspense>
    </Canvas>
  );
}
5

It is accessible here :https://codesandbox.io/p/devbox/camembert-sqdd5t?file=%2Fsrc%2FArr.jsx%3A11%2C1