three.js - 如何使非方形纹理以 "background-size:cover"方式适合 Three.js 中的几何平面？

Question

我希望我的纹理具有与“background-size:cover”css 属性相同的行为。

我想使用 uvs 坐标。我查看了这个答案并开始研究解决方案:Three.js Efficiently Mapping Uvs to Plane

我尝试使用与我的 DOM 的某些 div 相同的维度/位置平面。这就是我想要的:

这是我用这段代码得到的结果:尺寸和位置都很好，我的纹理比例看起来也不错，但似乎存在比例问题:

            let w = domElmt.clientWidth / window.innerHeight;
            let h = domElmt.clientHeight / window.innerHeight;
            geometry = new THREE.PlaneGeometry(w, h);

            var uvs = geometry.faceVertexUvs[ 0 ];
            uvs[ 0 ][ 0 ].set( 0, h );
            uvs[ 0 ][ 1 ].set( 0, 0 );
            uvs[ 0 ][ 2 ].set( w, h );
            uvs[ 1 ][ 0 ].set( 0, 0 );
            uvs[ 1 ][ 1 ].set( w, 0 );
            uvs[ 1 ][ 2 ].set( w, h );

            tex = new THREE.TextureLoader().load('image.jpg'));
            tex.wrapS = tex.wrapT = THREE.RepeatWrapping;

            material = new THREE.MeshBasicMaterial( { map: tex } );
            mesh = new THREE.Mesh( geometry, material );

我应该使用纹理的 repeat 属性还是可以使用 uvs 完全实现此行为？谢谢

Answer 1

https://en.wikipedia.org/wiki/UV_mapping

UV 映射值的范围从 0 到 1(含)，代表整个纹理图像的百分比映射。

您使用的是 div 大小与窗口大小的比率，这可能比 1 小得多，并且会导致您看到的“放大”效果。

例如，如果您的 w 和 h 的结果是值 0.5，那么映射纹理的最远右上角将成为图像的确切中心。

background-style: cover :

Scales the image as large as possible without stretching the image. If the proportions of the image differ from the element, it is cropped either vertically or horizontally so that no empty space remains.

换句话说，它将根据短边的大小缩放图像，并裁剪其余部分。因此，假设您有一个漂亮的 128x512 图像和一个 64x64 空间。 cover 会将 128 的宽度缩小到 64(比例因子为 0.5)，所以乘以 512 乘以 0.5 以获得新高度 (128)。现在您的 w 仍然是 1，但是您的 h 将是 128/512 = 0.25。您的纹理现在将适合宽度，并裁剪高度。

您需要为每个图像与容器的大小关系执行此计算以找到合适的 UV，请记住缩放始终与短边相关。