Distribute points on sphere in three.js

(c) Philip van Heemstra

by PhilQ

HTML

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/[email protected]/build/three.module.js",
			"OrbitControls": "https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js",
			"Color": "https://colorjs.io/dist/color.js"
		}
	}
</script>

CSS

:root {
	--icon-color: #f5f5f5;
}

body {
	background-color: #ffffff;
}
body::before {
	content: '';
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	opacity: 1;
	background-color: var(--icon-color);
	transition: background-color 1s ease;
	z-index: -2;
}
body::after {
	content: '';
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
	/* background: radial-gradient(ellipse at center, transparent, rgb(0 0 0 / 75%)); */
	background: radial-gradient(ellipse at center, transparent, #f5f5f5);
	/* background-blend-mode: multiply; */
	z-index: -1;
}

JavaScript

// import * as THREE from 'https://unpkg.com/[email protected]/build/three.module.js';
// import { OrbitControls } from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
// import Color from 'https://colorjs.io/dist/color.js';
import * as THREE from 'three';
import { OrbitControls } from 'OrbitControls';
//import Color from 'Color';

var camera, scene, renderer, controls, geometry, material, mesh,
	clock = new THREE.Clock(),
	previousTime = 0,
	loader_tex,
	materials = [],
	icons = [
		['bash.png',          hexToHSL('47b353')], // 3e474a
		['bootstrap.png',     hexToHSL('6a10f3')],
		['css3.png',          hexToHSL('2659a5')],
		['elementor.png',     hexToHSL('92003b')],
		['git.png',           hexToHSL('f54d27')],
		['github.png',        hexToHSL('6f57ff')],
		['githubactions.png', hexToHSL('2088ff')],
		['gulp.png',          hexToHSL('cf4647')],
		['htaccess.png',      hexToHSL('9c2063')],
		['html5.png',         hexToHSL('e44d26')],
		['illustrator.png',   hexToHSL('ff9a00')],
		['indesign.png',      hexToHSL('ff3366')],
		['jest.png',          hexToHSL('15c213')],
		['jquery.png',        hexToHSL('0c61a7')],
		['js.png',            hexToHSL('f7e028')],
		['laravel.png',       hexToHSL('ff2d20')],
		['lightroom.png',     hexToHSL('31a8ff')],
		['markdown.png',      hexToHSL('ffffff')],
		['matplotlib.png',    hexToHSL('11557c')],
		['mysql.png',         hexToHSL('006189')],
		['nodejs.png',        hexToHSL('679e63')],
		['npm.png',           hexToHSL('cb3837')],
		['numpy.png',         hexToHSL('4d77cf')],
		['office365.png',     hexToHSL('eb3c00')],
		['photoshop.png',     hexToHSL('31a8ff')],
		['php.png',           hexToHSL('4f5b93')],
		['python.png',        hexToHSL('ffc331')],
		['react.png',         hexToHSL('61dafb')],
		['regex.png',         hexToHSL('ffffff')],
		['sass.png',          hexToHSL('cc6699')],
		['sketchup.png',      hexToHSL('e7242d')],
		['sublime.png',       hexToHSL('ff9800')],
		['tensorflow.png',   ...