使用three.js 画渐变的直线


Posted in Javascript onJune 05, 2016

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 相关文章推荐
jqgrid 编辑添加功能详细解析
Nov 08 Javascript
JavaScript制作淘宝星级评分效果的思路
Jun 23 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
Angularjs在初始化未完毕时出现闪烁问题的解决方法分析
Aug 05 Javascript
jQuery将表单序列化成一个Object对象的实例
Nov 29 Javascript
jQuery实现的简单拖动层示例
Feb 22 Javascript
Dropify.js图片宽高自适应的方法
Nov 27 Javascript
浅谈redux以及react-redux简单实现
Aug 28 Javascript
angularJs自定义过滤器实现手机号信息隐藏的方法
Oct 08 Javascript
使用vue开发移动端管理后台的注意事项
Mar 07 Javascript
vue实现全匹配搜索列表内容
Sep 26 Javascript
JavaScript图像放大镜效果实现方法详解
Jun 28 Javascript
jquery判断input值不为空的方法
Jun 05 #Javascript
jQuery四种选择器使用及示例
Jun 05 #Javascript
JavaScript和jquery获取父级元素、子级元素、兄弟元素的方法
Jun 05 #Javascript
分享javascript实现的冒泡排序代码并优化
Jun 05 #Javascript
EasyUI布局 高度自适应
Jun 04 #Javascript
javascript获取select标签选中的值
Jun 04 #Javascript
jQuery Mobile 触摸事件实例
Jun 04 #Javascript
You might like
Zend的MVC机制使用分析(二)
2013/05/02 PHP
Laravel框架路由配置总结、设置技巧大全
2014/09/03 PHP
PHP自动生成表单代码分享
2015/06/19 PHP
PHP实现的进度条效果详解
2016/05/03 PHP
goto语法在PHP中的使用教程
2020/09/17 PHP
常用简易JavaScript函数
2009/04/09 Javascript
让FireFox支持innerText的实现代码
2009/12/01 Javascript
js chrome浏览器判断代码
2010/03/28 Javascript
在IE浏览器中resize事件执行多次的解决方法
2011/07/12 Javascript
解析jQuery的三种bind/One/Live事件绑定使用方法
2013/12/30 Javascript
js实现网页随机切换背景图片的方法
2014/11/01 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
简述Jquery与DOM对象
2015/07/10 Javascript
非常实用的12个jquery代码片段
2015/11/02 Javascript
AngularJS 中的指令实践开发指南(一)
2016/03/20 Javascript
基于javascript实现最简单的选项卡切换效果
2016/05/16 Javascript
jQuery插件FusionCharts绘制2D环饼图效果示例【附demo源码】
2017/04/10 jQuery
浅析node.js的模块加载机制
2018/05/25 Javascript
使用weixin-java-tools完成微信授权登录、微信支付的示例
2018/09/26 Javascript
vue生命周期的探索
2019/04/03 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
extjs图表绘制之条形图实现方法分析
2020/03/06 Javascript
javascript设计模式 ? 工厂模式原理与应用实例分析
2020/04/09 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
Python selenium 父子、兄弟、相邻节点定位方式详解
2016/09/15 Python
Python之NumPy(axis=0 与axis=1)区分详解
2019/05/27 Python
如何通过Python实现标签云算法
2019/07/02 Python
python实现五子棋游戏(pygame版)
2020/01/19 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
.NET初级开发工程师面试题
2014/04/18 面试题
高中同学聚会邀请函
2014/01/11 职场文书
有子女的离婚协议书怎么写(范本)
2014/09/29 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
MySQL如何构建数据表索引
2021/05/13 MySQL