1.webGL

　　一种网络标准，定义了一些较底层的图形接口。

2.Three.js

　　一个3Djs库，webGL开源框架中比较优秀的一个。除了webGL以外，Three.js还提供了基于Canvas、SVG标签的渲染器。

　　这是一个开源项目。

3.环境

　　找一个喜欢的jsIDE。调试建议使用Chrome或者Firefox。

4.下载

　　传送门

5.使用

  1. <head>
  2.  
  3.     <script type="text/javascript" src="js/three.js"></script>
  4.  
  5. </head>

　　webGL的渲染需要canvas，Three.js可以生成，也可以自定义canvas：

  1. <body onload="init()">
  2.  
  3.     <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
  4.  
  5. </body>

在js中定义一个init函数，在HTML加载后执行：

  1. function init(){
  2.  
  3. 　　// ...
  4.  
  5. }

　　Three.js程序要包括三大组建：

　　场景（Scene）、相机（Camera）、渲染器（Renderer），以及你创建的物体。

6.渲染器（Renderer）

　　渲染器将和Canvas元素进行绑定，接着上面的：

  1. var renderer = new THREE.WebGLRenderer({
  2.  
  3.     canvas: document.getElementById(‘mainCanvas’)
  4.  
  5. });

　　如果想要Three.js生成Canvas元素，在HTML中就不需要定义canvas，在js中可以这样写：

  1. var renderer = new THREE.WebGLRenderer();
  2.  
  3. renderer.setSize(400,300);
  4.  
  5. document.getElementsByTagName(‘body’)[0].appendChild(renderer.domElement);

　　第二行设置了Canvas的宽高。第三行将渲染器对应的Canvas元素添加到<body>中。

　　下面这句可以设置背景为黑色：

  1. renderer.setClearColor(0x000000);

7.场景（Scene）

　　在Three.js中添加的物体都是添加到场景中的。在程序最开始的时候进行实例化，然后将物体添加到场景中即可。

  1. var scene = new THREE.Scene();

8.照相机（Camera）

　　webGL和Three.js使用的坐标系是右手坐标系：

　　相机分正投影相机和透视投影相机。这里先定义一直透视投影的照相机，：

  1. var camera = new THREE.PerspectiveCamera(45,4/3,1,1000);
  2.  
  3. //四个参数分别对应：视角、近处的裁面的距离、远处的裁面的距离、实际窗口的纵横比（后面会详细讨论）
  4.  
  5. camera.position.set(0,0,5);//设置相机位置
  6.  
  7. scene.add(camera);//添加到场景中。

9.长方体

　　创建一个x,y,z方向长度分别为1、2、3的红色长方体：

  1. var cube = new THREE.Mesh(new THREE.CubeGeometry(1,2,3),
  2.  
  3. 　　new THREE.MeshBasicMaterial({
  4. 　
  5. 　　　　color: 0xff0000
  6.  
  7. 　　})
  8.  
  9. );
  10.  
  11. scene.add(cube);

　　其中，THREE.Mesh表示网格模型；THREE.CubeGeometry表示立方体盒子；MeshBasicMaterial是一种材质：对光照无感，给几何体一种简单的颜色或显示线框。最后添加到场景中。

10.渲染

　　在定义了场景中的物体，设置好的照相机之后，渲染器就知道如何渲染出二维的结果了。调用渲染器的渲染函数，就能使其渲染一次了。

  1. renderer.render(scene, camera);

11.示例

  1. <!DOCTYPE html>
  2.  
  3. <html>
  4.  
  5. <head>
  6.  
  7. <meta charset="UTF-8">
  8.  
  9. <title>3.js测试一</title>
  10.  
  11. </head>
  12.  
  13. <body onload="init()">
  14.  
  15. <canvas id="mainCanvas" width="400px" height="300px" ></canvas>
  16.  
  17. <script type="text/javascript" src="js/three.min.js"></script><!--路径改成你的-->
  18.  
  19.         <script type="text/javascript">
  20.  
  21.             function init() {
  22.  
  23.                 // renderer 渲染器
  24.  
  25.                 var renderer = new THREE.WebGLRenderer({
  26.  
  27.                     canvas: document.getElementById('mainCanvas')　　//绑定canvas
  28.  
  29.                 });
  30.  
  31.                 renderer.setClearColor(0x000000); // black 
  32.  
  33.                 // scene 场景
  34.  
  35.                 var scene = new THREE.Scene();　　//实例化场景
  36.  
  37.                 // camera 照相机
  38.  
  39.                 var camera = new THREE.PerspectiveCamera(45, 4 / 3, 1, 1000);　　//透视投影相机参数设置
  40.  
  41.                 camera.position.set(0, 0, 5);　　//相机位置设置
  42.  
  43.                 scene.add(camera);　　//添加到场景
  44.  
  45.                 // a cube in the scene 创建的物体
  46.  
  47.                 var cube = new THREE.Mesh(new THREE.CubeGeometry(1, 2, 3),　　//创建网格，参数一：几何体（立方体）
  48.  
  49.                         new THREE.MeshBasicMaterial({　　//参数二：材质（网格基础材质）
  50.                             color: 0xff0000　　//设置颜色
  51.  
  52.                         })
  53.  
  54.                 );
  55.  
  56.                 scene.add(cube);　　//添加到场景
  57.  
  58.                 // render 渲染
  59.  
  60.                 renderer.render(scene, camera);
  61.  
  62.             }
  63.  
  64.         </script>
  65.  
  66. </body>
  67.  
  68. </html>

