我需要在一组小平面上投影一个大图像(如拼图)。但是我不想独立加载图像片段。无论如何我可以加载单个纹理并用原始纹理的不同区域包裹每个平面?
最佳答案
您可以让每个平面网格共享相同的 Material (因此共享一个复合纹理),但每个平面网格必须具有不同的几何体。几何体的 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 - 将 three.js 纹理拆分为 block ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17505471/