Three.js: 设置 BoxGeometry 的 UV

Question

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

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

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

谢谢

Answer 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] ];

Three.js: 设置 BoxGeometry 的 UV

Three.js: Set UV of BoxGeometry

uv-mapping

three.js