如何用three.js 125以后的版本在BuffererGeometry中制作平面球体

<script src="https://cdn.jsdelivr.net/npm/three@0.125.0/build/three.min.js"></script>

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BufferGeometry();

const radius = 5; // 球体半径
const widthSegments = 64; // 宽度分段数
const heightSegments = 64; // 高度分段数

const vertices = [];
const normals = [];
const uvs = [];

for (let phiIndex = 0; phiIndex <= heightSegments; phiIndex++) {
  const phi = phiIndex * Math.PI / heightSegments;
  
  for (let thetaIndex = 0; thetaIndex <= widthSegments; thetaIndex++) {
    const theta = thetaIndex * 2 * Math.PI / widthSegments;
    
    const x = radius * Math.sin(phi) * Math.cos(theta);
    const y = radius * Math.cos(phi);
    const z = radius * Math.sin(phi) * Math.sin(theta);
    
    vertices.push(x, y, z);
    normals.push(x, y, z);
    uvs.push(theta / (2 * Math.PI), 1 - phi / Math.PI);
  }
}

geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));
geometry.setAttribute('normal', new THREE.Float32BufferAttribute(normals, 3));
geometry.setAttribute('uv', new THREE.Float32BufferAttribute(uvs, 2));

const material = new THREE.MeshBasicMaterial({ color: 0xff0000 }); // 设置材质
const sphere = new THREE.Mesh(geometry, material); // 创建平面球体
scene.add(sphere); // 将平面球体添加到场景中

camera.position.z = 10; // 设置相机位置

function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();