绘制一个圆和线

// 声明一个几何对象
const linGeometry = new THREE.BufferGeometry()

// 设置一个圆的半径(three.js的单位)
const radius = 60

// 通过椭圆曲线（弧线）绘制一个半圆, 默认是逆时针绘制
// 绘制一个缺口的半圆
// 360° - 45° = 315°
const curve = new THREE.EllipseCurve(
  0, // 中心的X坐标，默认值为0。
  0, // 中心的Y坐标，默认值为0
  radius, // X轴向上椭圆的半径，默认值为1
  radius, // Y轴向上椭圆的半径，默认值为1
  0, //  以弧度来表示，从正X轴算起曲线开始的角度，默认值为0
  Math.PI * 2, // 以弧度来表示，从正X轴算起曲线终止的角度，默认值为2 x Math.PI。
  false, // 椭圆是否按照顺时针方向来绘制，默认值为false。 true为顺时针，false为逆时针
  0 //  以弧度表示，椭圆从X轴正方向逆时针的旋转角度（可选），默认值为0。按照设置的顺时针或逆时针方向旋转
)

// 提取绘制的弧线
linGeometry.setFromPoints(curve.getPoints(50))

// 设置基础线条材质
const material = new THREE.LineBasicMaterial({
  color: '#ffffff',
})

// 设置线条对象
const line = new THREE.Line(linGeometry, material)

// 设置线条的位置
// line.position.set(0, -170 / 2, 0)
// 设置线条的旋转, 旋转90°, 实现地板的效果
// line.rotateX(Math.PI / 2)

// 添加到场景中
this.scene.add(line)

// 设置一个圆的半径(three.js的单位)
const radius = 60

// 通过椭圆曲线（弧线）绘制一个半圆, 默认是逆时针绘制
// 绘制一个缺口的半圆
// 绘制的度数: 360° - 45° = 315°
const curve = new THREE.EllipseCurve(
  0, // 中心的X坐标，默认值为0。
  0, // 中心的Y坐标，默认值为0
  radius, // X轴向上椭圆的半径，默认值为1
  radius, // Y轴向上椭圆的半径，默认值为1
  Math.PI / 4, //  以弧度来表示，从正X轴算起曲线开始的角度，默认值为0
  Math.PI * 2, // 以弧度来表示，从正X轴算起曲线终止的角度，默认值为2 x Math.PI。
  false, // 椭圆是否按照顺时针方向来绘制，默认值为false。 true为顺时针，false为逆时针
  0 //  以弧度表示，椭圆从X轴正方向逆时针的旋转角度（可选），默认值为0。按照设置的顺时针或逆时针方向旋转
)

// 设置一个圆的半径(three.js的单位)
const radius = 60

const curve = new THREE.EllipseCurve(
  0, 
  0, 
  radius, 
  radius, 
  Math.PI / 4, 
  Math.PI * 2, 
  true, // 修改为顺时针绘制
  0 
)

import { LineMaterial } from 'three/examples/jsm/lines/LineMaterial.js'
import { Line2 } from 'three/examples/jsm/lines/Line2.js'
import { LineGeometry } from 'three/examples/jsm/lines/LineGeometry.js'

const geometry = new LineGeometry();
geometry.setPositions( positions );

const matLine = new LineMaterial({
  color: 0xffffff,
  linewidth: 5, // in world units with size attenuation, pixels otherwise
  //resolution:  // to be set by renderer, eventually
  dashed: false,
  alphaToCoverage: true,
});

const line = new Line2(geometry, matLine);
line.computeLineDistances();
line.scale.set(1, 1, 1);
scene.add( line );

// 进行渲染操作
function render() {
  renderer.render(scene, camera);
	// renderer will set this eventually
  matLine.resolution.set( window.innerWidth, window.innerHeight ); // resolution of the viewport
  requestAnimationFrame(render);
}

// 创建材质
const material = new THREE.LineMaterial({
  linewidth: 2,
  vertexColors: true,
  resolution: new THREE.Vector2(800, 600),
});

// 创建空几何体
const geometry = new THREE.LineGeometry();
geometry.setPositions([
  10,10,0, 10,-10,0, -10,-10,0, -10,10,0
]);
// 设置顶点颜色
geometry.setColors([
  1, 0, 0, 0, 1, 0, 0, 0, 1, 1, 1, 0
]);

const line = new THREE.Line2(geometry, material);
line.computeLineDistances();
scene.add(line);