Three.js 三个JS：如何在二十面体的每个顶点上添加图像

我是三个js的新手，我试着用三个js在每个顶点上创建一个旋转的二十面体，每个顶点上都有一个小图标类的图像，我可以创建二十面体并使它旋转，但我不能在它的每个顶点上附加图像。谁能帮我做这个？ 请查看到目前为止我能获得的js fiddle链接：

<div id="container"></div>

var $container = $('#container');
var renderer = new THREE.WebGLRenderer({
  antialias: true,
  alpha: true
});
var camera = new THREE.PerspectiveCamera(80, 1, 0.1, 10000);
var scene = new THREE.Scene();
var Ico;

scene.add(camera);
renderer.setSize(576, 576);

// Making the canvas responsive
function onWindowResize() {

  var screenWidth = $(window).width();
  if (screenWidth <= 479) {
    renderer.setSize(300, 300);
  } else if (screenWidth <= 767) {
    renderer.setSize(400, 400);
  } else if (screenWidth <= 991) {
    renderer.setSize(500, 500);
  } else if (screenWidth <= 1200) {
    renderer.setSize(450, 450);
  } else if (screenWidth <= 1366) {
    renderer.setSize(550, 550);
  }
  camera.updateProjectionMatrix();

}
onWindowResize();
window.addEventListener('resize', onWindowResize, false);


$container.append(renderer.domElement);

// Camera
camera.position.z = 200;

// Material
var greyMat = new THREE.MeshPhongMaterial({
  color: new THREE.Color("rgb(125,127,129)"),
  emissive: new THREE.Color("rgb(125,127,129)"),
  specular: new THREE.Color("rgb(125,127,129)"),
  shininess: "100000000",
  shading: THREE.FlatShading,
  transparent: 1,
  opacity: 1
});

var L2 = new THREE.PointLight();
L2.position.z = 1900;
L2.position.y = 1850;
L2.position.x = 1000;
scene.add(L2);
camera.add(L2);

var Ico = new THREE.Mesh(new THREE.IcosahedronGeometry(125, 1), greyMat);
Ico.rotation.z = 0.5;
scene.add(Ico);
var trackballControl = new THREE.TrackballControls(camera, renderer.domElement);
trackballControl.rotateSpeed = 1.0; 
trackballControl.noZoom = true;

function update() {
  Ico.rotation.x += 2 / 500;
  Ico.rotation.y += 2 / 500;
}

// Render
function render() {
  trackballControl.update();
  requestAnimationFrame(render);
  renderer.render(scene, camera);
  update();
}
render();

var$container=$（“#container”）；
var renderer=new THREE.WebGLRenderer({
反别名：是的，
阿尔法：是的
});
var摄像机=新的三视角摄像机（80,1,0.1,10000）；
var scene=new THREE.scene（）；
var Ico；
场景。添加（摄影机）；
设置大小（576576）；
//使画布具有响应性
函数onWindowResize（）{
var screenWidth=$（窗口）.width（）；
如果（屏幕宽度您可以使用
THREE.Sprite（）
，如下所示：

var txtLoader = new THREE.TextureLoader();

txtLoader.setCrossOrigin(""); // you don't need it, if you get images from your web site

var textures = [ // you can have a full set of 42 images, I used just 2
  "https://threejs.org/examples/textures/UV_Grid_Sm.jpg",
  "https://threejs.org/examples/textures/colors.png"
];
var direction = new THREE.Vector3(); // we'll re-use it in the loop

Ico.geometry.vertices.forEach(function(vertex, index){

  var texture = txtLoader.load(textures[index % 2]); // when you have a full set of images, you don't need that operation with modulus '%'

  var spriteMaterial = new THREE.SpriteMaterial({map: texture});
  var sprite = new THREE.Sprite(spriteMaterial);

  sprite.scale.setScalar(10); // the size is up to you

  direction.copy(vertex).normalize(); // direction is just a normalized vertex

  sprite.position.copy(vertex).addScaledVector(direction, 10); // add scaled direction to the position of a sprite

  Ico.add(sprite);
});

示例.r85
作为一个选项，你可以使用一个精灵一个顶点，带有你想要的图像纹理。嘿@prisoner849你能用这个精灵创建一个小提琴吗？多亏了很多人，一切都很好，但是图像看起来模糊。我使用的是128 x 128像素的图像，它看起来仍然模糊，我甚至尝试了SVG图像，但运气好。有什么简单的方法可以让图片看起来更好吗？@Arun 1）如果一个答案解决了你的问题，那么就把它标记为被接受（至少人们花时间在这个问题上是为了让你开心），2）关于模糊的问题不在本主题范围内，因为您最初的问题是关于在每个顶点上添加图像。因此，您可以开始一个新问题，或者尝试在上搜索答案，因为在
three.js
tag.Hi@prisoner849中多次询问，因为我不熟悉堆栈溢出，不知道此平台的规则，所以我可以我的行为不像你期望的那样，对此表示歉意。是的，你的解决方案帮助我解决了我的问题，因此我肯定会将其标记为接受。我非常感谢你对前端开发社区的帮助。非常感谢：）不客气）我的评论本不应该是恶意的。