三个JS中的Box Clipping

Question

在这里，我正在尝试实现框剪裁，其中会将模型加载到框内。我可以在框的任何一侧进行剪裁并在模型内部查看的地方。 在这里，我遇到了一些在模型上方形成透明层的示例，可以在其中剪裁所有侧面以查看模型。这是小提琴https://jsfiddle.net/qz0Lye3b/

var camera, scene, renderer, controls;
var isTransformRoom = false,
  roomIndex = 1,
  tween;
var planeConstant = {
  constant: 5.1
};
var clipPlanes = [
  new THREE.Plane(new THREE.Vector3(1, 0, 0), -20.1),
  new THREE.Plane(new THREE.Vector3(0, -1, 0), 5.1),
  new THREE.Plane(new THREE.Vector3(0, 0, -1), -5.1)
];
var clipPlanes1 = [
  new THREE.Plane(new THREE.Vector3(1, 0, 0), -5.1),
  new THREE.Plane(new THREE.Vector3(0, 1, 0), -5.1),
  new THREE.Plane(new THREE.Vector3(0, 0, -1), -5.1)
];
init();
render();
var btn1 = document.getElementById("btn1");
var btn2 = document.getElementById("btn2");
btn1.onclick = function() { // show white box
  if (roomIndex == 1) {
    return
  };
  isTransformRoom = true;
  planeConstant = {
    constant: 5.1
  };
  tween = new TWEEN.Tween(planeConstant);
  tween.easing(TWEEN.Easing.Quadratic.Out);
  tween.to({
    constant: -5.1
  }, 500);
  tween.start();
};
btn2.onclick = function() { // show red box
  if (roomIndex == 2) {
    return
  };
  isTransformRoom = true;
  planeConstant = {
    constant: 5.1
  };
  tween = new TWEEN.Tween(planeConstant);
  tween.easing(TWEEN.Easing.Quadratic.Out);
  tween.to({
    constant: -5.1
  }, 500);
  tween.start();
};

function init() {
  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.localClippingEnabled = true;
  document.body.appendChild(renderer.domElement);
  scene = new THREE.Scene();
  camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 200);
  camera.position.set(0, 0, 20);
  controls = new THREE.OrbitControls(camera, renderer.domElement);

  var light = new THREE.HemisphereLight(0xffffff, 0x080808, 1);
  scene.add(light);
  scene.add(new THREE.AmbientLight(0xffffff));
  var pointLight = new THREE.PointLight(0xffffff, 0.4);
  pointLight.position.set(20, 20, 20);
  scene.add(pointLight)

  var geometry = new THREE.BoxGeometry(10, 10, 10);
  var material = new THREE.MeshStandardMaterial({
    color: new THREE.Color(0xffffff),
    side: THREE.DoubleSide,
    clippingPlanes: clipPlanes,
    clipIntersection: true
  });
  var whiteBox = new THREE.Mesh(geometry, material);
  scene.add(whiteBox);

  var geometry1 = new THREE.BoxGeometry(6, 6, 6);
  var material1 = new THREE.MeshStandardMaterial({
    color: new THREE.Color(0xff0000),
    side: THREE.DoubleSide,
    clippingPlanes: clipPlanes1,
    clipIntersection: true
  });
  var redBox = new THREE.Mesh(geometry1, material1);
  scene.add(redBox);
};

function render() {
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  controls.update();
  if (isTransformRoom) {
    TWEEN.update();
    if (roomIndex == 1) {
      clipPlanes[1].constant = planeConstant.constant;
      clipPlanes1[1].constant = -planeConstant.constant;
      if (clipPlanes[1].constant <= -5.1) {
        isTransformRoom = false;
        roomIndex = 2
      }
    } else {
      clipPlanes[1].constant = -planeConstant.constant;
      clipPlanes1[1].constant = planeConstant.constant;
      if (clipPlanes[1].constant >= 5.1) {
        isTransformRoom = false;
        roomIndex = 1
      }
    }
  }
}