how to make a faced sphere in BuffererGeometry with three.js version after 125 - three.js

Question

The purpose of the code is to make a faced sphere in three.js in the old version before version 125
// 1. the first step is Make a faceted cube
let geometry = new THREE.BoxGeometry(1, 1, 1, 64, 64, 64);
// 2. the second step is Normalize all vertices
for (var i in this.geometry.vertices) {
geometry.vertices[i].normalize().multiplyScalar(this.radius);
}
// geometry.makeGroups();
geometry.computeVertexNormals();
geometry.computeFaceNormals();
geometry.computeMorphNormals();
geometry.computeBoundingSphere();
geometry.computeBoundingBox();
// geometry.computeLineDistances();
geometry.verticesNeedUpdate = true;
geometry.elementsNeedUpdate = true;
geometry.uvsNeedUpdate = true;
geometry.normalsNeedUpdate = true;
// geometry.tangentsNeedUpdate = true;
geometry.colorsNeedUpdate = true;
geometry.lineDistancesNeedUpdate = true;
// geometry.buffersNeedUpdate = true;
geometry.groupsNeedUpdate = true;
After version 125, the geometry class is removed and have BuffererGeometry in place, how would I modify the code to make a sphere again?

Answer 1

You can transform a box into a sphere this way:
body{
overflow: hidden;
margin: 0;
}
<script type="module">
import * as THREE from "https://cdn.skypack.dev/three#0.133.1";
import {OrbitControls} from "https://cdn.skypack.dev/three#0.133.1/examples/jsm/controls/OrbitControls.js";
let scene = new THREE.Scene();
let camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 1, 1000);
camera.position.set(0, 0, 5);
let renderer = new THREE.WebGLRenderer();
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);
let controls = new OrbitControls(camera, renderer.domElement);
let g = new THREE.BoxGeometry(1, 1, 1, 64, 64, 64);
let pos = g.attributes.position;
let v3 = new THREE.Vector3();
let radius = 2;
for (let i = 0; i < pos.count; i++){
v3.fromBufferAttribute(pos, i).normalize().multiplyScalar(radius);
pos.setXYZ(i, v3.x, v3.y, v3.z);
}
g.computeVertexNormals();
let m = new THREE.MeshNormalMaterial({wireframe: true});
let o = new THREE.Mesh(g, m);
scene.add(o);
window.addEventListener("resize", () => {
camera.aspect = innerWidth / innerHeight;
camera.updateProjectionMatrix();
renderer.setSize(innerWidth, innerHeihgt);
});
renderer.setAnimationLoop(() => {
renderer.render(scene, camera);
});
</script>