Three JS: How to add images on each vertices of icosahedron - three.js

Question

I'm new to Three js, i was trying to create a rotating icosahedron with small icon kind of images on each vertex using three js, i could create the icosahedron and make it rotate but I'm not able to attach images on each vertex of it. Can anyone help me do this?
Please check the js fiddle link of what i could acheive so far:
<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();
https://jsfiddle.net/arunvenugopal11/uoxtmtnr/
Thanks in advance :)

Answer 1

You can use THREE.Sprite(), like this:
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);
});
jsfiddle example. r85