如何在THREE.js中填充2D圆形的内部区域？

你原来的代码用THREE.Line绘制的是线条轮廓，这类线条对象无法直接填充内部。要实现带填充的实心圆形，Three.js提供了更直接的方式：用**Mesh（网格）**配合专门的圆形几何体来实现，以下是两种常用方法：

方法一：使用CircleGeometry（推荐，适合简单圆形） #

直接用CircleGeometry创建圆形几何体，搭配Mesh材质生成实心圆形，代码替换原有的Line相关部分即可：

let camera = new THREE.OrthographicCamera( -1.0, 1.0, 1.0, -1.0, -1.0, 1.0 );

// 创建圆形几何体：参数依次为半径、分段数（分段越多圆形越平滑）
let circleGeometry = new THREE.CircleGeometry(1, 32);
// 创建Mesh材质，设置填充颜色；如果需要同时显示轮廓，可添加wireframe: true
let circleMaterial = new THREE.MeshBasicMaterial({ color: "blue", wireframe: false });
// 组合几何体与材质，生成实心圆形Mesh
let filledCircle = new THREE.Mesh(circleGeometry, circleMaterial);

scene.add(filledCircle); 

scene.add(camera);
renderer.render(scene, camera);

方法二：使用Shape+ShapeGeometry（适合自定义复杂形状） #

如果后续需要绘制更复杂的闭合图形，也可以先创建圆形路径，再转为几何体：

let camera = new THREE.OrthographicCamera( -1.0, 1.0, 1.0, -1.0, -1.0, 1.0 );

// 创建圆形路径Shape
let circleShape = new THREE.Shape();
circleShape.absarc(0, 0, 1, 0, Math.PI * 2); // 参数：圆心x、y，半径，起始角度，结束角度
// 将路径转为几何体
let shapeGeometry = new THREE.ShapeGeometry(circleShape);
// 创建Mesh并添加到场景
let filledCircle = new THREE.Mesh(shapeGeometry, new THREE.MeshBasicMaterial({ color: "blue" }));

scene.add(filledCircle); 

scene.add(camera);
renderer.render(scene, camera);

如果需要同时保留原来的蓝色轮廓线，只需不删除原有的lineStrip对象，同时添加上述的filledCircle即可，这样就能实现“填充+轮廓”的效果。

内容的提问来源于stack exchange，提问作者Jonas