Stuck with MeshPhongMaterial

I am trying to add a similar menu of material style changed to my own gltf file to make a similar experience to this example provided on the website but it seems the github code was deleted.

I understand that the menu is using Dat-Gui

Three.js Material Browser

If any one could help me with the process of going about adding a similar lay out. That would be really helpful. I can post my current code if needed.

import * as THREE from "three";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader.js";
import * as Tone from "tone";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
import "./styles.css";

//Trying to implment dampening for orbit controls to give nice spin
//import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
// this code from
////import { OrbitControls } fromPaulsedOrbitControltrol.js";

let scene, camera, renderer;
let geometry, material, cube;
let colour, intensity, light;
let ambientLight;

let orbit;

let sceneHeight, sceneWidth;

let clock, delta, interval;
let player, meter;
let modelLoaded;
let logo;

let loader;
let mixers;

let startButton = document.getElementById("startButton");
startButton.addEventListener("click", init);

function init() {
  // remove overlay
  let overlay = document.getElementById("overlay");
  modelLoaded = false;
  //create clock and set interval at 30 fpx
  clock = new THREE.Clock();
  delta = 0;
  interval = 1 / 25;

  //create scene
  sceneWidth = window.innerWidth;
  sceneHeight = window.innerHeight;
  scene = new THREE.Scene();
  scene.background = new THREE.Color(0xdfffff);

  //create camera
  camera = new THREE.PerspectiveCamera(
    window.innerWidth / window.innerHeight,
  camera.position.x = 0;
  camera.position.y = 0;
  camera.position.z = 12;
  //specify renderer and add it to document
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setSize(window.innerWidth, window.innerHeight);

  //create the orbit controls instance so we can use the mouse move around scene
  orbit = new OrbitControls(camera, renderer.domElement);
  orbit.enableZoom = true;

  // lighting
  colour = 0xffffff; // white
  intensity = 0.8; // 80% intensity
  light = new THREE.DirectionalLight(colour, intensity); // create new directional light
  light.position.set(-20, 50, -5); //setting initial lights position
  light.castShadow = true; // ensures shadows will be left behind objects from the light = 0.5; = 5000; = -500; = -500; = 500; = 500;
  light.shadow.mapSize.width = 2048;
  light.shadow.mapSize.height = 2048;
  ambientLight = new THREE.AmbientLight(0xffffff, 0.25);

  // This was a test to see if my plane was creating shadows
  //geometry = new THREE.BoxGeometry();
  //material = new THREE.MeshNormalMaterial();
  //cube = new THREE.Mesh(geometry, material);
  //cube.position.set(10, -7, 0);

  //Create a plane that receives shadows (but does not cast them)
  const planeGeometry = new THREE.PlaneBufferGeometry(100, 100, 32);
  const planeMaterial = new THREE.MeshStandardMaterial({ color: 0xdfffff });
  const plane = new THREE.Mesh(planeGeometry, planeMaterial);
  plane.receiveShadow = true;
  plane.rotateX(-Math.PI / 2);
  plane.position.set(0, -10, 0);

  mixers = [];

  window.addEventListener("resize", onWindowResize, false); //resize callback

// stop animating (not currently used)
function stop() {

// simple render function

function render() {
  renderer.render(scene, camera);

// start animating

function play() {
  //using the new setAnimationLoop method which means we are WebXR ready if need be
  renderer.setAnimationLoop(() => {

//update function

function update() {
  //rotating 3D logo
  //update stuff in here

function onWindowResize() {
  //resize & align
  sceneHeight = window.innerHeight;
  sceneWidth = window.innerWidth;
  renderer.setSize(sceneWidth, sceneHeight);
  camera.aspect = sceneWidth / sceneHeight;

function loadModels() {
  loader = new GLTFLoader();

  // A reusable function to set up the models. We're passing in a position parameter
  // so that they can be individually placed around the scene

  const onLoadStatic = function (gltf, position) {
    logo = gltf.scene.children[0]; // assign the first child of the scene contained in the gltf file to a varible called robot
    logo.position.copy(position); //copy the position passed from the laod function call

    modelLoaded = true; // once model has loaded, set out modelLoaded boolean flag to true
    scene.add(logo); // add out model to the scene

  //the loader will report the laoding process to this function
  const onProgress = function () {

  //the loader will send any error messages to this function and we'll log to the console
  const onError = function (errorMessage) {
    console.log("Load Error", errorMessage);

  const Logo = new THREE.Vector3(0, -5, 0);
    // call the loader's load function
    "models/Logo.glb", //specify file path
    function (gltf) {
      // specify the callback function to call once the model has loaded
      onLoadStatic(gltf, Logo);
    onProgress, // specify progres callback
    onError // specify error callback

It seems you codesandbox requires a sign in?

Hey, I posted it, not sure how to fix codesandbox, I think it may be too long to post though