[feat] Add copy vanilla js button

[AlexWarnes]

Adds a button to the debugger to copy the vanilla js code and some util fns to support the serializing.

Let me know what you think!

Examples from the configurator (formatting varies depending on where you paste):

JSX:

    <LayerMaterial color={16711422} name={"Monkey w/ freckles"}>
      <Depth near={-0.06800000000000028} far={5} origin={[0,0,3]} colorA={"#fe96dc"} colorB={"#68eefb"} />
    <Depth near={1} far={3} origin={[0,0,-1.3670000000000089]} colorA={"#feb600"} colorB={"#000000"} mode={"screen"} />
    <Fresnel color={"#fefefe"} power={1.9099999999999757} mode={"softlight"} />
    <Noise colorA={"#84fee9"} colorB={"#969696"} colorC={"#000000"} colorD={"#000000"} scale={50} offset={[0,0,0]} name={"noise"} mode={"lighten"} />
    </LayerMaterial>

Vanilla JS:

 new LayerMaterial({
  color: new THREE.Color('#fefefe'),
  name: 'Monkey w/ freckles',

  layers: [
    new Depth({
      near: -0.06800000000000028,
      far: 5,
      origin: [0, 0, 3],
      colorA: new THREE.Color('#fe96dc'),
      colorB: new THREE.Color('#68eefb')
    }),
    new Depth({
      near: 1,
      far: 3,
      origin: [0, 0, -1.3670000000000089],
      colorA: new THREE.Color('#feb600'),
      colorB: new THREE.Color('#000000'),
      mode: 'screen'
    }),
    new Fresnel({
      color: new THREE.Color('#fefefe'),
      power: 1.9099999999999757,
      mode: 'softlight'
    }),
    new Noise({
      colorA: new THREE.Color('#84fee9'),
      colorB: new THREE.Color('#969696'),
      colorC: new THREE.Color('#000000'),
      colorD: new THREE.Color('#000000'),
      scale: 50,
      offset: [0, 0, 0],
      name: 'noise',
      mode: 'lighten'
    })
  ]
});

[FarazzShaikh]

Looks really cool. Just a quick thing before I review, we should pass in colors as plain hex strings instead of color objects. Keeps it clean

[AlexWarnes]

Oh good to know. I think I was making it more difficult than it needed to be. I'll push an update tomorrow.

[AlexWarnes]

Updated color serialization for plain hex strings. New output:

  new LayerMaterial({
    color: "#fefefe",
    name: "Monkey w/ freckles",

    layers: [
      new Depth({
        near: -0.06800000000000028,
        far: 5,
        origin: [0,0,3],
        colorA: "#fe96dc",
        colorB: "#68eefb",

      }),
     new Depth({
        near: 1,
        far: 3,
        origin: [0,0,-1.3670000000000089],
        colorA: "#feb600",
        colorB: "#000000",
        mode: "screen",

      }),
     new Fresnel({
        color: "#fefefe",
        power: 1.9099999999999757,
        mode: "softlight",

      }),
     new Noise({
        colorA: "#84fee9",
        colorB: "#969696",
        colorC: "#000000",
        colorD: "#000000",
        scale: 50,
        offset: [0,0,0],
        name: "noise",
        mode: "lighten",

      })
    ]
  })

[FarazzShaikh]

Great stuff! Thanks!