UI dropdown element to swap different models

[FusionSwapDev]

Hey guys, im pretty new to R3F and im trying to figure out how to build custom UI elements that would control the objects in my scene.
Basically i would need something like useControl from Leva, but custom.

Example:
three UI buttons, each button displays different glb model.

If theres a solution, could you also provide short snippet so i see how it works.

Thanks

[conor-v]

Hey @FusionSwapDev I made some custom controls in codesandbox. I hope this helps. the buttons control object and the range slider controls the scale of the rendert 3D object.

link --> https://codesandbox.io/s/competent-wing-e0cgx6

[conor-v]

it works with a simple zustand store. with an update function you can use in the controls.

store

import create from "zustand";
import { mountStoreDevtool } from "simple-zustand-devtools";

const inititalState = {
  canvas: {
    object: "axe",
    scale: 0.5
  },
  camera: {
    position: [0, 1, 10]
  }
};

export const useStore = create((set) => ({
  ...{ ...inititalState },
  updateObject: (object, field, value) =>
    set(
      (state) =>
        (state = {
          ...state,
          [object]: { ...state[object], [field]: value }
        })
    )
}));

if (process.env.NODE_ENV === "development") {
  mountStoreDevtool("Store", useStore);
}

getting object and update function from store

const Controls = () => {
  const updateObject = useStore((state) => state.updateObject);
  const object = useStore((state) => state.canvas.object);

onclick update store value

 <button
    onClick={() => updateObject("canvas", "object", "axe")}
    style={{ background: object === "axe" ? "red" : "grey" }}
 >
    axe
</button>

inside 3d comp check store value

 return (
    <group scale={scale}>
      {object === "weigth" && <Weigth />}

      {object === "beer" && <Beer />}

      {object === "axe" && <Axe />}
    </group>
  );

[FusionSwapDev]

thank you so much, now when i see it it makes sense, but had troubles to figure it out myself.
thanks again

[conor-v]

@FusionSwapDev no problem but don't forget to mark an answer correct if it helped. this way other people with the same problems can quickly find the answers. and the same question should not be answered over and over again. :)

[ayeshah66]

Thanks a lot, guys. I thought this wouldn't work on my website https://lescobillonline.net but this is a much success for me.
Keep it.
Thanks a lot !!