Javascript 将图像（正面和背面）映射到三个js中的球体上

我有一个关于三个JS的问题

拨弄

我想创造一只跟随鼠标移动的眼睛。我上传的图像同时在背景中可见，并且在图像的连接处有一条白线

在这个例子中，我添加了我想在前面和后面使用的图片。我想在前面，在后面使用图像，在后面，在前面使用图像（或颜色）。我也想摆脱白线，我该怎么做

Frontside Image https://image.ibb.co/mmsJ7J/logo_front.png

Backside Image https://image.ibb.co/bE8i7J/logo_back.png (or color)

---

我对三个JS还相当陌生，如果你能在这件事上帮助我，我将不胜感激。

你必须为对象指定两种材质，一种用于正面，一种用于背面。然后，您需要设置每个面的

materialIndex

，以便这些面知道要使用哪种材质

// use material array to apply multiple materials
var material = [
  new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load( "https://image.ibb.co/mmsJ7J/logo_front.png")
  }),
  new THREE.MeshBasicMaterial({
    map: new THREE.TextureLoader().load( "https://image.ibb.co/bE8i7J/logo_back.png")
  })
];

// in your faces loop, set materialIndex according to front or back side of geometry
if (v1.z < 0)
    faces[i].materialIndex = 1;

// after loop, set groupsNeedUpdate -> "Set to true if a face3 materialIndex has been updated."
geometry.groupsNeedUpdate = true;

下面是一个片段（或者看看更新的JSFIDLE:）

//设置：
var container=document.querySelector（“#container”）；
var renderer=new THREE.WebGLRenderer（{alpha:true}）；
变量宽度=window.innerWidth；
var HEIGHT=window.innerHeight；
设置大小（宽度、高度）；
var视角=40；
var ASPECT=宽度/高度；
var近=0.1；
var-FAR=1000；
var摄像机=新的三个透视摄像机（视角、方向、近距离、远距离）；
摄像机位置设置（0,0,50）；
var scene=new THREE.scene（）；
scene.background=null；
场景。添加（摄影机）；
container.appendChild（renderer.domeElement）；
var半径=200；
var段=50；
var环=50；
var group=新的三个.group（）；
场景。添加（组）；
可变材料=[
新的三网格基本材料({
映射：新的3.TextureLoader（）.load（“https://image.ibb.co/mmsJ7J/logo_front.png" ),
透支：0
}),
新的三网格基本材料({
映射：新的3.TextureLoader（）.load（“https://image.ibb.co/bE8i7J/logo_back.png" ),
透支：0
})
];
添加（新的三个环境光（0xffffff，0.2））；
var灯=新的三点灯（0xffffff，0.2）；
相机。添加（灯光）；
var几何=新的三种。球墨法（60,64,32）；
geometry.computeBoundingBox（）；
var max=geometry.boundingBox.max.clone（）.add（新的三个.Vector3（1,1,1）），
min=geometry.boundingBox.min.clone（）.add（新的三个.Vector3（-1，-1，-1））；
var偏移=新的三个矢量2（0-min.x，0-min.y）；
var范围=新的三个矢量2（最大x-最小x，最大y-最小y）；
var faces=geometry.faces；
geometry.faceVertexUvs[0]=[]；
对于（变量i=0；i
body{margin:0；background:#ddd；}
.logo{位置：绝对；顶部：10px；宽度：100px；高度：100px；背景大小：100%自动；背景重复：无重复；}
.front{left:10px；背景图像：url（“https://image.ibb.co/mmsJ7J/logo_front.png")}
.back{left:120px；背景图像：url（“https://image.ibb.co/bE8i7J/logo_back.png）}


var max = geometry.boundingBox.max.clone().add(new THREE.Vector3(1,1,1)),
    min = geometry.boundingBox.min.clone().add(new THREE.Vector3(-1,-1,-1));

// If the radius of the sphere is smaller, you should also set a smaller offset.
// in this example it's 1:60, which is ok.