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

1 个答案: