为什么降低渲染器大小偏移我的点击事件 - 我该如何解决这个问题

目前我的渲染模型（灰色的）主罚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

为什么降低渲染器大小偏移我的点击事件 - 我该如何解决这个问题

回答

相关问题