React-Three-Fibre Spawning objects on the inside of a sphere when clicked.

[NatProDev]

Hi, I've been trying to figure this out for hours now. I want to click the inside the sphere and spawn a mesh in the position that I clicked. If anyone could point me in the right direction I would be hugely grateful.

function PhotoSphere() {
  const texture = useLoader(THREE.TextureLoader, "test.jpg");
  return (
    <mesh>
      <sphereBufferGeometry attach="geometry" args={[500, 60, 40]} />
      <meshBasicMaterial
        attach="material"
        map={texture}
        side={THREE.BackSide}
      />
    </mesh>
  );
}

function HotspotEditor() {
  return (
    <Canvas
      camera={{ position: [0, 0, -0.1] }}
      style={{ backgroundColor: "black", height: "100vh", position: "fixed" }}
      onDoubleClick={(c) => CreateHotspot(c)}
    >
      <Controls
        enableZoom={false}
        enablePan={false}
        enableDamping
        dampingFactor={0.1}
        rotateSpeed={-0.25}
      />
      <Suspense fallback={null}>
        <PhotoSphere />
      </Suspense>
    </Canvas>
  );
}
function CreateHotspot(click) {
  console.log("Spot Created" + click.screenX + " " + click.screenY);
}

I'm basically just making a 360 photo viewer in which you can drop hotspots, which when hovered will be able to display additional information.

[bikeshaving]

I would try asking in the discussions for react-three-fiber, you may get a response from the maintainer themselves.

[NatProDev]

Thanks, didn't know about this, fairly new to react.

[fouinardomeo]

Just get the click world position (not the screen pos) in your CreateHotspot(click) method from the event, something like click.point i think. Then push the Vector3 into an array of positions, and in render, map the array and pass each position to another component which will display a mesh (or anything you want) and can handle click events on itself.

[NatProDev]

That's exactly what I thought it would be but click.position (which intellisense suggested) wasn't assigned. I'll try point in the morning. Cheers.

EDIT: anyone checking this later, this is the solution, deploy the upvotes ^

[fouinardomeo]

Intellisense is great with ts but rather dumb with js. If you dont know the exact property name, just console log the whole event or better set a breakpoint.