useConfigurator

useConfigurator can be used to interact with the asset's configurator. It requires the asset to be initialized elsewhere (via the useAsset or useModel hooks).

Canvas Context

ThreekitCanvas is required in order to access assets outside of the Canvas element.

useConfigurator

// initialize our asset
const [nodes] = useModel({ id: 'uuid', refkey: 'my-model', configuration: {} });

// elsewhere...
const [attributes, setConfiguration] = useConfigurator('my-model');

useConfigurator returns an array, with the array of attributes as the first argument, and a function to update the configuration in the second.

Example

// Simple configurator example that displays number attributes
function MyConfigurator({ refkey }: { refkey: string }) {
  const [attributes, setConf] = useConfigurator(refkey);

  function changeNumber(name: string) {
    return (ev: any) => {
      setConf({ [name]: Number(ev.target.value) });
    };
  }

  const numAttrs = attributes.filter((attr) => attr.type === 'Number');

  return (
    <ul>
      {numAttrs.map((attr) => (
        <li key={attr.id}>
          <label>{attr.name} </label>
          <input
            type="number"
            name={attr.name}
            defaultValue={attr.value}
            onChange={changeNumber(attr.name)}
          />
        </li>
      ))}
    </ul>
  );
}