Three.js блокирует элемент <select>, а также щелчок левой кнопкой мыши

Question

Вы можете переключаться между визуализацией данных в веб-приложении.Сначала загружается карта в этом случае - это фото и изображение, когда вы впервые заходите на страницу.Как пользователь, вы можете выбирать между картой объекта, тем не менее, изображением и визуализацией данных three.js.Но когда я запускаю код three.js, как-то <select> с элементами <option> больше не отвечает.но <input class="form-check-input" type="checkbox" value="comp_exercise" id=""> все еще работает и в состоянии выбора.это произошло после того, как я использовал orbit control из библиотеки three.js.

До сих пор я пытался удалить все event.preventDefault();, но это не имело никакого значения.также я посмотрел в консоли, если холст перекрывал элемент select, чем он не был.консоль не возвращает никаких ошибок, и изменение css или позиции на веб-странице элемента select также не имеет значения.

ожидается, что <select> по-прежнему работает после запуска кодов three.js, так что вы можете изменить метрику, но она больше не активна и щелчок левой кнопкой мыши не работает

HTML-код, который больше не работает после запуска кодов three.js:

<div class="form-group">
<label for="exampleFormControlSelect1">Main metric</label>
<select class="form-control" id="exampleFormControlSelect1">
    <optgroup label = "Environmental factors">
        <option value="air">Air pollution</option>
        <option value="noise">Noise pollution</option>
    </optgroup>
</select>
</div>

как активируется код three.js

 <div class="float-left"><button class="btn btn-success btn-sm button_toggle_dataviz" onclick="toggle_toDataviz()">Dataviz</button></div>

 var displayMap = false;
 var display3dData = false;
 var displayStory = false;

function toggle_toDataviz() {
  document.getElementById("dataviz_charts").style.display = "block";
  document.getElementById("dataviz_map").style.display = "none";
  document.getElementById("form-container-share-story").style.display = 
"none";
  displayMap = false;
  display3dData = true;
  displayStory = false;
  start3DdataViz();
}

Я импортирую следующие ссылки:

Tweenmax.min.js

orbitcontrol.js

three.js

полный код three.js:

 var booleanCentrum = false;
 var booleanZuid = false;
 var booleanWest = false;
 var booleanOost = false;
 var booleanNoord = false;
 var booleanNieuwWest = false;
 var booleanZuidOost = false;
 var booleanWestpoort = false;

 function start3DdataViz() {
if(display3dData) {
    document.getElementById('data_viz_cubes_update').innerHTML = '';
    document.getElementById('data_viz_cubes_update').setAttribute("style", "height:500px");
    let a = window.getComputedStyle(document.getElementById("data_viz_cubes_update"), null);
    var canvasHeight = parseInt(a.getPropertyValue("height").substring(0, a.getPropertyValue("height").length - 2));
    var canvasWidth = parseInt(a.getPropertyValue("width").substring(0, a.getPropertyValue("width").length - 2));

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(75, canvasWidth / canvasHeight, 0.1, 1000);
    var controls = new THREE.OrbitControls(camera);
    camera.position.z = 20;
    controls.update();

    $("#data_viz_cubes_update").hover(
        function () {
            noscroll()
        }
    );

    var noscroll_var;

    function noscroll() {
        if (noscroll_var) {
            document.getElementsByTagName("html")[0].style.overflowY = "";
            document.body.style.paddingRight = "0";
            controls.enableZoom = false;
            controls.enablePan = false;
            controls.enableRotate = false;
            noscroll_var = false
        } else {
            document.getElementsByTagName("html")[0].setAttribute('style', 'overflow-y: hidden !important');
            document.body.style.paddingRight = "17px";
            controls.enableZoom = true;
            controls.enablePan = true;
            controls.enableRotate = true;
            noscroll_var = true
        }
    }

    var renderer = new THREE.WebGLRenderer();
    renderer.setClearColor("#e3e0e5");
    renderer.setSize(canvasWidth, canvasHeight);
    var canvas = document.getElementById('data_viz_cubes_update');
    renderer.setSize($(canvas).width(), $(canvas).height());
    canvas.appendChild(renderer.domElement);

    var raycaster = new THREE.Raycaster();
    var mouse = new THREE.Vector2();

    var geometry = new THREE.BoxGeometry(1, 1, 1);
    var material = new THREE.MeshLambertMaterial({color: "red", transparent: true});

    for (let i = 0; i < 8; i++) {
        let b = "";
        0 === i ? b = "Centrum" : 1 === i ? b = "Zuid" : 2 === i ? b = "West" : 3 === i ? b = "Oost" : 4 === i ? b = "Noord" : 5 === i ? b = "NieuwWest" : 6 === i ? b = "ZuidOost" : 7 === i && (b = "Westpoort");
        var mesh = new THREE.Mesh(geometry, material);
        mesh.material.opacity = 1;
        mesh.name = b;
        mesh.position.x = (Math.random() - 0.5) * 20;
        mesh.position.y = (Math.random() - 0.5) * 20;
        mesh.position.z = (Math.random() - 0.5) * 20;
        scene.add(mesh);
    }

    var light = new THREE.PointLight('white', 1, 1000);
    light.position.set(0, 0, 0);
    scene.add(light);

    var render = function () {
        requestAnimationFrame(render);
        controls.update();
        renderer.render(scene, camera);
    };

    render();

    function onMouseMove(event) {
        event.preventDefault();

        var rect = event.target.getBoundingClientRect();
        mouse.x = ((event.clientX - rect.left) / canvasWidth) * 2 - 1;
        mouse.y = -((event.clientY - rect.top) / canvasHeight) * 2 + 1;
        raycaster.setFromCamera(mouse, camera);

        var intersects = raycaster.intersectObjects(scene.children, true);
        for (var i = 0; i < intersects.length; i++) {
            booleanCentrum = false;
            booleanZuid = false;
            booleanWest = false;
            booleanOost = false;
            booleanNoord = false;
            booleanNieuwWest = false;
            booleanZuidOost = false;
            booleanWestpoort = false;
            switch(intersects[i].object.name){
                case "Centrum":
                    booleanCentrum = true;
                    break;
                case "Zuid":
                    booleanZuid = true;
                    break;
                case "West":
                    booleanWest = true;
                    break;
                case "Oost":
                    booleanOost = true;
                    break;
                case "Noord":
                    booleanNoord = true;
                    break;
                case "NieuwWest":
                    booleanNieuwWest = true;
                    break;
                case "ZuidOost":
                    booleanZuidOost = true;
                    break;
                case "Westpoort":
                    booleanWestpoort = true;
                    break;
                default:
                    console.log('not on object');
            }
            this.tl = new TimelineMax();
            this.tl.to(intersects[i].object.scale, 1, {x: 2, ease: Expo.easeOut});
            this.tl.to(intersects[i].object.scale, .5, {x: 1, ease: Expo.easeOut});
        }
    }
    window.addEventListener('mousemove', onMouseMove);
  }
}