如何紋理一個three.js使用ShapeGeometry創建的網格

Question

我試圖在從three.js ShapeGeometry創建的網格上放置一個位圖紋理材質。

幾何是一個簡單的八角形（我最終會添加曲線使它成爲一個圓角矩形）。

網格被創建並顯示得很好，除了位圖紋理顯示爲四個巨大的方塊，這似乎是加載圖像的超級低分辨率版本。

這裏是什麼樣子：

（加載的圖像實際上是一個512x512的PIC法國國旗的）

我怎樣才能得到紋理使用加載圖像的全分辨率？ （順便說一句，當作爲從THREE.PlaneGeometry由網狀材料應用這個質地正常工作。）

這裏是我的代碼...

var shape = new THREE.Shape(); 
shape.moveTo(-width/2 + radius, height/2); 
shape.lineTo(width/2 - radius, height/2); 
shape.lineTo(width/2, height/2 - radius); 
shape.lineTo(width/2, -height/2 + radius); 
shape.lineTo(width/2 - radius, -height/2); 
shape.lineTo(-width/2 + radius, -height/2); 
shape.lineTo(-width/2, -height/2 + radius); 
shape.lineTo(-width/2, height/2 - radius); 
shape.lineTo(-width/2 + radius, height/2); 
var myGeometry = new THREE.ShapeGeometry(shape); 

var myMesh = new THREE.Mesh(myGeometry, myMaterial); 

謝謝！

Answer 1

THREE.ExtrudeGeometry.WorldUVGenerator是THREE.ShapeGeometry的默認UV發生器。

此默認UV生成器將UV設置爲等於頂點座標。

您需要將自己的紫外線發生器傳遞到THREE.ShapeGeometry。查看源代碼的工作原理。

解決方法是按比例縮放模型參數10，然後通過設置mesh.scale.set(0.1, 0.1, 1)進行補償。

第三種選擇是調整形狀幾何體，使其頂點覆蓋[0,1]範圍 - 然後如果需要，則應用mesh.scale。

three.js r.61