限制OrbitControls頁的一個區域，沒有渲染

我是一個老程序員的COBOL，自學有點Javascript和three.js所的一點點個人項目，我有這個疑問現在來襲差不多兩天。我已經在StackOverflow中閱讀了關於OrbitControls的所有問題，並且找不到與我正在嘗試執行的操作相關的任何事情。所以任何幫助，將不勝感激。限制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();

這只是正常使用orbitControl，而鼠標位於渲染材質所在的位置。我想要做的是，將軌道控制功能限制爲只有在鼠標懸停在覆蓋渲染場景的小綠色div上時纔可用。我試圖搞亂OrbitControl的參數，嘗試在javascript上添加onMouseOver函數，與html中的div關聯，但似乎沒有任何工作。我想要做甚麼可能？如果是這樣，我錯過了什麼？在此先感謝。

來源

2017-01-19 André Casarini

如果我沒有得到你，讓我們假設，你有一個小綠格

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

然後，當你創建的控制對象，你可以使用它作爲第二個參數：

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

例如：

jsfiddle。

來源

2017-01-19 13:01:36 prisoner849

這正是我一直在嘗試做的。非常感謝。 –

不客氣） – prisoner849

限制OrbitControls頁的一個區域，沒有渲染

回答

相關問題