使用three.js 画渐变的直线

Three.js 是一款运行在浏览器中的 3D 引擎，你可以用它创建各种三维场景，包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过，这款引擎目前还处在比较不成熟的开发阶段，其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度（尤其是文档的匮乏）three.js的代码托管在github上面。
http://github.com/mrdoob/three.js/
我们来看实例吧

<！DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><script type="text/javascript" src="js/three.js" ></script><style>div#canvas-frame{border: none;cursor: pointer;width: 100%;height: 600px;background-color: #eeeeee;}</style><script>var renderer;function initThree（）{width = document.getElementById（"canvas-frame"）.clientWidth;height = document.getElementById（"canvas-frame"）.clientHeight;//渲染器 决定渲染的结果和应该画在页面的元素什么元素上面并且怎样绘制。renderer = new THREE.WebGLRenderer（{antialias : true}）;renderer.setSize（width,height）;//domElement表示渲染器中的画布，所有的渲染都画在上边document.getElementById（"canvas-frame"）.appendChild（renderer.domElement）;renderer.setClearColor（0xFFFFFF,1.0）;}//相机 透视相机var camera;function initCamera（）{camera = new THREE.PerspectiveCamera（45,width/height,1,10000）;camera.position.x = 0;camera.position.y = 1000;camera.position.z = 0;camera.up.x = 0;camera.up.y = 0;camera.up.z = 1;camera.lookAt（{x : 0,y : 0,z : 0}）;}//场景var scene;function initScene（）{scene = new THREE.Scene（）;}//灯光var light;function initLight（）{light = new THREE.DirectionalLight（0xFF0000, 1.0 , 0）;light.position.set（100, 100, 200）;scene.add（light）;}//几何体var cube;function initObject（）{//声明的几何体， 里边有个vertices参数可以用来存放点var geometry = new THREE.Geometry（）;//LineBasicMaterial（parameters）//basic翻译：基础//Material翻译：原料//Parameters:是一个定义材质外观的对象，它包含多个属性来定义材质，这些属性是//翻译：参数//Color:线条的颜色，用16进制来表示，默认的颜色是白色。//Linewidth//Linecap:线条两端的外观，默认是圆角端点，当线条较粗的时候才看得出效果//cap翻译：帽子//Linejoin:两个线条的连接点处的外观，默认是round 圆角//join翻译：加入//VertexColors:定义线条材质是否使用顶点元素，这是一个boolean值。意思是线条各部分的颜色根据顶点的颜色来进行插值。//vertex翻译：顶点//Fog:定义材质的颜色是否受全局雾效的影响。//翻译：雾var material = new THREE.LineBasicMaterial（{vertexColors: true}）;//定义两种颜色分别是两个端点的颜色var color1 = new THREE.Color（ 0x444444 ）,color2 = new THREE.Color（ 0xFF0000 ）;//线的材质可以由两点的颜色决定var p1 = new THREE.Vector3（）;var p2 = new THREE.Vector3（）;p1.set（-100,0,100）;p2.set（100,0,-100）;geometry.vertices.push（p1）;geometry.vertices.push（p2）;geometry.colors.push（color1, color2）;//定义线条 这里会传进去三个参数//第一个是几何体geometry，里面包含两个顶点和顶点颜色//第二个是线条的材质//第三个是一组点的连接方式var line = new THREE.Line（geometry,material, THREE.LinePieces）;//将线条添加到场景中scene.add（line）;}function threeStart（）{initThree（）;initCamera（）;initScene（）;initLight（）;initObject（）;renderer.clear（）;renderer.render（scene,camera）;}</script><body onload="threeStart（）"><div id="canvas-frame"></div></body></html>

希望本实例能给大家学习three.js带来些帮助