R3F ( React Three Fiber ) place plane on other mesh demo

r3f-cursor-on-mesh.js

import { useRef } from "react";
import { Canvas } from "react-three-fiber";

function Demo() {
  const circleRef = useRef();

  return (
    <>
      <mesh
        rotation={[4, 0.3, -0.3]}
        onPointerMove={(e) => {
          if (circleRef.current) {
            const pos = e.point.clone();
            const dir = e.face.normal.clone();
            dir.applyQuaternion(e.object.quaternion);

            circleRef.current.lookAt(e.point.add(dir));
            circleRef.current.position.copy(pos.add(dir.divideScalar(2 << 5)));
          }
        }}
      >
        <boxBufferGeometry args={[2, 2, 2]} />
        <meshPhongMaterial color="red" />
      </mesh>
      <mesh ref={circleRef}>
        <circleGeometry args={[0.2, 32]} />
        <meshBasicMaterial color="yellow" />
      </mesh>
    </>
  );
}

export default function App() {
  return (
    <div className="App" style={{ width: "100vw", height: "100vh" }}>
      <Canvas>
        <Demo />
        <ambientLight intensity={0.1} />
        <directionalLight />
      </Canvas>
    </div>
  );
}

Live Demo: https://codesandbox.io/s/r3f-cursor-demo-pzfqmg?file=/src/App.js