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, geometry1,geometry2, material, mesh1, mesh2, controls;
var frontFaceStencilMat, backFaceStencilMat, planeStencilMat;

init();

function init() {

		var planeNormal = new THREE.Vector3(1, 0,-0.5).normalize();
    var forwardVector = new THREE.Vector3(0, 0, -1);
		var 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 ];
   
    geometry1 = new THREE.CylinderGeometry(16, 16, 50, 64);
    geometry2 = new THREE.CylinderGeometry(8, 8, 50, 64);
    material = new THREE.MeshNormalMaterial({
       clippingPlanes: planes,
       side: THREE.DoubleSide
    });

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

		// Add the front face stencil
		var frontMesh1 = new THREE.Mesh(geometry1, frontFaceStencilMat);
    frontMesh1.rotation.copy(mesh1.rotation);
    scene.add(frontMesh1);
    
    // Add the back face stencil
    var backMesh1 = new THREE.Mesh(geometry1, backFaceStencilMat);
    backMesh1.rotation.copy(mesh1.rotation);
	  scene.add(backMesh1);
    
    		// Add the front face stencil
		var frontMesh2 = new THREE.Mesh(geometry2, frontFaceStencilMat);
   ...