將three.js紋理拆分爲大塊

Question

我需要在一組小平面上投影一個大圖像（如拼圖）。但是我不想獨立加載圖片。無論如何，我可以加載單個紋理，並用原始紋理的不同區域包裹每個平面？

Answer 1

您可以讓每個平面網格共享相同的材質（並因此共享一個複合材質紋理），但每個平面網格必須具有不同的幾何體。幾何圖形的紫外線會有所不同。使用這樣的模式：

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