这篇文章主要介绍了使用 three.js 画渐变的直线的相关资料以及具体的实例代码,有需要的小伙伴可以参考下
three.js 是 JavaScript 编写的 webGL 第 三方库。提供了非常多的 3D 显示功能。Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。
Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象。你可以在它的主页上看到许多精彩的演示。不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js 的代码托管在 github 上面。
我们来看实例吧
- <!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 带来些帮助
来源: http://www.phperz.com/article/17/0226/265151.html