Question

我需要在一组小型飞机上投射大图像（如拼图）。但是我不想独立加载图像片段。无论如何我可以加载一个纹理并用原始纹理的不同区域包裹每个平面吗？

Answer 1

您可以让每个平面网格共享相同的材质（因此共享单个复合纹理），但每个平面网格必须具有不同的几何体。几何形状的UV会有所不同。使用这样的模式：

var geometry1 = new THREE.PlaneGeometry( 10, 10 );
var geometry2 = new THREE.PlaneGeometry( 10, 10 );

geometry1.faceVertexUvs[ 0 ][ 0 ][ 0 ].set( 0.0, 1.0 ); // upper left quarter
geometry1.faceVertexUvs[ 0 ][ 0 ][ 1 ].set( 0.0, 0.5 );
geometry1.faceVertexUvs[ 0 ][ 0 ][ 2 ].set( 0.5, 0.5 );
geometry1.faceVertexUvs[ 0 ][ 0 ][ 3 ].set( 0.5, 1.0 );

geometry2.faceVertexUvs[ 0 ][ 0 ][ 0 ].set( 0.5, 0.5 ); // lower right quarter
geometry2.faceVertexUvs[ 0 ][ 0 ][ 1 ].set( 0.5, 0.0 );
geometry2.faceVertexUvs[ 0 ][ 0 ][ 2 ].set( 1.0, 0.0 );
geometry2.faceVertexUvs[ 0 ][ 0 ][ 3 ].set( 1.0, 0.5 );


mesh1 = new THREE.Mesh( geometry1, material );
mesh2 = new THREE.Mesh( geometry2, material );

还可以使用WebGLRenderer来防止失真。如果您需要使用CanvasRenderer，则必须对平面几何进行细分。

var geometry1 = new THREE.PlaneGeometry( 10, 10, 4, 4 );

方法也是一样的 - 因为涉及的面孔更多，所以更加乏味。

three.js r.58

将three.js纹理拆分为块

1 个答案: