Three.js - объект позиции на вершине другого

Question

У меня есть IcosahedronGeometry определенного как это (со всем кодексом о цветах и ​​без положения вещей опущена):

var radius = 200; 
geometry = new THREE.IcosahedronGeometry(radius, 2); 

var materials = [ 
    new THREE.MeshPhongMaterial({}), 
    new THREE.MeshBasicMaterial({}) 
]; 
group1 = THREE.SceneUtils.createMultiMaterialObject(geometry, materials); 
group1.position.x = 0; 
// rotate a bit just so it spins off-axis 
group1.rotation.x = -1.87; 

что создает почти шаровидный, многоэлектронный односторонняя форма. Я хочу поместить маленькие шары только на несколько вершин этой формы. Скажем, 10 сфер. Я делаю это путем копирования 10 вершин в массив, например:

var vertexArray = []; 
for (var i = 0; i < 10; i++) { 
    vertexArray.push(geometry4.vertices[i]) 
} 

тогда, я использую векторы, скопированные в vertexArray для установки позиции от спрайтов:

for (var i = 0; i < vertexArray.length; i++) { 
    var loader = new THREE.TextureLoader() 
    var spriteMaterial = new THREE.SpriteMaterial(
     { 
      map: loader.load('/glow.png'), 
      blending: THREE.AdditiveBlending, 
      side: THREE.BackSide 
     }) 
    var sprite = new THREE.Sprite(spriteMaterial) 

    sprite.position.set(vertexArray[i].x, vertexArray[i].y, vertexArray[i].z) 
    // do i need rotate these by the same amount? 
    sprite.rotation.x = -1.87 
    scene.add(sprite) 
} 

Это все работает отлично, за исключением что спрайты не совпадают с фактическими вершинами на Icosahedron, они просто сидят случайно (по-видимому) где-то на лицах. Иногда Sprite будет сидеть точно на вершине.

Я копирую вершины неправильно или не вижу здесь шага?

Answer 1

Добавить объект как дочерний объект родительского объекта, а дочерний объект будет вращаться вместе с родителем.

Используйте этот шаблон, вместо этого:

var sprite = new THREE.Sprite(spriteMaterial); 

sprite.position.copy(vertexArray[i]); 

group1.add(sprite); 

Three.js R.76