attempt to draw a transparent cube in threebox

main.js

mapboxgl.accessToken = config.accessToken;
var origin = [-122.4340, 37.7353, 1000];

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v9',
  center: origin,
  zoom: 15.95,
  pitch: 60,
  heading: 41,
  hash: true
});


map.on('style.load', function() {

    map.addLayer({
        id: 'custom_layer',
        type: 'custom',
        onAdd: function(map, gl){
            onAdd(map, gl);
        },
        render: function(gl, matrix){
            threebox.update(Date.now(), 'mbx');

        }
    });
});


function onAdd(map, mbxContext) {

    window.threebox = new Threebox(map, mbxContext);
    threebox.setupDefaultLights();


    // initialize geometry and material of our cube object
    var geometry = new THREE.BoxGeometry(2000, 2000, 2000);

    var width = 10;
    var height = 10;
    var size = width * height;
    var data = new Uint8Array( 3 * size );
    var transparency = 150;

    for ( var i = 0; i < size; i ++ ) {
        var stride = i * 3;
        data[ stride ] = transparency;
        data[ stride + 1 ] = transparency;
        data[ stride + 2 ] = transparency;
    }

    // used the buffer to create a DataTexture
    var texture = new THREE.DataTexture( data, width, height, THREE.RGBFormat );
    texture.wrapS = THREE.RepeatWrapping;
    texture.wrapT = THREE.RepeatWrapping;
    texture.repeat.set(2, 2);

    var redMaterial = new THREE.MeshPhongMaterial({
        color: 0x660000,
        // side: THREE.DoubleSide,
        alphaMap: texture,
        // alphaTest: 0.5, // if transparent is false
        // transparent: true
    });

    cube = new THREE.Mesh(geometry, redMaterial);
    cube.userData.name = "Red cube";

    threebox.addAtCoordinate(
        cube, 
        origin, 
        {preScale: 1}
    );
}