ThreeJS学习记录（一）渐变线

实现方案2—Version141——setAttribute和新的THREE.Line方法：官方在examples文件夹下有很多例子（渐变线），下载到本地，npm运行dev后，访问8080端口，修改代码。注意：观察下一个版本使用的是141，与实现1不同，一定要注意版本更新记录（versionupdaterecord），很多API都被废弃了。<元名称="viewport"content="width=device-width,initial-scale=1.0">实现方案一-版本73-多顶点colors.push方法：例子来自百度，原例子自行修改：https://wow.techbrood.com/fid。……他这里是根据有多少固定点，渲染多少段颜色。如果需要渐变线，需要添加很多固定点。比如我这里加了一条由6个点组成的直线，然后推了六种颜色。*注意：此示例中的ThreeJS文件的版本73是成功渲染所必需的。//创建场景对象Sceneconstscene=newTHREE.Scene();//创建相机对象参数：视角，视角比（宽高比），最近像素，最远像素constcamera=newTHREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);//创建渲染器对象constrenderer=newTHREE.WebGLRenderer();//设置渲染区域大小renderer.setSize(window.innerWidth,window.innerHeight);//将canvas对象插入到body元素中document.body.appendChild(renderer.domElement);//主要代码——————————————————functioninitObject(){vargeometry=newTHREE.Geometry();console.log(geometry)varmaterial=newTHREE.LineBasicMaterial({vertexColors:THREE.VertexColors});varcolor1=newTHREE.Color(0x444444),color2=newTHREE.Color(0xFF0000),color3=newTHREE.Color(0x0000CD),color4=newTHREE.Color(0x9932CC),color5=newTHREE.Color(0x00FFFF),color6=newTHREE.Color(0x00FF7F);//线的材质可以由多点的颜色决定varp1=newTHREE.Vector3(0,0,-100);varp2=newTHREE.Vector3(50,0,-100);varp3=newTHREE.Vector3(100,0,-100);varp4=newTHREE.Vector3(150,0,-100);varp5=newTHREE.Vector3(200,0,-100);varp6=newTHREE.Vector3(250,0,-100);geometry.vertices.push(p1);geometry.vertices.push(p2);geometry.vertices.push(p3);几何y.vertices.push(p4);geometry.vertices.push(p5);geometry.vertices.push(p6);geometry.colors.push(color1,color2,color3,color4,color5,color6);varline=newTHREE.Line(geometry,material);场景。添加（线）；初始化对象（）；//设置相机位置camera.position.z=40;//执行渲染操作renderer.render(scene,camera);