球面上の点をランダム化してIDを与える

Question

私はこの中にsphereを作成しようとしています。私はクリック可能なドットとメッシュが必要です。だから私は、球の中のすべての点の名前を付けるなら、私はこれを行うことができると思います。 2つの質問 1.球上の点の位置をランダムにする方法はありますか？ 2.ドットとメッシュの名前をどのように指定する必要がありますか？ここ

THREE.IcosahedronGeometry = function(radius, detail) { 
    var t = (1 + Math.sqrt(5))/2; 
    var vertices = [-1, t, 0, 1, t, 0, -1, -t, 0, 1, -t, 0, 
    0, -1, t, 0, 1, t, 0, -1, -t, 0, 1, -t, 
    t, 0, -1, t, 0, 1, -t, 0, -1, -t, 0, 1, -1, t, 0, 1, t, 0, -1, -t, 0, 1, -t, 0, 
    0, -1, t, 0, 1, t, 0, -1, -t, 0, 1, -t, 
    t, 0, -1, t, 0, 1, -t, 0, -1, -t, 0, 1 
    ]; 
    var indices = [ 
    2,10,6,0, 11, 5, 0, 5, 1, 0, 1, 7, 0, 7, 10, 0, 10, 11, 
    1, 5, 9, 5, 11, 4, 11, 10, 2, 10, 7, 6, 7, 1, 8, 
    3, 9, 4, 3, 4, 2, 3, 2, 6, 3, 6, 8, 3, 8, 9, 
    4, 9, 5, 2, 4, 11, 6, 2, 10, 8, 6, 7, 9, 8, 1 
    ]; 
    THREE.PolyhedronGeometry.call(this, vertices, indices, radius, detail); 
    this.type = 'IcosahedronGeometry'; 
    this.parameters = { 
    radius: radius, 
    detail: detail 
    }; 
}; 

THREE.IcosahedronGeometry.prototype = Object.create(THREE.PolyhedronGeometry.prototype); 
THREE.IcosahedronGeometry.prototype.constructor = THREE.IcosahedronGeometry; 

// Scene 
var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 

var renderer = new THREE.WebGLRenderer({ 
    antialias: 1 
}); 

renderer.setClearColor(0xf7f7f7); 
renderer.setSize(window.innerWidth, window.innerHeight); 
document.body.appendChild(renderer.domElement); 

scene.fog = new THREE.Fog(0xd4d4d4, 8, 20); 

// Create vertex points 
var mesh = new THREE.IcosahedronGeometry(10, 2); // radius, detail 
var vertices = mesh.vertices; 

var positions = new Float32Array(vertices.length * 3); 

for (var i = 0, l = vertices.length; i < l; i++) { 
    vertices[i].toArray(positions, i * 3); 
} 
alert(positions); 
var geometry = new THREE.BufferGeometry(); 
geometry.addAttribute('position', new THREE.BufferAttribute(positions, 3)); 

var material = new THREE.PointsMaterial({ 
    size: 0.4, 
    vertexColors: THREE.VertexColors, 
    color: 0x252525 
}); 
var points = new THREE.Points(geometry, material); 

var object = new THREE.Object3D(); 

object.add(points); 

object.add(new THREE.Mesh(
    mesh, 
    new THREE.MeshPhongMaterial({ 
    color: 0x616161, 
    emissive: 0xa1a1a1, 
    wireframe: true, 
    fog: 1 
    }) 

)); 

scene.add(object); 

camera.position.z = 20; 

var render = function() { 
    requestAnimationFrame(render); 

    object.rotation.x += 0.001; 
    object.rotation.y += 0.001; 

    renderer.render(scene, camera); 
}; 

render(); 

http://codepen.io/anon/pen/ZLpPxB

Answer 1

あなたはポイントをランダム化できる方法の例である：要するに

var v3 = new THREE.Vector3(); 
var spherical = new THREE.Spherical(); 

for (var i = 0; i < vertices.length; i += 3) { 
    v3.fromArray(vertices, i); 
    spherical.setFromVector3(v3); 

    spherical.phi += rnd(variation, -variation); 
    spherical.theta += rnd(variation, -variation); 

    v3.setFromSpherical(spherical); 
    v3.toArray(vertices, i); 
} 

、ポイントを操作するための良い方法：http://codepen.io/usefulthink/pen/WRoboo?editors=0010

興味深いビットはこれです球の表面にはspherical-coordinates（x/y/zの代わりにphi/theta/r、緯度/経度を考える）を使用することです。この場合、頂点のそれぞれを球形に変換し、シータ/フィーチャ値を少しずつ（半径をそのままに）操作し、変更された値を頂点配列に書き戻します。

これらのポイントに名前を付けることはどういう意味ですか。このようなもの？

var pointNames = { 
    frank: 12, 
    maria: 7, 
    steve: 3, 
    melissa: 4 
}; 

function getPointByName(name) { 
    const startIndex = pointNames[name] * 3; 
    return new THREE.Vector3().fromArray(vertices, index); 
}