I have successfully implemented a particle system to evenly distribute points on a sphere and then place instances of a given geometry on those points. Now, I am looking to rotate those geometries to match the surface angle of the sphere.
Below is the current function:
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);
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
});
subgroup.rotation.x = 0;
subgroup.rotation.y = 0;
subgroup.rotation.z = 0;
group.add(subgroup);
}
}
I am still learning Three js, so if there is a more efficient way to achieve this, please share your suggestions. You can view my work in progress here. The animation might take a moment to place the particles correctly before rendering the geometry, but I enjoy the visual effect.