Three.js：设置BoxGeometry的UV答案

【问题标题】：Three.js: Set UV of BoxGeometryThree.js：设置BoxGeometry的UV
【发布时间】：2018-11-24 07:06:42
【问题描述】：

我想知道是否可以像这样将 Box Geometry 的 UV 贴图更改为展开状态：

https://upload.wikimedia.org/wikipedia/commons/thumb/e/ea/Cube_map.svg/599px-Cube_map.svg.png

默认情况下，所有面的投影都是相同的，我认为这是非常有限的。或者您能推荐另一种使用 three.js 几何形状并在其面上使用不同投影的方法吗？

谢谢

【问题讨论】：

您是否尝试过编辑 UV 列表 (faceVertexUvs)？你有任何错误吗？你能分享你的代码吗？

标签： three.js uv-mapping

【解决方案1】：

我找到了一个有用的教程来回答我的问题：

http://www.geofx.com/graphics/nehe-three-js/lessons17-24/lesson17/lesson17.html

这是帮助我的代码：

var face1 = [
new THREE.Vector2(0, .666),
new THREE.Vector2(.5, .666),
new THREE.Vector2(.5, 1),
new THREE.Vector2(0, 1)];

var face2 = [
new THREE.Vector2(.5, .666),
new THREE.Vector2(1, .666),
new THREE.Vector2(1, 1),
new THREE.Vector2(.5, 1)];

var face3 = [
new THREE.Vector2(0, .333),
new THREE.Vector2(.5, .333),
new THREE.Vector2(.5, .666),
new THREE.Vector2(0, .666)];

var face4 = [
new THREE.Vector2(.5, .333),
new THREE.Vector2(1, .333),
new THREE.Vector2(1, .666),
new THREE.Vector2(.5, .666)];

var face5 = [
new THREE.Vector2(0, 0),
new THREE.Vector2(.5, 0),
new THREE.Vector2(.5, .333),
new THREE.Vector2(0, .333)];

var face6 = [
new THREE.Vector2(.5, 0),
new THREE.Vector2(1, 0),
new THREE.Vector2(1, .333),
new THREE.Vector2(.5, .333)];

然后我们将这些向量分配给我们创建的 BoxGeometry 中的 faceVertex 坐标。

geometry.faceVertexUvs[0][0] = [ face1[0], face1[1], face1[3] ];
geometry.faceVertexUvs[0][1] = [ face1[1], face1[2], face1[3] ];

geometry.faceVertexUvs[0][2] = [ face2[0], face2[1], face2[3] ];
geometry.faceVertexUvs[0][3] = [ face2[1], face2[2], face2[3] ];

geometry.faceVertexUvs[0][4] = [ face3[0], face3[1], face3[3] ];
geometry.faceVertexUvs[0][5] = [ face3[1], face3[2], face3[3] ];

geometry.faceVertexUvs[0][6] = [ face4[0], face4[1], face4[3] ];
geometry.faceVertexUvs[0][7] = [ face4[1], face4[2], face4[3] ];

geometry.faceVertexUvs[0][8] = [ face5[0], face5[1], face5[3] ];
geometry.faceVertexUvs[0][9] = [ face5[1], face5[2], face5[3] ];

geometry.faceVertexUvs[0][10] = [ face6[0], face6[1], face6[3] ];
geometry.faceVertexUvs[0][11] = [ face6[1], face6[2], face6[3] ];

【讨论】：