　　渲染的效果是：

　　下一篇： Three.js基础探寻二

　　整理自张雯莉《Three.js入门指南》

　　其他参考：WebGL中文网

Three.js基础探寻一的更多相关文章

  1. Three.js基础探寻二——正交投影照相机

    本篇主要介绍照相机中的正交投影照相机. 第一篇传送门:Three.js基础探寻一 1.照相机 图形学中的照相机定义了三维空间到二维屏幕的投影方式. 针对投影方式照相机分为正交投影照相机和透视投影照相机 ...

  2. Three.js基础探寻九——网格

    在学习了几何形状和材质之后,我们就能使用他们来创建物体了.最常用的一种物体就是网格(Mesh),网格是由顶点.边.面等组成的物体:其他物体包括线段(Line).骨骼(Bone).粒子系统(Partic ...

  3. Three.js基础探寻十——动画

    本篇将介绍如果使用Three.js进行动态画面的渲染.此外,将会介绍一个Three.js作者写的另外一个库stat.js,用来观测每秒帧数(FPS). 1.实现动画效果 1.1 动画原理 对于Thre ...

  4. Three.js基础探寻四——立方体、平面与球体

    前面简单介绍了webGL和Three.js的背景以及照相机的设定,接下来介绍一些Three.js中的几何形状. 1.立方体 虽然这一形状的名字叫立方体(CubeGeometry),但它其实是长方体,也 ...

  5. Three.js基础探寻三——透视投影照相机

    本篇主要介绍Three.js照相机中的透视投影照相机. 上一篇:正交投影照相机 5.透视投影照相机构造函数 透视投影照相机(Perspective Camera)的构造函数是: THREE.Persp ...

  6. Three.js基础探寻五——正二十面体、圆环面等

    除了立方体.平面.球体,Three.js还提供了很多其他几何形状. 1.圆形 CircleGeometry可以创建圆形或者扇形: THREE.CircleGeometry(radius, segmen ...

  7. Three.js基础探寻八——法向材质与材质的纹理贴图

    4.法向材质 法向材质可以将材质的颜色设置为其法向量的方向,有时候对于调试很有帮助. 法向材质的设定很简单,甚至不用设置任何参数: new THREE.MeshNormalMaterial() 材质的 ...

  8. Three.js基础探寻七——Lamber材质与Phong材质

    材质(Material)是独立于物体顶点信息之外的与渲染效果相关的属性.通过设置材质可以改变物体的颜色.纹理贴图.光照模式等. 本篇将介绍基本材质以及两种基于光照模型的材质(Lamber与Phong) ...

  9. Three.js基础探寻六——文字形状与自定义形状

    1.文字形状 说起3d文字想起了早年word里的一些艺术字: 时间真快. 那么TextGeometry可以用来创建三维的文字形状. 使用文字形状需要下载和引用额外的字体库.这里,我们以 helveti ...

随机推荐

  1. Android 设置Activity样式 透明度

    一.设置Activity透明度有几种方法:1>.在清单文件中配置Activity时声明android:theme="@android:style/Theme.Translucent&q ...

  2. yum 安装Mysql

    RHEL6.5-MySql-yum安装登录 客户端工具的使用mysql:Linux下提供了一个访问mysql服务器的客户端工具—mysql,其由mysql软件包提供,除了这些工具之外还有一些图形化界面 ...

  3. Mysql插入、替换和无视

    在现实的生产环境下,通常我们都会遇到这样的应用场景,需要我们更新数据.替换数据,若存在则不操作. insert into表示插入数据,数据库会检查主键,如果出现重复会报错: replace into表 ...

  4. HTML5小游戏-简单抽奖小游戏

    换了新工作以后,专注前端开发,平常空闲时间也比较多,可以多钻研一下技术,写一下博客.最近在学习canvas,参考网上的slotmachine插件,用canvas实现了一个简单抽奖小游戏.       ...

  5. Spring Cloud(四) --- config

    Spring Cloud Config 随着线上项目变的日益庞大,每个项目都散落着各种配置文件,如果采用分布式的开发模式,需要的配置文件随着服务增加而不断增多.某一个基础服务信息变更,都会引起一系列的 ...

  6. Java -- JDBC 学习--数据库连接池

    JDBC数据库连接池的必要性 在使用开发基于数据库的web程序时,传统的模式基本是按以下步骤: 在主程序(如servlet.beans)中建立数据库连接. 进行sql操作 断开数据库连接. 这种模式开 ...

  7. 平台加载面板的方法$.loadPml

    $.loadPml({ paneId:"", paneName:"", loadUrl:"/"+globalURL+"/mvcco ...

  8. My thoughts after NOIP 2018（2）

    又一次陷入迷茫了呢. - 大概是因为是因为自招政策要改变了吧? - 大概是因为前路在一点一点变得难走吧? - 大概是因为OI和学习实在太难平衡了吧? 未来的一切都已经不再在我控制的范围之内,不迷茫才怪 ...

  9. ADO.NET连接字符串大全

    说明ADO.NET连接字符串:SQL Server,SQL Server 2005,ACCESS,Oracle,MySQL,Interbase,IBM DB2,Sybase,Informix,Ingr ...

  10. python 数据类型 datatype

    python  数据类型 datatype 列表list 元组tuple 集合set 字典dictionary 字符串string 一.列表list list :python的一种数据类型.是可变的, ...