Is there any way of making the map plane semi-transparent? about geo-three HOT 3 OPEN

import * as THREE from 'three'
import * as Geo from 'geo-three'
import { OrbitControls } from '/three/jsm/controls/OrbitControls.js'
import Stats from '/three/jsm/libs/stats.module.js'


const stats = Stats()
document.body.appendChild(stats.domElement)

const camera = new THREE.PerspectiveCamera(77.552, 1280 / 720, 1e-1, 1e12)
camera.position.set(0, 0, 1e6)
camera.up.set(0, 1, 0)
camera.lookAt(0, 0, 0)

const scene = new THREE.Scene()

const point_light = new THREE.PointLight(0xffffff)
point_light.position.set(1e6, 1e6, 1e6)
scene.add(point_light)

const point_light_2 = new THREE.PointLight(0xffffff)
point_light_2.position.set(1e6, -1e6, 1e6)
scene.add(point_light_2)

const provider = new Geo.BingMapsProvider()
const map_plane = new Geo.MapView(Geo.MapView.PLANAR, provider, provider)
map_plane.up.set(0, 0, 1)
map_plane.lookAt(-1, 0, 0)
scene.add(map_plane)

const cube = new THREE.Mesh(
    new THREE.BoxGeometry(1e5, 1e5, 1e5),
    new THREE.MeshPhongMaterial(
        {transparent: true, opacity: 0.6, color: 0xff0000, depthWrite: true, depthTest: true}
    )
)
cube.position.set(0, 0, 1e5)
scene.add(cube)

const webgl_renderer = new THREE.WebGLRenderer({antialias:true})
webgl_renderer.domElement.style.position = 'absolute'
webgl_renderer.domElement.style.top = '0px'
webgl_renderer.setSize(1280, 720)
webgl_renderer.setClearColor('rgb(64,64,64)', 1.0)
document.body.appendChild(webgl_renderer.domElement)

const controls = new OrbitControls(camera, webgl_renderer.domElement)
controls.target = cube.position


function render() {
    requestAnimationFrame(render)

    cube.rotation.x += 0.01
    cube.rotation.y += 0.013
    stats.update()
    webgl_renderer.render(scene, camera)
}


export default class App {
    constructor() {
        render()
    }
}

"dependencies": {
    "express": "^4.17.1",
    "geo-three": "^0.0.16",
    "three": "^0.138.0"
  }