#2 绘制线条

// 设置渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 设置相机
const camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 500);
camera.position.set(0,0,100);
camera.lookAt(new THREE.Vector3(0, 0, 0));

// 创建场景
const scene = new THREE.Scene();

// 定义材质
// 对于线条 可以使用 LineBasicMaterial || LineDashedMaterial
const material = new THREE.LineBasicMaterial({ color: 0x0000ff });

// 添加几何体
// 添加顶点信息
// 可以使用 BufferGeometry 性能更好 这里为了简洁使用 Geometry
const geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-10, 0, 0));
geometry.vertices.push(new THREE.Vector3(0, 10, 0));
geometry.vertices.push(new THREE.Vector3(10, 0, 0));

const line = new THREE.Line(geometry, material);

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

绘制线条.png