JSFiddle - React, Tailwind, and code Playground

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';

var camera, scene, renderer, geometry, material, mesh, controls;
var frontFaceStencilMat, backFaceStencilMat, planeStencilMat;
var plane, planeMesh;

init();

function init() {

		var planeNormal = new THREE.Vector3(1, 0,-0.5).normalize();
    var forwardVector = new THREE.Vector3(0, 0, -1);
		plane = new THREE.Plane(planeNormal, -3);

    scene = new THREE.Scene();

    camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 100;
    scene.add(camera);
    var planes = [ plane ];
   
    geometry = new THREE.CylinderGeometry(15, 15, 50, 64);
    material = new THREE.MeshNormalMaterial({
       clippingPlanes: planes,
       side: THREE.DoubleSide
    });

    mesh = new THREE.Mesh(geometry, material);
    mesh.rotation.x += 11;
    mesh.rotation.y += 1;
    mesh.rotation.z += -15;
    scene.add(mesh);
    
    // Set up the stencil materials
    initStencilMaterials();
    
    // Clip the cylinder stencil materials
    frontFaceStencilMat.clippingPlanes = planes;
    backFaceStencilMat.clippingPlanes = planes;

		// Add the front face stencil
		var frontMesh = new THREE.Mesh(geometry, frontFaceStencilMat);
    frontMesh.rotation.copy(mesh.rotation);
    scene.add(frontMesh);
    
    // Add the back face stencil
    var backMesh = new THREE.Mesh(geometry, backFaceStencilMat);
    backMesh.rotation.copy(mesh.rotation);
	  scene.add(backMesh);
    
    // Add the plane
    var planeGeom = new THREE.PlaneBufferGeometry();
    planeMesh = new THREE.Mesh(planeGeom, planeStencilMat);
    planeMesh.scale.setScalar(100);
    plane.coplanarPoint(planeMesh.position);
    planeMesh.quaternion.setFromUnitVectors(forwardVector, planeNormal);
    planeMesh.renderOrder = 1;
    scene.add(planeMesh);

    renderer = new...