在 Three.js 中将图像映射到球体上 [英] Mapping image onto a sphere in Three.js

问题描述

我目前正在使用 Three.js 来尝试创造一些东西.我有一个球体，我正在尝试将眼球图像.

该图像看起来像球形环境映射中使用的 MatCap 图像.您可以在此处查看球形环境映射示例.

适合此类环境贴图的着色器是使用球体法线(的函数)作为纹理贴图的 UV 索引的着色器.

vec2 uv = normalize( vNormal ).xy * 0.5 + 0.5;vec3 颜色 = 纹理 2D( tex, uv ).rgb;

小提琴:http://jsfiddle.net/0upgt78k/

更新为three.js r.130

I'm currently using Three.js to try and create something. I've got a sphere, and I'm trying to map the eyeball image here onto it.

The problem I have is that the result looks like this:-

How can I get it to map properly without looking stretched? My code for creating the sphere and mapping the texture is below:-

    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 );

Hopefully somebody can help?

解决方案

The key to the answer to your question is the image you linked to.

That image looks like a MatCap image used in spherical environment mapping. You can see an example of spherical environment mapping here.

The appropriate shader for such an environment map is one that uses (a function of) the sphere's normal as the UV index into the texture map.

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

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

Fiddle: http://jsfiddle.net/0upgt78k/

EDIT: updated to three.js r.130

这篇关于在 Three.js 中将图像映射到球体上的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！