Icosahedron Dome with rounded edges and flat floor

Based on a fork of this Jsfiddle by Paul West, [email protected]: https://jsfiddle.net/prisoner849/Lsn3pq90/

by Chrisssie

HTML

<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{
  overflow: hidden;
  margin: 0;
}

JavaScript

import * as THREE from "three";
import {
  OrbitControls
} from "three/addons/controls/OrbitControls.js";
import {toCreasedNormals} from "three/addons/utils/BufferGeometryUtils.js";
import { VertexNormalsHelper } from 'three/addons/helpers/VertexNormalsHelper.js';

let texture;

const textureLoader = new THREE.TextureLoader();
texture = textureLoader.load(
    'https://vielzutun.ch/wordpress/Danni_animation/Three.js/textures/pano.jpg',)
texture.colorSpace = THREE.SRGBColorSpace
texture.mapping = THREE.EquirectangularReflectionMapping;



let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(45, innerWidth / innerHeight, 1, 100);
camera.position.set(0, 0, 20);
let renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

window.addEventListener("resize", event => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
})

let controls = new OrbitControls(camera, renderer.domElement);
controls.enableDamping = true;

let light = new THREE.DirectionalLight(0xffffff, Math.PI);
light.position.set(1, 0.25, 1);
scene.add(light, new THREE.AmbientLight(0xffffff, Math.PI * 0.5));


let g = new THREE.IcosahedronGeometry(5, 10);
let pos = g.attributes.position;
for(let i = 0; i < pos.count; i++){
	let x = pos.getX(i);
  let y = pos.getY(i);
  let z = pos.getZ(i);
  
  let r = Math.hypot(x, z);
  let yCurr = y;
  if(y < 0 && r > 4){
    yCurr = -Math.sqrt(1 - THREE.MathUtils.clamp(r - 4, 0, 1) ** 2);
  } else if (y < 0 && r <= 4){
  	yCurr = -1;
  }
  
  pos.setY(i, yCurr);
}

g = toCreasedNormals(g);

let m = new THREE.MeshPhongMaterial({color: "blue", side: THREE.DoubleSide, wireframe: false});
let c = new THREE.MeshBasicMaterial( {
				 			envMap: texture,
				 			combine: THREE.MultiplyOperation,
			    		reflectivity: 1.0,
			    		side: THREE.DoubleSide,
              wireframe: false
		 		}...