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

에 텍스처를 매핑합니다.

그 이미지는 구형 환경 매핑에 사용 된 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를 수정하여 동일한 효과를 얻을 수 있습니다 .

2 바이올린 : http://jsfiddle.net/zD2rH/183/

편집 : 나는 내 질감의 일반적인 모양에 문제가있을 수 있습니다 생각 r.74

Eye Rendered on Sphere from MatCap Texture

출처

2014-02-12 23:46:24 WestLangley

당신이 가진 텍스쳐는 전체 구체가 아닌 눈에 보이는 부분만을 나타냅니다. 표시되지 않는 구의 부분을 허용하려면 기존 텍스처 주위에 공백을 추가해야합니다. 텍스처 매핑에

출처

2014-02-09 20:20:33 gaitat

을 three.js를 업데이트 - 난을 둘 것 여백? 공백도 (나는 생각한다) 이미지의 홍채/동공 부분의 왜곡에 영향을 미치지 않을 것인가? –

텍스처가 512x512이므로, (양쪽면에) 공백을 많이 추가하여 동공의 공간 (텍스처 크기의 백분율)을 줄여야합니다. 그러면 왜곡이 줄어들 것입니다. 조사 할 수있는 또 다른 옵션은 이미지의 (있는 그대로) 올바른 위치에 오도록 구의 UV 좌표를 변경하는 것입니다. – gaitat

죄송합니다. 저는 이것에 익숙하지 않아 추가 할 공백이 어느 정도인지 알지 못하며 UV 좌표가 최적 일지에 대해서도 알지 못합니다. –

봐 반 구체 질문에 대한 대답의 핵심은 image you linked to입니다 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의 구체에 이미지 매핑

답변

관련 문제