使用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 相关文章推荐
自写的jQuery异步加载数据添加事件
May 15 Javascript
js实现简单折叠、展开菜单的方法
Aug 28 Javascript
郁闷!ionic中获取ng-model绑定的值为undefined如何解决
Aug 27 Javascript
微信小程序 生命周期详解
Oct 12 Javascript
Angularjs为ng-click事件传递参数
Jun 15 Javascript
JavaScript创建对象的七种方式(推荐)
Jun 26 Javascript
JS实现页面打印(整体、局部)
Aug 18 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
详解Webpack-dev-server的proxy用法
Sep 08 Javascript
浅析webpack-bundle-analyzer在vue-cli3中的使用
Oct 23 Javascript
基于JavaScript实现年月日三级联动
Jun 22 Javascript
JS前端轻量fabric.js系列物体基类
Aug 05 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怎样调用MSSQL的存储过程
2006/10/09 PHP
PHP的FTP学习(二)
2006/10/09 PHP
php 采集书并合成txt格式的实现代码
2009/03/01 PHP
php 应用程序安全防范技术研究
2009/09/25 PHP
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
Zend Framework动作助手Json用法实例分析
2016/03/05 PHP
PHP图片水印类的封装
2017/07/06 PHP
JavaScript 学习笔记之操作符(续)
2015/01/14 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
聊一聊JavaScript作用域和作用域链
2016/05/03 Javascript
深入浅析knockout源码分析之订阅
2016/07/12 Javascript
AngularJS基础 ng-selected 指令简单示例
2016/08/03 Javascript
微信小程序 获取设备信息 API实例详解
2016/10/02 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
2017/01/11 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
使用vue2实现购物车和地址选配功能
2018/03/29 Javascript
vue 路由缓存 路由嵌套 路由守卫 监听物理返回操作
2020/08/06 Javascript
python 控制语句
2011/11/03 Python
python实现根据ip地址反向查找主机名称的方法
2015/04/29 Python
程序员写Python时的5个坏习惯,你有几条?
2018/11/26 Python
Python设计模式之备忘录模式原理与用法详解
2019/01/15 Python
Python3显示当前时间、计算时间差及时间加减法示例代码
2019/09/07 Python
用python爬取历史天气数据的方法示例
2019/12/30 Python
python时间与Unix时间戳相互转换方法详解
2020/02/13 Python
详解Python3 定义一个跨越多行的字符串的多种方法
2020/09/06 Python
python 基于PYMYSQL使用MYSQL数据库
2020/12/24 Python
使用python对excel表格处理的一些小功能
2021/01/25 Python
来自全球大都市的高级街头服饰:Pegador
2018/01/03 全球购物
CheapTickets泰国:廉价航班,查看促销价格并预订机票
2019/12/28 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
2015年检验科工作总结
2015/04/27 职场文书
中学生社会实践教育活动总结
2015/05/06 职场文书
公司酒会主持词
2015/07/02 职场文书
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
python数字图像处理实现图像的形变与缩放
2022/06/28 Python