JSFiddle - React, Tailwind, and code Playground

by fraserr01

HTML

<!DOCTYPE html>

<!-- This was adapted from https://threejs.org/examples/webgl_clipping_stencil.html  -->
<html>
	<head>
        <script type="importmap">
            {
                "imports": {
                    "three": "https://threejs.org/build/three.module.js"
                }
            }
        </script>  
	</head>
	
	<body>
  </body>
</html>

JavaScript

import * as THREE from 'three';
			import Stats from 'https://threejs.org/examples/jsm/libs/stats.module.js';
			import {GUI} from 'https://threejs.org/examples/jsm/libs/lil-gui.module.min.js';
			import { OrbitControls } from 'https://threejs.org/examples/jsm/controls/OrbitControls.js';

			let camera, scene, renderer, object, object2, stats;
			let planes, planeObjects, planeObjects2, planeHelpers;
			let clock;
			
			const params = {

				animate: false,
				planeX: {

					constant: 1,
					negated: false,
					displayHelper: false

				},
				planeY: {

					constant: 1,
					negated: false,
					displayHelper: false

				},
				planeZ: {

					constant: 0,
					negated: false,
					displayHelper: false

				}


			};
			
			init();
			animate();
			
			function createPlaneStencilGroup( geometry, plane, renderOrder ) {

				const group = new THREE.Group();
				const baseMat = new THREE.MeshBasicMaterial();
				baseMat.depthWrite = false;
				baseMat.depthTest = false;
				baseMat.colorWrite = false;
				baseMat.stencilWrite = true;
				baseMat.stencilFunc = THREE.AlwaysStencilFunc;

				/* Subtract the mask created from the front-facing image 
				from the mask created from the back-facing image, we get 
				a new mask that represents the area where the clip edge 
				would be. Set the stencil buffer operation to increment 
				when rederering back-facing polygons and decrement on 
				front-facing polygons. This results in the desired mask 
				stored in the stencil buffer : http://glbook.gamedev.net/GLBOOK/glbook.gamedev.net/moglgp/advclip.html */

				// back faces
				const mat0 = baseMat.clone();
				mat0.side = THREE.BackSide;
				mat0.clippingPlanes = [ plane ];
				mat0.stencilFail = THREE.IncrementWrapStencilOp;
				mat0.stencilZFail = THREE.IncrementWrapStencilOp;
				mat0.stencilZPass = THREE.IncrementWrapStencilOp;
				
				//mat0.depthFunc = THREE.LessDepth;  // See reference above

				const mesh0 = new THREE.Mesh( geometry, mat0...