爲什麼降低渲染器大小偏移我的點擊事件 - 我該如何解決這個問題

目前我的渲染模型（灰色的）主罰html頁面的整個寬度與我在寬度的中心網。我的目標是減小這個寬度 - 但是通過這樣做，甚至在模型上的點擊似乎都會抵消，而Three.js仍然認爲我的網格仍然在寬度的中心，而實際上它不是並且已經移動到左側寬度減少了。爲什麼降低渲染器大小偏移我的點擊事件 - 我該如何解決這個問題

代碼示例：

我現在有這樣的事情的第一步涉及創建渲染器這放置渲染對象佔據屏幕，並在該寬度的中央渲染對象的寬度。此代碼示例效果很好

var WIDTH = window.innerWidth; 
    HEIGHT = window.innerHeight/2; 

    // Create a renderer and add it to the DOM. 
    renderer = new THREE.WebGLRenderer({antialias:true}); 
    renderer.setSize(WIDTH, HEIGHT);

然後我將該呈現的圖像粘貼到我的html頁面上的div中。

container = document.getElementById('canvas'); 
    document.body.appendChild(container); 
    container.appendChild(renderer.domElement);

我然後創建一個網格，並添加到一個數組稱爲targetList

mesh = new THREE.Mesh(geometry, material); 
    mesh.position = new THREE.Vector3(0, -3, 0) ; 

    projector = new THREE.Projector(); 
    document.addEventListener('mousedown', onDocumentMouseDown, false); 

    scene.add(mesh); 
    targetList.push(mesh);

現在櫃面有人點擊渲染的圖像上下面的函數被調用

function onDocumentMouseDown(event) 
{ 
    console.log("Click."); 
    // update the mouse variable 
    mouse.x = (event.clientX/window.innerWidth) * 2 - 1; 
    mouse.y = - (event.clientY/window.innerHeight) * 2 + 1; 

    // find intersections 
    var vector = new THREE.Vector3(mouse.x, mouse.y, 1); 
    projector.unprojectVector(vector, camera); 
    var ray = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize()); 

    // create an array containing all objects in the scene with which the ray intersects 
    var intersects = ray.intersectObjects(targetList); 

    // if there is one (or more) intersections 
    if (intersects.length > 0) 
    { 
     console.log("Hit @ " + toString(intersects[0].point)); 
    } 

}

現在這一切工作正常，每當我點擊渲染模型裏面我得到這樣的事情，這是偉大

Hit @ [ -0.12506098558617107, 2.650102060480923, 1.2154427674550532 ]

問題

開始現在的問題開始，如果我減小寬度和改變第一語句

var WIDTH = window.innerWidth;

到 VAR WIDTH = window.innerWidth/2;

現在，當我的形象，我只是得到單擊「單擊」輸出，由於某種原因3JS認爲我沒有點擊模型。如果我點擊中心（模型的舊位置），3js認爲我點擊模型內部。我的問題是爲什麼減少寬度的原因是我的模型移動到屏幕左側，對座標有影響。爲什麼3js仍然認爲我的模型位於中心？

當您更改寬度和渲染的高度

來源

2017-02-15 James Franco

，窗口大小不會改變。所以當你沒有投影鼠標時，你應該考慮這個。「更新鼠標變量」操作將是mouse.x = (event.clientX/(window.innerWidth/2)) * 2 - 1; mouse.y = - (event.clientY/(window.innerHeight/2)) * 2 + 1;

來源

2017-02-16 01:24:56

檢查參考也有助於理解[window.innerWidth]返回的究竟是什麼（https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth）和[event.clientX]（https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent） – OtterFamily

爲什麼降低渲染器大小偏移我的點擊事件 - 我該如何解決這個問題

回答

相關問題