Question

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

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

我不知道如何解决这个问题...有人知道我该如何解决这个问题吗？

这就是我的Raycaser看起来的样子：

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

            }
        }

}

Answer 1

试试这个：

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;

Answer 2

解决重新调整浏览器窗口大小问题的最常见解决方案是添加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 );

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

2 个答案: