实现计划1——多顶点
形式：百度进去的例子，本人改改。原例子：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>实现计划2——