使用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 相关文章推荐
ECMAScript 基础知识
Jun 29 Javascript
JavaScript 对象的属性和方法4种不同的类型
Mar 19 Javascript
IE、FF浏览器下修改标签透明度
Jan 28 Javascript
基于Vue.js的表格分页组件
May 22 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
jQuery表单验证简单示例
Oct 17 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
详解JS中的attribute属性
Apr 25 Javascript
Angular4实现鼠标悬停3d倾斜效果
Oct 25 Javascript
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
Nov 08 Javascript
简单谈谈javascript高级特性
Sep 04 Javascript
Nuxt pages下不同的页面对应layout下的页面布局操作
Nov 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
中国站长站 For Dede4.0 采集规则
2007/05/27 PHP
需要使用php模板的朋友必看的很多个顶级PHP模板引擎比较分析
2008/05/26 PHP
php用正则表达式匹配中文实例详解
2013/11/06 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
PHP7内核之Reference详解
2019/03/14 PHP
复制js对象方法(详解)
2013/07/08 Javascript
jQuery中focus事件用法实例
2014/12/26 Javascript
jQuery实现设置、移除文本框默认值功能
2015/01/13 Javascript
jQuery实现折叠、展开的菜单组效果代码
2015/09/16 Javascript
浅谈javascript中的加减时间
2016/07/12 Javascript
JS中showModalDialog关闭子窗口刷新主窗口用法详解
2017/03/25 Javascript
VUE多层路由嵌套实现代码
2017/05/15 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
详解Vue.js中.native修饰符
2018/04/24 Javascript
基于node搭建服务器,写接口,调接口,跨域的实例
2018/05/13 Javascript
Nodejs核心模块之net和http的使用详解
2019/04/02 NodeJs
原生js通过一行代码实现简易轮播图
2019/06/05 Javascript
[56:38]DOTA2-DPC中国联赛正赛Aster vs Magma BO3 第一场 3月5日
2021/03/11 DOTA
python笔记(2)
2012/10/24 Python
python33 urllib2使用方法细节讲解
2013/12/03 Python
Python实现的下载8000首儿歌的代码分享
2014/11/21 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
linux平台使用Python制作BT种子并获取BT种子信息的方法
2017/01/20 Python
Python实现通过解析域名获取ip地址的方法分析
2019/05/17 Python
Python CVXOPT模块安装及使用解析
2019/08/01 Python
Python异常原理及异常捕捉实现过程解析
2020/03/25 Python
matplotlib图例legend语法及设置的方法
2020/07/28 Python
有关HTML5页面在iPhoneX适配问题
2017/11/13 HTML / CSS
后勤副校长自我鉴定
2013/10/13 职场文书
汽车技术服务与营销专业推荐信
2013/11/29 职场文书
大学生毕业的自我评价分享
2014/01/02 职场文书
一年级评语大全
2014/04/23 职场文书
开发房地产协议书
2014/09/14 职场文书
大学同学聚会感言
2015/07/30 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
nginx 添加http_stub_status_module模块
2022/05/25 Servers