使用three.js 画渐变的直线

2019-11-20 09:47:34

字体：大中小

来源：转载

供稿：网友

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带来些帮助

上一篇：JavaScript 数组中最大最小值

下一篇：jquery判断input值不为空的方法