I'm currently working on a project where I have a box with various textures on each face. My goal is to create a quad sphere using the same textures from the box. After researching a method for transforming the cube into a sphere, I came across this informative post:
Since I am relatively new to threejs (and 3D programming in general), my initial attempt was to apply the suggested formula directly to the geometry vertices. However, this resulted in simply shrinking the size of the box.
var geometry = new THREE.BoxGeometry(2, 2, 2);
// Material and texture details omitted
var vertices = cube.geometry.vertices;
var sqrt = Math.sqrt;
cube.geometry.dynamic = true;
for (var i = 0; i < vertices.length; i++) {
var v = vertices[i];
var dx = v.x * sqrt(1.0 - ((v.y * v.y) / 2.0) - ((v.z * v.z) / 2.0) + ((v.y * v.y * v.z * v.z) / 3.0));
var dy = v.y * sqrt(1.0 - ((v.z * v.z) / 2.0) - ((v.x * v.x) / 2.0) + ((v.z * v.z * v.x * v.x) / 3.0));
var dz = v.z * sqrt(1.0 - ((v.x * v.x) / 2.0) - ((v.y * v.y) / 2.0) + ((v.x * v.x * v.y * v.y) / 3.0));
vertices[i].set(dx, dy, dz);
}
cube.geometry.verticesNeedUpdate = true;
If anyone has suggestions or tips on how I could successfully achieve this transformation, I would greatly appreciate it!