My goal is to generate a sphere in Three.js by constructing multiple cylinders and then rotating them in various directions. I attempted to iterate through 2 pie settings to adjust the rotation axis, but unfortunately, it did not yield the desired outcome. Can anyone provide guidance on how to proceed?
var cylinder;
var cylinderMaterial = new THREE.MeshPhongMaterial(
{ color: 0x5500DD,
specular: 0xD1F5FD,
shininess: 100 } );
var cylinderGeo = new THREE.CylinderGeometry( 3, 3, 500, 32 );
var cylinder = new THREE.Mesh( cylinderGeo, cylinderMaterial );
var untransformedCylinder = cylinder.clone();
console.log("Untransformed cylinder matrix:")
console.log(untransformedCylinder.matrix);
scene.add(untransformedCylinder);
var maxCorner = new THREE.Vector3( 1, 1, 1 );
var minCorner = new THREE.Vector3( -1, -1, -1 );
var cylAxis = new THREE.Vector3().subVectors( maxCorner, minCorner );
cylAxis.normalize();
var theta = Math.acos( cylAxis.y );
var rotationAxis = new THREE.Vector3(1, 0, 0);
rotationAxis.normalize();
cylinder.matrixAutoUpdate = false;
cylinder.matrix.makeRotationAxis( rotationAxis, theta );
console.log("Theta: " + theta);
console.log(" cos: " + Math.cos(theta));
console.log(" sin: " + Math.sin(theta));
console.log("Transformed cylinder matrix:")
console.log(cylinder.matrix);
scene.add( cylinder );