leva icon indicating copy to clipboard operation
leva copied to clipboard

How to use Select properly?

Open vvrnck opened this issue 1 year ago • 2 comments

Greetings all!

So, a little bit of contextualization first. I'm totally new to three.js and decide to give it a try to learn, but the examples and documentations are kinda old and unless you know what are you doing there are not much else to do, which lead me to find react-three-fiber, drei and so on (thank you guys, btw!).

I'm Currently trying to use leva to configure a three object that is saved on zustand store. I'm using the select input to work like a preset (meshStandardMaterial, meshPhongMaterial, etc) that will render specifics controllers to each type of material.

const options = {                 
    [STANDARD_MATERIAL]: MESH_STANDARD_MATERIAL,
    [PHONG_MATERIAL]: MESH_PHONG_MATERIAL,
    [NORMAL_MATERIAL]: MESH_NORMAL_MATERIAL 
}

const materialPresets = useControls({
        materialPreset: {
            value: options[material.type], // material is a threejs material passed as props
            options: options,
            onChange: (value) => {
                let newCreationObject = Object.assign({}, three.creationObject);
                newCreationObject.material = value;
                updateStore("three", { creationObject: newCreationObject });
            }
        }
    });

It is working fine until I unmount the component and mount it again. (The material props is always a three standard material) Lets say that I changed to a meshNormalMaterial, my three object is updated and it works fine, so i close leva ui, but when I open it again the object have the correct material (standardMaterial) but looks like the value on leva ui is not being setted or is cached (in this example it would show meshNormalMaterial).

  • Also, - I don't know if it is the expected behavior - but one thing that I notice is that everytime my component is mounted, onChange is called with the last value that was setted

Sandbox: https://codesandbox.io/s/sleepy-cloud-3zk8rx?file=/src/MaterialController.js

Am I missing something in how to use it? Hope you guys can help me and thanks again for those amazing libs!

vvrnck avatar Aug 01 '22 13:08 vvrnck

@vvrnck would you be able to set up a sandbox? Yes, if you look at all arguments from onChange there's more than just value: path, and context are also in there.

dbismut avatar Aug 03 '22 18:08 dbismut

@dbismut Sure! I added it on the main issue

vvrnck avatar Aug 03 '22 23:08 vvrnck