Three.js v0.132.2用CircleGeometry实现仅边框圆报vertices不存在求助

Three.js 从 r125 版本开始正式废弃了原有的 Geometry 类，所有内置几何默认返回 BufferGeometry 类型，因此不存在 vertices 属性，原直接操作顶点数组的实现方案失效。

以下为适配高版本 Three.js 的可行方案：

方案1：使用EdgesGeometry提取外边框（最简单实现） #

仅提取圆形的外围边缘，自动过滤中心到边缘的径向边：

const geometry = new THREE.CircleGeometry(5, 32);
// 第二个参数为角度阈值，设为1可过滤所有径向边，仅保留外圆环
const edgesGeometry = new THREE.EdgesGeometry(geometry, 1);
const material = new THREE.LineBasicMaterial({ color: 0xffff00 });
const circle = new THREE.LineLoop(edgesGeometry, material);
scene.add(circle);

方案2：手动提取圆周顶点构造线框 #

手动剔除CircleGeometry默认带的中心点，仅用圆周顶点生成闭合线框：

const geometry = new THREE.CircleGeometry(5, 32);
const positionAttr = geometry.getAttribute('position');
const circlePoints = [];

// 跳过索引为0的中心点，遍历所有圆周顶点
for (let i = 1; i < positionAttr.count; i++) {
  circlePoints.push(new THREE.Vector3(
    positionAttr.getX(i),
    positionAttr.getY(i),
    positionAttr.getZ(i)
  ));
}

const lineGeometry = new THREE.BufferGeometry().setFromPoints(circlePoints);
const material = new THREE.LineBasicMaterial({ color: 0xffff00 });
// LineLoop自动闭合首尾点，形成完整圆环
const circle = new THREE.LineLoop(lineGeometry, material);
scene.add(circle);

方案3：使用RingGeometry实现带厚度的实心边框 #

如果需要有固定宽度的空心圆（非线框样式），直接用RingGeometry更便捷：

// 参数依次为：内半径、外半径、分段数，可根据需求调整边框厚度
const geometry = new THREE.RingGeometry(4.8, 5, 32);
const material = new THREE.MeshBasicMaterial({ 
  color: 0xffff00,
  side: THREE.DoubleSide
});
const circle = new THREE.Mesh(geometry, material);
scene.add(circle);

内容的提问来源于stack exchange，提问作者Arjun M Nair