Tre js rotazione di oggetti intorno a una sfera

Sto usando un sistema di particelle per distribuire in modo uniforms i punti in una sfera. Che funziona grande. Posso quindi mettere istanze di una determinata geometria su quei punti. Questa parte funziona anche. Ora vorrei ruotare quelle geometrie per adattarsi all'angolo superficiale della sfera.

Ecco la function finora:

function placeGeometryAtPlatonicPoints (points) { var len = points.length -1, x, y, z, geometry, // subgroup a group to apply the rotations to subgroup = new THREE.Object3D(), mesh, material = new THREE.MeshLambertMaterial({ color: 0x0992299 }), r, theta, varphi; // I wait to append this group because I am waiting for the // particles to settle into there positions scene.add(group); for (len; len >= 0; len -= 1) { // Geometry could be any geometry I am just using a cube to test. geometry = new THREE.CubeGeometry( 25, 25, 25, 1, 1, 1 ); x = points[len].x; y = points[len].y; z = points[len].z; // Move the geometry to the point on the sphere. geometry.applyMatrix( new THREE.Matrix4().makeTranslation(x, y, z) ); mesh = new THREE.Mesh( geometry, material ); subgroup.add(mesh); // This next portion is just some guess work about // polar and azimuth coordinates r = Math.sqrt(Math.pow(x,2) + Math.pow(y,2) + Math.pow(z,2)); theta = Math.acos(z/r); varphi = Math.atan(y/x); theta = theta * (180/Math.PI); varphi = varphi * (180/Math.PI); console.log({ theta : theta, varphi : varphi }); // This would be the implementation of the rotation degrees. subgroup.rotation.x = 0; subgroup.rotation.y = 0; subgroup.rotation.z = 0; group.add(subgroup); } } 

Sono nuovo a tre js, quindi se c'è un modo migliore per fare tutto questo, per favore fathemes sapere. Ecco il mio WIP . Dovrai dare un secondo per posizionare correttamente la particella prima di rendere la geometria. Potrei accelerare questo ma mi piace l'animation:)

Se si desidera che i cubetti siano ruotati in modo che siano tangenti alla sfera, allora pensate a ciascun cubo come essere sulla fine di un bastone.

Il bastone è un Object3D situato all'origine. Il cubo è un figlio del bastone situato a ( 0, 0, r ) . Ora ruotare il bastone where vuoi. (Ma evitare i poli nord e sud.)

 var parent = new THREE.Object3D(); scene.add( parent ); var stick = new THREE.Object3D(); var point = new THREE.Vector3( x, y, z ); stick.lookAt( point ); parent.add( stick ); var geometry = new THREE.CubeGeometry( 25, 25, 25, 1, 1, 1 ); var mesh = new THREE.Mesh( geometry, material ); mesh.position.set( 0, 0, r ); stick.add( mesh ); 

tre.js r.64