Twitter bootstrap 具有动态画布位置的three.js raycaster

我目前在twitter引导环境中有一个three.js场景，因此renderer.doElement可以根据屏幕分辨率、浏览器窗口大小等调整大小和更改其位置

现在我在使用three.js raycaster与场景中的对象相交时遇到问题。当页面加载且场景显示在屏幕上时，光线投射器工作正常，但当我滚动浏览器窗口和/或调整其大小以使场景位于浏览器窗口中的不同位置时，对象的交点不再工作

我不知道如何解决这个问题…有人知道我如何解决这个问题吗

这就是我的Raycaser Aktaily的样子：

var container = document.getElementById( 'view' );

///Raycaster///

    var projector = new THREE.Projector();

    function onDocumentMouseDown(event) {

        var mouseX = ( ( event.clientX - container.offsetLeft ) / container.clientWidth ) * 2 - 1;
        var mouseY = - ( ( event.clientY - container.offsetTop ) / container.clientHeight ) * 2 + 1;

        var vector = new THREE.Vector3(mouseX, mouseY, 0.5);
        projector.unprojectVector(vector, camera);

        var raycaster = new THREE.Raycaster(camera.position, vector.sub(camera.position).normalize());

        var intersects = raycaster.intersectObjects(objects);

        if (intersects.length > 0) {

            // do something

            var origin = raycaster.ray.origin.clone();
            console.log(origin);

            }
        }

}

---

解决重新调整浏览器窗口大小问题的最常见解决方案是添加

onWindowResize

处理程序

例如：

/**
 * Resize event handler adjust renderer size and resetting camera's aspect
 */
function onWindowResize()
{
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );
}

并添加如下侦听器：

window.addEventListener( 'resize', onWindowResize, false );

试试这个：

let canvasBounds = this.engine.context.canvas.getBoundingClientRect();
this.mouse.x = ((event.clientX - canvasBounds.left) / (canvasBounds.right - canvasBounds.left)) * 2 - 1;
this.mouse.y = -((event.clientY - canvasBounds.top) / (canvasBounds.bottom - canvasBounds.top)) * 2 + 1;

---

谢谢你的回答，但是我对画布的自动调整很满意，它仍然有效。我的问题是，当用户滚动站点时，使raycaster仍然工作。