2

有什么方法可以根据显示尺寸管理网格尺寸和位置。

我正在做的是一个简单的动画演示，它将具有相机缩放和场景/相机位置的变化。

如果屏幕尺寸不同网格定位和网格尺寸都会出错..

我不知道如何控制这个？

如何在屏幕上查找网格位置？

4

2 回答 2

2

我的预感是某个聪明的人会出现并为您提供您真正想要的解决方案（例如如何移动相机以使对象保持正确的位置/大小），但这里有一些对您的问题的直接答案可能会有所帮助.

您可以通过将比例设置为 window.innerWidth 和 window.innerHeight 的某些函数来管理网格大小。

要确定网格是否在屏幕上，您可以使用以下代码。它将 3D 空间中的网格位置投影到浏览器中的 2D 空间。此外，请务必在移动相机或更改您正在查看的内容后调用 camera.updateMatrixWorld() - 否则您会得到不稳定的结果（感谢 WestLangley 的提示）。如果vector.x > window.innerWidth 或vector.x > window.innerHeight，则对象位于屏幕的可视区域之外。

function toXYCoord (object) {
    var vector = projector.projectVector(object.position.clone(), camera);
    vector.x = (vector.x + 1)/2 * window.innerWidth;
    vector.y = -(vector.y - 1)/2 * window.innerHeight;
    return vector;
}
于 2013-03-07T22:20:32.697 回答
2

您要做的是检查屏幕上的调整大小，或者如下例所示，我用作容器的“桶” div...当我调整 div 的大小（以编程方式或其他方式）时，我只是制作一定要调用 onBucketResize()

function onBucketResize() {
    camera.aspect = bucket.clientWidth / bucket.clientHeight;
    camera.updateProjectionMatrix();
    renderer.setSize( bucket.clientWidth, bucket.clientHeight );
}

设置，你可以使用类似的东西：

bucket.addEventListener( 'resize', onBucketResize, false );

或许

document.addEventListener( 'resize', onBucketResize, false );

任何合适的:)

让我知道这是否有帮助！

于 2013-03-09T23:18:35.593 回答