使用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 相关文章推荐
10个基于jQuery或JavaScript的WYSIWYG 编辑器整理
May 06 Javascript
新鲜出炉的js tips提示效果
Apr 03 Javascript
hover的用法及live的用法介绍(鼠标悬停效果)
Mar 29 Javascript
JavaScript实现按照指定长度为数字前面补零输出的方法
Mar 19 Javascript
JQuery CheckBox(复选框)操作方法汇总
Apr 15 Javascript
JS针对浏览器窗口关闭事件的监听方法集锦
Jun 24 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
Feb 19 Javascript
JavaScript的词法结构精华篇
Oct 17 Javascript
Node.js中Koa2在控制台输出请求日志的方法示例
May 02 Javascript
浅谈 Webpack 如何处理图片(开发、打包、优化)
May 15 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
Javascript中的奇葩知识,你知道吗?
Jan 25 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
PHP脚本数据库功能详解(上)
2006/10/09 PHP
php sybase_fetch_array使用方法
2014/04/15 PHP
php获取网页里所有图片并存入数组的方法
2015/04/06 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
Laravel 读取 config 下的数据方法
2019/10/13 PHP
BOOM vs RR BO5 第四场 2.14
2021/03/10 DOTA
js 实现无缝滚动 兼容IE和FF
2009/07/15 Javascript
调用js时ie6和ie7,ff的区别
2009/08/19 Javascript
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
JS 类型转换常见方法小结
2010/05/31 Javascript
基于jquery的横向滚动条(滑动条)
2011/02/24 Javascript
caller和callee的区别介绍及演示结果
2013/03/10 Javascript
Javascript中Event属性搜集整理
2013/09/17 Javascript
js加减乘除丢失精度问题解决方法
2014/05/16 Javascript
JQuery解析XML数据的几个简单实例
2016/05/18 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
three.js实现围绕某物体旋转
2017/01/25 Javascript
什么是Vue.js框架 为什么选择它?
2017/10/17 Javascript
基于Vue渲染与插件的加载顺序的问题详解
2018/03/05 Javascript
浅谈node中的cluster集群
2018/06/02 Javascript
微信公众号平台接口开发 获取微信服务器IP地址方法解析
2019/08/14 Javascript
layui table数据修改的回显方法
2019/09/04 Javascript
30分钟搭建Python的Flask框架并在上面编写第一个应用
2015/03/30 Python
详解Python函数作用域的LEGB顺序
2016/05/14 Python
python制作websocket服务器实例分享
2016/11/20 Python
Python字符串格式化%s%d%f详解
2018/02/02 Python
python MySQLdb使用教程详解
2018/03/20 Python
python3 map函数和filter函数详解
2019/08/26 Python
亚马逊西班牙购物网站:amazon西班牙
2017/03/06 全球购物
军训教官感言
2014/03/02 职场文书
年会搞笑主持词
2014/03/27 职场文书
承诺书格式范文
2014/06/03 职场文书
妈妈别哭观后感
2015/06/08 职场文书
高考满分作文赏析(2篇)
2019/08/12 职场文书
《文化苦旅》读后感:阅读,让人诗意地栖居在大地上
2019/12/24 职场文书
Golang之sync.Pool使用详解
2021/05/06 Golang