JSFiddle - React, Tailwind, and code Playground

by fraserr01

HTML

<!DOCTYPE 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';
import {
  DragControls
} from 'https://threejs.org/examples/jsm/controls/DragControls.js';

let camera, scene, renderer, stats;
let clipPlane, planeHelper;
let clock;
let innerCap, outerCap;


let params = {
  plane: 0,
  planeConstant: 0,
}

const planes = [
  new THREE.Plane(new THREE.Vector3(-1, 0, 0), 0),
  new THREE.Plane(new THREE.Vector3(0, -1, 0), 0),
  new THREE.Plane(new THREE.Vector3(0, 0, -1), 0)
];

init();
animate();

/*
createPlaneStencilGroup method
returns stencil for object and clipping plane
Params: geometry - THREE Geometry, the geometry to be stenciled
		plane - THREE Plane, clipping plane = stencil plane
		renderOrder - Int, the renderOrder
Ref: https://threejs.org/examples/webgl_clipping_stencil.html
*/
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 =...