將圖像映射到Three.js中的球體上

我目前使用Three.js來嘗試創建一些東西。我有一個球體，我試圖將眼球圖像here映射到它上面。將圖像映射到Three.js中的球體上

我的問題是，結果如下： -

enter image description here

我怎樣才能得到它頭也不回的拉伸正確映射？我創建球體和繪製紋理的代碼如下： -

var geometry = new THREE.SphereGeometry(0.5,100,100); 
    var material = new THREE.MeshPhongMaterial({ map: THREE.ImageUtils.loadTexture('eyeballmap.jpg',THREE.SphericalRefractionMapping) }); 
    var eyeball = new THREE.Mesh(geometry, material); 
    eyeball.overdraw = true; 
    eyeball.castShadow = true; 
    scene.add(eyeball);

希望有人可以提供幫助嗎？

來源

2014-02-09 Mat Richardson

在回答你的問題的關鍵是你的image you linked to質感。

該圖像看起來像球形環境映射中使用的MatCap圖像。您可以看到一個球形環境映射here的示例。

這種環境貼圖的合適着色器是使用球體法線（的函數）作爲紋理貼圖的UV索引。

vec2 uv = normalize(vNormal).xy * 0.5 + 0.5; 

vec3 color = texture2D(texture, uv).rgb;

就這麼簡單。 :-)

小提琴：http://jsfiddle.net/zD2rH/184/

編輯：

faceVertexUvs[ face ][ j ].x = face.vertexNormals[ j ].x * 0.5 + 0.5; 
faceVertexUvs[ face ][ j ].y = face.vertexNormals[ j ].y * 0.5 + 0.5;

同樣的想法：如果你想使用MeshPhongMaterial，那麼你可以通過修改球體的UV像這樣達到同樣的效果。

第二小提琴：http://jsfiddle.net/zD2rH/183/

編輯：更新到three.js所r.74

Eye Rendered on Sphere from MatCap Texture

來源

2014-02-12 23:46:24 WestLangley

您所具有的紋理僅表示眼睛的可見部分，而不是整個球體。您需要在現有紋理周圍添加空白區域以允許不可見的球體部分。

來源

2014-02-09 20:20:33 gaitat

我認爲有可能是壞了我的質地一般形狀 - 在那裏我會放白色空間？白色空間也（我認爲）不會影響圖像的虹膜/瞳孔部分的扭曲，是不是？ –

您的紋理是512x512，所以您可能需要在其周圍（每邊）添加儘可能多的空白區域，以便瞳孔佔用更少的空間（作爲紋理大小的百分比）。那麼你將會減少失真。您可能會考慮的另一個選項是更改球體的UV座標，以便您的圖像（原樣）落在正確的位置。 – gaitat

對不起，我是新來的，所以我不知道要添加多少空白空間，也不知道UV座標是最佳的。 –

看紋理映射到地圖上的一個半球 http://solutiondesign.com/webgl-and-three-js-texture-mapping/

來源

2014-02-10 13:00:16 Troopers

本教程與球體貼圖無關。 – RedYetiCo

本教程是關於紋理貼圖的，可以通過外推球體上的貼圖幫助開發人員 – Troopers

騎兵隊：我不同意。本教程是關於使用'var meshFaceMaterial = new THREE.MeshFaceMaterial（materials）'指示的臉部映射;'在對它進行評論之前請理解材質。 – RedYetiCo

將圖像映射到Three.js中的球體上

回答

相關問題