Отображение изображения на сфере в 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 );

Надеюсь, кто-нибудь может помочь?

Ответы

Ответ 1

Ключом к ответу на ваш вопрос является образ, который вы связали с.

Это изображение выглядит как образ MatCap, используемый в сферическом отображении окружения. Вы можете увидеть пример отображения сферической среды здесь.

Соответствующим шейдером для такой карты окружения является та, которая использует (функцию) сферу нормальную, как УФ-индекс, в карту текстуры.

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

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

Это так просто.: -)

Fiddle: http://jsfiddle.net/zD2rH/184/

EDIT: если вы хотите использовать MeshPhongMaterial, то вы можете добиться такого же эффекта, изменив сферу UVs следующим образом:

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

Такая же идея.

2nd Fiddle: http://jsfiddle.net/zD2rH/183/

EDIT: обновлено до трёх. js r.74

Eye Rendered on Sphere from MatCap Texture

Ответ 2

Текстура, которая у вас есть, представляет собой только видимую часть глаза, которая не является всей сферой. Вам нужно добавить пустое пространство вокруг существующей текстуры, чтобы часть сферы не была видимой.