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

Question

我是新来三JS，我试图创建一个旋转二十面体与小图标类型的图像在每个顶点使用三个JS，我可以创建二十面体和让它旋转，但我无法在每个顶点附加图像。任何人都可以帮我做到这一点？ 请检查什么，我可能至今acheive JS的小提琴链接：

<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/

感谢提前:)

Answer 1

您可以使用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); 
}); 

例如

jsfiddle。 r85