three.js绘制线

### 回答1：
用 three.js 绘制线需要使用 THREE.Line 类。首先需要创建一条几何线，然后将其传递给 THREE.Line 类的构造函数，如下所示：

// 创建几何线
var 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));

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

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

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

这段代码创建了一条由三个点组成的线，颜色为蓝色，然后将其添加到场景中。你可以根据需要修改线的颜色、宽度、端点样式等属性。

### 回答2：
three.js是一种用于在网页上创建交互式3D图形的JavaScript库。它提供了各种功能，包括绘制线条。

要绘制线条，首先我们需要创建一个场景(Scene)、相机(Camera)和渲染器(Renderer)。然后，我们使用three.js中的Geometry(几何体)来创建一个线条的顶点信息。通过定义起点和终点的坐标来创建几何体。

接下来，我们需要创建一个材质(Material)来给线条上色。可以使用LineBasicMaterial(基础线条材质)来设置线条的颜色、宽度和透明度等属性。然后，将几何体和材质传递给Line(线条)对象进行实例化。

最后，将线条对象添加到场景中并进行渲染。在每一帧中，通过调用渲染器的render函数来实时渲染场景。

以下是一个简单的示例代码来绘制一条线：

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

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

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

// 创建线条的起点和终点的坐标
var start = new THREE.Vector3(-1, 0, 0);
var end = new THREE.Vector3(1, 0, 0);

// 创建线条几何体
var geometry = new THREE.Geometry();
geometry.vertices.push(start, end);

// 创建线条材质
var material = new THREE.LineBasicMaterial({ color: 0x00ff00, linewidth: 2 });

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

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

// 渲染场景
function render() {
   requestAnimationFrame(render);
   renderer.render(scene, camera);
}
render();

通过上述代码，我们就可以在网页上绘制一条绿色的宽度为2的直线了。当然，我们可以根据需要调整线条的起点和终点坐标、颜色、宽度等属性来创建不同的线条效果。

### 回答3：
three.js是一款用于创建WebGL应用程序的JavaScript库。它提供了许多几何对象和材质，使开发者可以通过代码轻松地绘制出各种图形，包括线条。

要使用three.js绘制线条，首先需要创建一个场景（Scene）和一个相机（Camera）。然后，我们可以通过创建一个几何对象（Geometry）来定义线条的顶点坐标。接下来，我们可以使用线条材质（LineBasicMaterial）来定义线条的颜色和宽度等属性。最后，我们将几何对象和材质传入线条（Line）构造函数，创建出线条对象。

下面是一个简单的示例代码，用于绘制两个点之间的直线：

// 创建场景和相机
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

// 创建几何对象，定义线条的顶点坐标
var geometry = new THREE.Geometry();
geometry.vertices.push(new THREE.Vector3(-1, 0, 0));
geometry.vertices.push(new THREE.Vector3(1, 0, 0));

// 创建线条的材质，定义线条的颜色和宽度等属性
var material = new THREE.LineBasicMaterial({ color: 0x00ff00, linewidth: 2 });

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

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

// 设置相机位置
camera.position.z = 5;

// 创建渲染器并将其添加到文档中
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 渲染场景和相机
function animate() {
    requestAnimationFrame(animate);
    renderer.render(scene, camera);
}
animate();

通过以上代码，我们可以在浏览器中看到一条从(-1, 0, 0)到(1, 0, 0)的直线，颜色为绿色，宽度为2个像素。这是一个非常基本的例子，你可以根据需要自定义线条的各种属性和形状，创造出更加丰富多样的线条效果。