Limit OrbitControls в область страницы, на которой нет рендера

Question

Я старый программист COBOL, немного обучая себя Javascript и Three.js для небольшого личного проекта, и теперь я поражен этим сомнением почти два дня. Я прочитал все вопросы об OrbitControls здесь, в StackOverflow, и не смог найти ничего, связанного с тем, что я пытаюсь сделать. Поэтому любая помощь будет оценена по достоинству.

У меня есть сцена, как на картинке ниже:

А вот что мой сценарий выглядит прямо сейчас:

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(); 

Это прекрасно работает для использования orbitControl, в то время как мышь находится над той частью, где представлены материалы. То, что я пытаюсь сделать, ограничить функциональность управления орбитой, чтобы ее можно было использовать только тогда, когда мышь находится над маленьким зеленым div, который накладывается на сцену рендеринга. Я попытался испортить параметры OrbitControl, попробовал добавить функции onMouseOver в javascript, связанные с div в html, но ничего не работает. То, что я пытаюсь сделать, даже возможно? Если да, то что мне не хватает? Спасибо заранее.

Answer 1

Если я правильно получил вас, давайте предположим, что у вас есть маленький зеленый DIV

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

Затем вы можете использовать его в качестве второго параметра при создании объекта управления:

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

jsfiddle пример.