Hello! I have a question to teach the gods
I want to use the network example, want to use ThreeBSP to do substract
to get a new shape, and then try to use array to material the six sides of the object
, but the result is that the first copy in the array is copied 6 times.

it can be successfully used on Mesh without substract
but there is a problem with the display of objects processed by threebsp.
I wonder if you can give me some comments.

complete code beginner three please refer to

< html lang= "en" >
< head >

<meta charset="UTF-8">
<title>a</title>
<style type="text/css">
    html, body {
        margin: 0;
        height: 100%;
    }


</style>

< / head >
< body onload= "draw ();" >

< script type= "text/javascript" src= ". / js/three.js" > < / script >
< script src= ". / js/threebsp.js" > < / script >
< script src= ". / js/OrbitControls.js" > < / script >
< script src= ". / js/stats.js" > < / script >
< script src= ". / js/dat.gui.min.js" > < / script >
< script >

var renderer;
let doo = new THREE.Group();

function initRender() {
    renderer = new THREE.WebGLRenderer({antialias: true});
    renderer.setClearColor(new THREE.Color(0x9C894C)); //
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

//renderer.render(scene,camera);
}

var camera;
function initCamera() {
    camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.set(0, 200, 500);
}

var scene;
function initScene() {
    scene = new THREE.Scene();
}

var light;
function initLight() {
    scene.add(new THREE.AmbientLight(0x404040)); 
    light = new THREE.AmbientLight(0xffffff); 
    light.position.set(1, 1, 1);
    scene.add(light);
}
//HTML
function initModel() {
    // (  )
    var object = new THREE.AxesHelper(500);
    scene.add(object);
//cube1
var cubeGeometry = new THREE.BoxGeometry(60, 120, 60-2*2);
var cubeMaterialArray = [];
 cubeMaterialArray.push    ( new THREE.MeshPhongMaterial( { map:new THREE.TextureLoader().load("images1")})); // right
 cubeMaterialArray.push    ( new THREE.MeshPhongMaterial( { map:new THREE.TextureLoader().load("images2")})); // left
 cubeMaterialArray.push    ( new THREE.MeshPhongMaterial( { map:new THREE.TextureLoader().load("images3") })); // top
 cubeMaterialArray.push    ( new THREE.MeshPhongMaterial( { map:new THREE.TextureLoader().load("images4")})); // bottom 
 cubeMaterialArray.push    ( new THREE.MeshPhongMaterial( { map:new THREE.TextureLoader().load("images5") }));// front 
 cubeMaterialArray.push    ( new THREE.MeshPhongMaterial( { map:new THREE.TextureLoader().load("images6") }));
var cubeMaterials = new THREE.MeshFaceMaterial(cubeMaterialArray);
var cube1 = new THREE.Mesh( cubeGeometry, cubeMaterials );
//scene.add(cube1);

//cube2
var cubeGeometry2 = new THREE.BoxGeometry(45.5,120 - 2*6.655 + 1 ,60-2*2);
var cubeMaterial = new THREE.MeshBasicMaterial({ color: "-sharp8B0A50", wireframe: false});
var cube2 = new THREE.Mesh( cubeGeometry2, cubeMaterial );
//scene.add(cube2);

//ThreeBSP
var cube1BSP = new ThreeBSP(cube1);
var cube2BSP = new ThreeBSP(cube2);
var resultBSP = cube1BSP.subtract(cube2BSP);
var result = resultBSP.toMesh(cubeMaterials);
result.geometry.computeFaceNormals();
result.geometry.computeVertexNormals();
result.material.shading = THREE.FlatShading;

//add material
//var rack = new THREE.MeshFaceMaterial(cubeMaterials);
//result.material=rack;
scene.add(result);
console.log(result);
}

// 
function createMesh(geom) {
    //
    var meshMaterial = new THREE.MeshNormalMaterial({
        flatShading: THREE.FlatShading,
        transparent: true,
        opacity: 0.1
    });

    // 
    var wireFrameMat = new THREE.MeshBasicMaterial({opacity: 0.1, wireframeLinewidth: 0.5});
    wireFrameMat.wireframe = true;

    //
var mesh = new THREE.Mesh(geom, wireFrameMat);

    return mesh;
}

//
var stats;

function initStats() {
    stats = new Stats();
    document.body.appendChild(stats.dom);
}




// 
var controls;

function initControls() {

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

    // animate
    //controls.addEventListener( "change", render );
    //  
    controls.enableDamping = true;
    // 
    //controls.dampingFactor = 0.25;
    //
    controls.enableZoom = true;
    //
    controls.autoRotate = false;
    //
    controls.minDistance = 20;
    //
    controls.maxDistance = 10000;
    //
    controls.enablePan = true;
}

//gui
var gui;
function initGui() {
    //
    gui = {

    };
    var datGui = new dat.GUI();
    //guigui.add(
}

function render() {
//requestAnimationFrame(render);
//doo.rotation.y+= 0.1;
    renderer.render(scene, camera);
}

//
function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    render();
    renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {
    //
    controls.update();
    render();

    //
    stats.update();
    requestAnimationFrame(animate);
}

function draw() {
    initRender();
    initScene();
    initCamera();
    initLight();
    initModel();
    initControls();
    initStats();
    initGui();// debug 
    animate();
    window.onresize = onWindowResize;
}

< / script > < / body >
< / html >
of course this line is shown, but it doesn"t seem to have a shadow?