使用three.js 画渐变的直线

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带来些帮助

赞 (0)

相关推荐

  • THREE.JS入门教程(1)THREE.JS使用前了解

    Three.js是一个伟大的开源WebGL库,WebGL允许JavaScript操作GPU,在浏览器端实现真正意义的3D.但是目前这项技术还处在发展阶段,资料极为匮乏,爱好者学习基本要通过Demo源码和Three.js本身的源码来学习. 国外网站 aerotwist.com 有六篇较为简单的入门教程,我尝试着将其翻译过来,与大家分享. 我在一些实验项目中使用了Three.js,我发现它对快速上手浏览器3D编程确实很有帮助.通过Three.js,你不仅可以创建相机.物体.光线.材质等等,还可以选择

  • Three.js快速入门教程

    Three.js快速入门教程

    引言 本文主要是讲解Three.js的相关概念,帮助读者对Three.js以及相关知识形成比较完整的理解. 近年来web得到了快速的发展.随着HTML5的普及,网页的表现能力越来越强大.网页上已经可以做出很多复杂的动画,精美的效果. 但是,人总是贪的.那么,在此之上还能做什么呢?其中一种就是通过WebGL在网页中绘制高性能的3D图形. OpenGL,WebGL到Three.js OpenGL大概许多人都有所耳闻,它是最常用的跨平台图形库. WebGL是基于OpenGL设计的面向web的图形标准,

  • three.js快速入门【推荐】

    Three.js的核心五步就是: 1.设置three.js渲染器 2.设置摄像机camera 3.设置场景scene 4.设置光源light 5.设置物体object 1.设置three.js渲染器 三维空间里的物体映射到二维平面的过程被称为三维渲染. 一般来说我们都把进行渲染操作的软件叫做渲染器. 具体来说要进行下面这些处理. var renderer; function initThree(){ width = document.getElementById("box").clie

  • JS库之Three.js 简易入门教程(详解之一)

    JS库之Three.js 简易入门教程(详解之一)

    开场白 webGL可以让我们在canvas上实现3D效果.而three.js是一款webGL框架,由于其易用性被广泛应用.如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择. 博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索.所以我写这个教程的目的一是自己总结,二是与大家分享. 本篇是系列教程的第一篇:入门篇.在这篇文章中,我将以一个简单的demo为例,阐述three.js的基本配置方法.学完这篇文章

  • Three.js入门之hello world以及如何绘制线

    Three.js入门之hello world以及如何绘制线

    前言 本文属于学习Three.js 的入门教程,文中通过示例介绍了hello world和线的实现,下面话不多说了,来一起看看详细的介绍吧. hello world 首先使用我们先用three.js创建一个立方体的hello world类型的案例. <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content=

  • 使用three.js 画渐变的直线

    Three.js 是一款运行在浏览器中的 3D 引擎,你可以用它创建各种三维场景,包括了摄影机.光影.材质等各种对象.你可以在它的主页上看到许多精彩的演示.不过,这款引擎目前还处在比较不成熟的开发阶段,其不够丰富的 API 以及匮乏的文档增加了初学者的学习难度(尤其是文档的匮乏)three.js的代码托管在github上面. http://github.com/mrdoob/three.js/ 我们来看实例吧 <!DOCTYPE html> <html> <head>

  • jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

    jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果

    本文实例讲述了jquery插件tytabs.jquery.min.js实现渐变TAB选项卡效果.分享给大家供大家参考.具体如下: 这款网页特效主要是tytabs.jquery.min.js插件的实例演示,一个带有漂亮渐变效果的TAB选项卡,演示了一个网页上设置两个选项卡,都是带有淡入淡出的渐变效果,为了演示效果,里面我随便弄了些文字,用时候自己删除吧. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-tytabs-tab-cha-m

  • Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法

    Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法

    本文实例讲述了Python实现在matplotlib中两个坐标轴之间画一条直线光标的方法.分享给大家供大家参考.具体如下: 看看下面的例子和效果吧 # -*- coding: utf-8 -*- from matplotlib.widgets import MultiCursor from pylab import figure, show, np t = np.arange(0.0, 2.0, 0.01) s1 = np.sin(2*np.pi*t) s2 = np.sin(4*np.pi*t

  • java实现画图板上画一条直线

    目标:在画图板上画一条直线,供大家参考,具体内容如下 一.首先需要建立一个界面 过程:1.创建界面对象(Java语言中已经有,可直接创建对象来使用). 2.对于一个界面,我们需要设置它的大小.居中.界面关闭.界面可见. 3.写主方法去实现界面. (目前界面还未实现画图板的功能) public class DrawUI { //显示界面的方法 public void show(){ //创建界面对象 JFrame jframe = new JFrame(); //设置界面的尺寸.位置居中.关闭.标

  • Android使用自定义view在指定时间内匀速画一条直线的实例代码

    Android使用自定义view在指定时间内匀速画一条直线的实例代码

    本文讲述了Android使用自定义view在指定时间内匀速画一条直线的实例代码.分享给大家供大家参考,具体如下: 1.效果图: 2.自定义view实现 public class UniformLine extends View { private int x, y, nextX, nextY, incrementY, incrementX; public UniformLine(Context context) { super(context); } public UniformLine(Con

  • js绘制一条直线并旋转45度

    本文实例为大家分享了js绘制一条直线并旋转45度的具体代码,供大家参考,具体内容如下 绘制一条直线,并旋转45度 html 页面 <canvas id="canvas" width="300" height="300" style="background-color: orange;"></canvas> js页面 <script> var canvas = document.getElem

  • JS画线(实例代码)

    IE下画线 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:v="urn:schemas-microsoft-com:vml&quo

  • SOSO地图JS画出标注和中心点以html形式运行

    直接贴出代码,这个可以在本地创建一个html文件直接运行: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Map</title> <script charset="utf-8" s

  • 利用three.js画一个3D立体的正方体示例代码

    利用three.js画一个3D立体的正方体示例代码

    简介 three.js 是一款WebGL框架,WebGL可以让我们在canvas上实现3D效果.实现3D效果在国内来说还算是比较新的东西,可供查阅的资料也不多.这篇文章仅是一个入门篇,介绍如何绘制一个3D正方体. Three.js中的基本概念 Three.js包含3个基本概念:场景(Scene).相机(Camera)和渲染器(Renderer). 场景就是需要绘制的对象,相机代表取景的视角,渲染器是绘制的载体(可以挂靠到浏览器的DOM元素中), 也就是我们通过相机拍摄场景然后绘制到目标介质中去.

  • 利用ECharts.js画K线图的方法示例

    利用ECharts.js画K线图的方法示例

    前言 最近有一个统计的项目要做,在前端的数据需要用图表的形式展示.网上搜索了一下,发现有几种统计图库. MSChart 这个是Visual Studio里的自带控件,使用比较简单,不过数据这块需要在后台绑定. ichartjs 是一款基于HTML5的图形库.使用纯javascript语言, 利用HTML5的canvas标签绘制各式图形. 支持饼图.环形图.折线图.面积图.柱形图.条形图等. Chart.js 也是一款基于HTML5的图形库和ichartjs整体类似.不过Chart.js的教程文档

随机推荐