web-dev-qa-db-ja.com

Three.jsの球への画像のマッピング

私は現在、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 );

うまくいけば、誰かが助けることができますか？

javascriptthree.jswebgl
14
Mat Richardson

あなたの質問への答えの鍵は あなたがリンクした画像 です。

その画像は、球形環境マッピングで使用されるMatCap画像のように見えます。球形環境マッピングの例を見ることができます ここ 。

このような環境マップに適切なシェーダーは、テクスチャマップへのUVインデックスとして球の法線（の関数）を使用するシェーダーです。

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

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

それはそれと同じくらい簡単です。 :-)

フィドル： http://jsfiddle.net/zD2rH/184/

編集：MeshPhongMaterialを使用する場合は、次のように球のUVを変更することで同じ効果を得ることができます。

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

同じ考え。

2番目のフィドル： http://jsfiddle.net/zD2rH/183/

編集：three.jsr.74に更新

Eye Rendered on Sphere from MatCap Texture

39
WestLangley

テクスチャマッピングを見て、テクスチャを半球にマッピングします http://solutiondesign.com/webgl-and-three-js-texture-mapping/

0
Troopers

あなたが持っているテクスチャは、球全体ではなく、目の目に見える部分だけを表しています。球の見えない部分を考慮して、既存のテクスチャの周りに空白を追加する必要があります。

0
gaitat