Threejs - clipping plane blocks2

by black strings

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/examples/js/controls/OrbitControls.js"></script>

CSS

/* fix mouse click offset errors when doing drags */
body {
  margin: 0;
}

JavaScript

var scene, renderer, camera;
var cube;
var controls;

init();
lightSetup();
animate();

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });

  renderer.localClippingEnabled = true;
  var width = window.innerWidth;
  var height = window.innerHeight;
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);

  scene = new THREE.Scene();

  scene.rotation.x = -Math.PI / 2;

  var gridXZ = new THREE.GridHelper(1000, 100);
  gridXZ.rotation.x = -Math.PI / 2;
  scene.add(gridXZ);

  var axes = new THREE.AxesHelper(1000);
  scene.add(axes);

  camera = new THREE.PerspectiveCamera(45, width / height, 1, 10000);
  camera.position.y = 160;
  camera.position.z = 400;
  camera.lookAt(new THREE.Vector3(0, 0, 0));

  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var geometry = new THREE.BoxGeometry(100, 10, 10);

  var material = new THREE.MeshBasicMaterial({
    color: 0x00ff00
  });
  var block = new THREE.Mesh(geometry, material);

  scene.add(block);

  var box = new THREE.Box3().setFromObject(block);

  var box1Helper = new THREE.Box3Helper(box);

  scene.add(box1Helper);

  var plane = new THREE.Plane(new THREE.Vector3(-1, 0, 0));

  plane.constant = 20;

  var helper = new THREE.PlaneHelper(plane, 100, 0xffffff);

  scene.add(helper);


  if (plane.intersectsBox(box)) {
    block.material = block.material.clone();

    var block2 = block.clone();

    block2.material = block.material.clone();

    scene.add(block2);

    var blockClipPlane = new THREE.Plane(new THREE.Vector3(1, 0, 0), box.getCenter().x);

    var blockHelper2 = new THREE.PlaneHelper(blockClipPlane, 100, 0xffff00);

    scene.add(blockHelper2);

    // block 2
    var block2ClipPlane = new THREE.Plane(new THREE.Vector3(-1, 0, 0), box.getCenter().x);

    var block2Helper3 = new THREE.PlaneHelper(block2ClipPlane, 100, 0xff0000);

    scene.add(block2Helper3);

   // block.material.clippingPlanes = [blockClipPlane];

   ...