threejs 画线

// 引入Three.js库
import * as THREE from 'three';

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

// 创建相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.z = 5;

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

// 定义线的起点和终点
const points = [];
points.push(new THREE.Vector3(-1, 0, 0));
points.push(new THREE.Vector3(0, 1, 0));
points.push(new THREE.Vector3(1, 0, 0));

// 创建几何体
const geometry = new THREE.BufferGeometry().setFromPoints(points);

// 创建材质
const material = new THREE.LineBasicMaterial({ color: 0x0000ff });

// 创建线条对象
const line = new THREE.Line(geometry, material);

// 将线条添加到场景中
scene.add(line);

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

解释说明：

1. 引入Three.js库：使用import * as THREE from 'three';引入Three.js库。
2. 创建场景：使用THREE.Scene()创建一个场景对象。
3. 创建相机：使用THREE.PerspectiveCamera()创建一个透视相机，并设置其位置。
4. 创建渲染器：使用THREE.WebGLRenderer()创建一个WebGL渲染器，并将其大小设置为窗口大小，然后将渲染器的DOM元素添加到页面中。
5. 定义线的起点和终点：创建一个数组points，并添加三个点作为线的顶点。
6. 创建几何体：使用THREE.BufferGeometry().setFromPoints(points)创建几何体。
7. 创建材质：使用THREE.LineBasicMaterial()创建线的材质，并设置颜色。
8. 创建线条对象：使用THREE.Line()创建线条对象，并传入几何体和材质。
9. 将线条添加到场景中：使用scene.add(line)将线条添加到场景中。
10. 渲染循环：定义animate函数，使用requestAnimationFrame实现动画效果，并调用renderer.render(scene, camera)进行渲染。