实现方案2——版本141——setAttribute和new THREE.Line
方式：官方在examples文件夹里有很多例子（渐变的线），下载到本地，npm run dev之后访问8080端口，修改代码即可。
注意：观察下版本用的是141，和实现方案1不一样，一定要关注版本更新记录（版本更新记录），有很多API都废弃了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>141版本ThreeJS画渐变的线</title>
</head>
<body>
</body>
<script src="./three.141.js"></script>
<script src="./OrbitControls.js"></script>
<script>
// 创建场景对象Scene
const scene = new THREE.Scene();
// 创建相机对象 参数：视角、视角比例（宽度和高度比）、最近像素、最远像素
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
//设置渲染区域尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
//body元素中插入canvas对象
document.body.appendChild(renderer.domElement);
// 主要代码————————————————
function initObject() {
const geometry = new THREE.BufferGeometry();
const point1 = [10, 21, 10], point2 = [20, 21, 10], point3 = [30, 21, 10];
const color1 = [1, 0, 0], color2 = [0, 1, 0.6250000000000001], color3 = [0.031249999999999556, 0, 1];
geometry.setAttribute('position', new THREE.Float32BufferAttribute(point1.concat(point2).concat(point3), 3));
geometry.setAttribute('color', new THREE.Float32BufferAttribute(color1.concat(color2).concat(color3), 3));
var material = new THREE.LineBasicMaterial({ color: 0xffffff, vertexColors: true });
scene.add(new THREE.Line(geometry, material));
}
initObject();
// 辅助坐标系 参数250表示坐标系大小，可以根据场景大小去设置
// var axesHelper = new THREE.AxesHelper(250);
// scene.add(axesHelper);
//设置相机位置
camera.position.x = 30;
camera.position.y = 20;
camera.position.z = 40;
//执行渲染操作
function render() {
renderer.render(scene, camera);//执行渲染操作
}
render();
</script>
</html>实现方案1——版本73——多顶点colors.push
方式：百度出来的例子，自己改改。原例子：https://wow.techbrood.com/fid...。他这里是根据有多少个定点，渲染多少段颜色，如果需要实现渐变的线，则需要添加很多个定点，比如我这里添加了6个点形成的直线，再push六个颜色就好了。
*注意：必须要这个例子中73版本的ThreeJS文件才能成功渲染。
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - lines - colors</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
</head>
<body>
<script src="./three.73.js"></script>
<script type="module">
// 创建场景对象Scene
const scene = new THREE.Scene();
// 创建相机对象 参数：视角、视角比例（宽度和高度比）、最近像素、最远像素
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
// 创建渲染器对象
const renderer = new THREE.WebGLRenderer();
//设置渲染区域尺寸
renderer.setSize(window.innerWidth, window.innerHeight);
//body元素中插入canvas对象
document.body.appendChild(renderer.domElement);
// 主要代码————————————————
function initObject() {
var geometry = new THREE.Geometry(); console.log(geometry)
var material = new THREE.LineBasicMaterial({
vertexColors: THREE.VertexColors
});
var color1 = new THREE.Color(0x444444),
color2 = new THREE.Color(0xFF0000),
color3 = new THREE.Color(0x0000CD),
color4 = new THREE.Color(0x9932CC),
color5 = new THREE.Color(0x00FFFF),
color6 = new THREE.Color(0x00FF7F);
// 线的材质可以由多点的颜色决定
var p1 = new THREE.Vector3(0, 0, -100);
var p2 = new THREE.Vector3(50, 0, -100);
var p3 = new THREE.Vector3(100, 0, -100);
var p4 = new THREE.Vector3(150, 0, -100);
var p5 = new THREE.Vector3(200, 0, -100);
var p6 = new THREE.Vector3(250, 0, -100);
geometry.vertices.push(p1);
geometry.vertices.push(p2);
geometry.vertices.push(p3);
geometry.vertices.push(p4);
geometry.vertices.push(p5);
geometry.vertices.push(p6);
geometry.colors.push(color1, color2, color3, color4, color5, color6);
var line = new THREE.Line(geometry, material);
scene.add(line);
}
initObject();
//设置相机位置
camera.position.z = 40;
//执行渲染操作
renderer.render(scene, camera);
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。