javascript - 将 OrbitControls 限制到没有渲染的页面区域

Question

我是一名老 COBOL 程序员，为了一个小的个人项目自学了一些 Javascript 和 Three.js，现在我被这个疑问困扰了将近两天。我已经在 StackOverflow 中阅读了所有关于 OrbitControls 的问题，但找不到与我正在尝试做的事情相关的任何内容。因此，我们将不胜感激。

我有一个场景，如下图所示:

这是我的脚本现在的样子:

    var container, renderer, scene, camera, controls;
    var Main = {
        Init: function () {
            document.getElementById("comprimento").innerHTML = "Comprimento: " + localStorage.storLength / 100;
        document.getElementById("largura").innerHTML = "Largura: " + localStorage.storWidth / 100;
        document.getElementById("altura").innerHTML = "Altura: " + localStorage.storHeight / 100;
        document.getElementById("quadrado").innerHTML = "Metros²: " + localStorage.storSquare;
        Main.Render();
        Main.Camera();
        Main.Draw();
        Main.Update();
        // events
        window.addEventListener('resize', onWindowResize, false);
    },
    Render: function () {
        renderer = new THREE.WebGLRenderer({ antialias: false });
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0xffe6ff);
        container = document.getElementById("building");
        document.body.appendChild(container);
        container.appendChild(renderer.domElement);
        // Inicializacao da Cena
        scene = new THREE.Scene();
    },
    Camera: function () {
         //Inicializacao da Camera
         camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);
        //Posicao da Camera nos eixos X,Y,Z
        camera.position.set(0, 100, 800);
        camera.lookAt(scene.position);
        //Controle de Camera
        controls = new THREE.OrbitControls(camera, renderer.domElement);
        //Controle de Iluminação
        var light = new THREE.PointLight(0xffffff);
        light.position.set(100, 250, 250);
        scene.add(light);
    },
    Draw: function () {
        var planeGeometry = new THREE.PlaneGeometry(localStorage.storWidth, localStorage.storLength, 10, 10);
        var planeMaterial = new THREE.MeshLambertMaterial({
            color: 0x888888,
            side: THREE.DoubleSide
        });
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);
        plane.rotation.x = -Math.PI / 2;
        scene.add(plane);

     },
     Update: function () {
         controls.update();
         renderer.render(scene, camera);
        requestAnimationFrame(Main.Update);
     }
}

function onWindowResize(event) {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.render(scene, camera);
}
Main.Init();

当鼠标悬停在渲染 Material 所在的部分时，这对于使用 orbitControl 来说效果很好。我想要做的是，将 Orbit 控件功能限制为仅在鼠标悬停在覆盖渲染场景的绿色小 div 上时可用。我试过弄乱 OrbitControl 的参数，尝试在 javascript 上添加 onMouseOver 函数，与 html 中的 div 相关联，但似乎没有任何效果。我想做的事情甚至有可能吗？如果是这样，我错过了什么？提前致谢。

Answer 1

如果我猜对了，假设你有一个小的绿色 div

<div style="position: absolute;" id="LittleGreenDiv"></div>

然后你可以在创建控件对象时将它作为第二个参数:

var controls = new THREE.OrbitControls(camera, document.getElementById("LittleGreenDiv"));

jsfiddle示例。