three.js get color hex

by orion_prime

HTML

<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script async src="https://unpkg.com/[email protected]/dist/es-module-shims.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/[email protected]/build/three.module.js",
      "three/addons/": "https://unpkg.com/[email protected]/examples/jsm/"
		}
	}
</script>

CSS

body {
	margin: 0px;
}

JavaScript

import * as THREE from 'three';
import {
  OrbitControls
} from 'three/addons/controls/OrbitControls.js';
/* import {
  GUI
}from 'three/addons/libs/lil-gui.module.min.js'; */


let mesh, renderer, scene, camera, controls, gui;

init();
animate();


function init() {
  gui = new lil.GUI({title:"get color"})
  // renderer
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.encoding = THREE.SRGBEncoding
  document.body.appendChild(renderer.domElement);

  // scene
  scene = new THREE.Scene();

  // camera
  camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.set(20, 20, 20);

  // controls
  controls = new OrbitControls(camera, renderer.domElement);

  // ambient
  scene.add(new THREE.AmbientLight(0x222222));

  // light
  const light = new THREE.DirectionalLight(0xffffff, 1);
  light.position.set(20, 20, 0);
  scene.add(light);

  // axes
  scene.add(new THREE.AxesHelper(20));

  // geometry
  const geometry = new THREE.SphereGeometry(5, 32, 16);

  // material
  const material = new THREE.MeshStandardMaterial({
    roughness: 0.5,


  });

  material.color.set("#E7B300")
 
  // mesh
  mesh = new THREE.Mesh(geometry, material);
  scene.add(mesh);
  
  const param = {
    hex: "#E7B300",
    getHexString: '#' + material.color.getHexString()
  }

  gui.addColor(param, 'hex').onChange((v) => {
    material.color.set(v)
   	param.getHexString= '#' + material.color.getHexString()
  })
  gui.add(param, 'hex').listen()
  gui.add(param, 'getHexString').listen()

}

function animate() {

  requestAnimationFrame(animate);

  renderer.render(scene, camera);

}