JSFiddle - React, Tailwind, and code Playground

by gerdonabbink

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/91/three.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>

CSS

html, body {
  margin: 0;
  padding: 0;
}

JavaScript

let camera, scene, controls, renderer;

let initThree = function () {
    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 500;
    scene.add(camera);

    renderer = new THREE.WebGLRenderer();
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(window.innerWidth, window.innerHeight);

    document.body.appendChild(renderer.domElement);
    
    controls = new THREE.OrbitControls(camera,renderer.domElement);
}

let setupObjects = function () {
    let material = new THREE.MeshNormalMaterial();
	
    let geometry = new THREE.CubeGeometry(50, 50, 50);
	
	let radius = 50;
	let cylGeom = new THREE.CylinderGeometry(radius, radius, 50, radius, 50);
	cylGeom.computeBoundingBox();

    let mesh = new THREE.Mesh(geometry, material);
	let cylMesh = new THREE.Mesh(cylGeom, material);
	
	cylMesh.material.transparent = true;
	//cylMesh.material.opacity = 0.6;
   
   	mesh.rotation.set(10, 20, 0);
    mesh.position.y += 100;
	   	
    scene.add(mesh);
	scene.add(cylMesh);
	
	console.log(cylMesh);
	
	let center = new THREE.Vector3(0, 0, 0);
	
	let inset = 3;
	let rows = 10;
	let angle = 45;
	angle *= Math.PI / 180;
	let cleanCut = false;
	
	for (let x = 0; x < radius * rows; x++) {
		let vert = cylMesh.geometry.vertices[x];
		center.y = vert.y;
		let direction = center.clone().sub(vert);
		direction.normalize();
		direction.multiplyScalar(inset);
		
		let originalVert = vert.clone();
		
		vert.x += direction.x;
		vert.z += direction.z;
		
		if (x >= radius * rows - radius && x < radius * rows && x + radius < radius * 50) {
			let underneathVert = cylMesh.geometry.vertices[x + radius];
			if (cleanCut) {
				vert.y = underneathVert.y;
			} else if (!cleanCut) {
				vert.y = underneathVert.y;
				
				vert.y += Math.tan(angle) * vert.clone().sub(underneathVert.clone()).length();
			}
		}
	}
	
	let edgesGeom = new THREE.EdgesGeometry(cylMesh.geometry);
	var line...