JSFiddle - React, Tailwind, and code Playground

by Kobs_

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';
import { BufferGeometryUtils } from 'https://unpkg.com/[email protected]/examples/jsm/utils/BufferGeometryUtils.js';

var camera, scene, renderer;
var planes, planeObjects;

init();
animate();

function createPlaneStencilGroup( geometry, plane, renderOrder )
{
   var group = new THREE.Group();
   var baseMat = new THREE.MeshBasicMaterial();
   baseMat.depthWrite = false;
   baseMat.depthTest = false;
   baseMat.colorWrite = false;
   baseMat.stencilWrite = true;
   baseMat.stencilFunc = THREE.AlwaysStencilFunc;

   // back faces
   var mat0 = baseMat.clone();
   mat0.side = THREE.BackSide;
   mat0.clippingPlanes = [ plane ];
   mat0.stencilFail = THREE.IncrementWrapStencilOp;
   mat0.stencilZFail = THREE.IncrementWrapStencilOp;
   mat0.stencilZPass = THREE.IncrementWrapStencilOp;

   var mesh0 = new THREE.Mesh( geometry, mat0 );
   mesh0.renderOrder = renderOrder;
   group.add( mesh0 );

   // front faces
   var mat1 = baseMat.clone();
   mat1.side = THREE.FrontSide;
   mat1.clippingPlanes = [ plane ];
   mat1.stencilFail = THREE.DecrementWrapStencilOp;
   mat1.stencilZFail = THREE.DecrementWrapStencilOp;
   mat1.stencilZPass = THREE.DecrementWrapStencilOp;

   var mesh1 = new THREE.Mesh( geometry, mat1 );
   mesh1.renderOrder = renderOrder;

   group.add( mesh1 );

   return group;
}

function init()
{
   scene = new THREE.Scene();

   camera = new THREE.PerspectiveCamera( 36, window.innerWidth / window.innerHeight, 1, 100 );
   camera.position.set( 2, 2, 2 );

   initLights();

   planes = [
      new THREE.Plane( new THREE.Vector3( 0, - 1, 0 ), 0.42 ),
      new THREE.Plane( new THREE.Vector3( 0, 0, - 1 ), 0.25 )
   ];
   
   var material = new THREE.MeshStandardMaterial( {
      color: 0x00ff00,
      metalness: 0.1,
      roughness: 0.75,
      side: THREE.DoubleSide,
     ...