Question

是否有办法根据显示尺寸管理网格尺寸和位置。

我正在做的是一个简单的动画演示，它将使相机变焦并改变场景/相机位置。

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

我不知道如何控制它？

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

Answer 1

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

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

要确定网格是否在屏幕上，您可以使用以下代码。它将3D空间中的网格位置投影到浏览器中的2D空间。此外，请务必在移动相机或更改您正在查看的内容后调用camera.updateMatrixWorld（） - 否则您将获得不稳定的结果（感谢WestLangley的提示）。如果vector.x＆gt; window.innerWidth或vector.x＆gt; 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;
}

Answer 2

你要做的是检查屏幕上的调整大小，或者如下例所示，我用作容器的'bucket'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 );

无论什么是合适的：）

让我知道这是否有帮助！

如何管理具有可变屏幕尺寸的WebGL（THREE.js）？

2 个答案: