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


Posted in Javascript onSeptember 13, 2017

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

开场白

webGL可以让我们在canvas上实现3D效果。而three.js是一款webGL框架,由于其易用性被广泛应用。如果你要学习webGL,抛弃那些复杂的原生接口从这款框架入手是一个不错的选择。

博主目前也在学习three.js,发现相关资料非常稀少,甚至官方的api文档也非常粗糙,很多效果需要自己慢慢敲代码摸索。所以我写这个教程的目的一是自己总结,二是与大家分享。

本篇是系列教程的第一篇:入门篇。在这篇文章中,我将以一个简单的demo为例,阐述three.js的基本配置方法。学完这篇文章,你将学会如何在浏览器中绘制一个立体图形!

准备工作

在写代码之前,你首先要去下最新的three.js框架包,在你的页面里引入three.js,当然文件包里面也有不少的demo便于大家学习;

chrome是目前支持webGL最好的浏览器,Firefow居其次,国内的遨游、猎豹经测试也可以运行。

从实例开始入门!

首先我们搭建html,如下:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <style type="text/css">
 div#canvas-frame{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body>
 <!--盛放canvas的容器-->
 <div id="container"></div>
 </body>
</html>

准备和画布框大小一致的领域用于WebGL绘制。 具体来说:

(1) body 标签中添加 id 为「canvas3d」的 div 元素。

(2) style 标签中指定 「canvas3d」的CSS样式。

需要注意的是,我们并不需要写一个<canvas>标签,我们只需要定义好盛放canvas的div就可以,canvas是three.js动态生成的!

下面我们开始写脚本,我们将通过以下五步构建一个简单的立体模型,这也是three.js的基本步骤:

1.设置three.js渲染器

三维空间里的物体映射到二维平面的过程被称为三维渲染。 一般来说我们都把进行渲染操作的软件叫做渲染器。 具体来说要进行下面这些处理。

(0) 声明全局变量(对象);

(1) 获取画布「canvas-frame」的高宽;

(2) 生成渲染器对象(属性:抗锯齿效果为设置有效);

(3) 指定渲染器的高宽(和画布框大小一致);

(4) 追加 【canvas】 元素到 【canvas3d】 元素中;

(5) 设置渲染器的清除色(clearColor)。

//开启Three.js渲染器
var renderer;//声明全局变量(对象)
function initThree() {
 width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象(属性:抗锯齿效果为设置有效)
 renderer.setSize(width, height );//指定渲染器的高宽(和画布框大小一致)
 document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
}

2.设置摄像机camera

OpenGL(WebGL)中、三维空间中的物体投影到二维空间的方式中,存在透视投影和正投影两种相机。 透视投影就是、从视点开始越近的物体越大、远处的物体绘制的较小的一种方式、和日常生活中我们看物体的方式是一致的。 正投影就是不管物体和视点距离,都按照统一的大小进行绘制、在建筑和设计等领域需要从各个角度来绘制物体,因此这种投影被广泛应用。在 Three.js 也能够指定透视投影和正投影两种方式的相机。 本文按照以下的步骤设置透视投影方式。

(0) 声明全局的变量(对象);

(1) 设置透视投影的相机;

(2) 设置相机的位置坐标;

(3) 设置相机的上为「z」轴方向;

(4) 设置视野的中心坐标。 

 

  //设置相机
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴,右方向为X轴,沿着Z轴朝里(视野角:fov 纵横比:aspect 相机离视体积最近的距离:near 相机离视体积最远的距离:far)
 camera.position.x = 0;//设置相机的位置坐标
 camera.position.y = 50;//设置相机的位置坐标
 camera.position.z = 100;//设置相机的位置坐标
 camera.up.x = 0;//设置相机的上为「x」轴方向
 camera.up.y = 1;//设置相机的上为「y」轴方向
 camera.up.z = 0;//设置相机的上为「z」轴方向
 camera.lookAt( {x:0, y:0, z:0 } );//设置视野的中心坐标
 }

3.设置场景scene

场景就是一个三维空间。 用 [Scene] 类声明一个叫 [scene] 的对象。

 

//设置场景
 var scene;
 function initScene() { 
 scene = new THREE.Scene();
 }

4.设置光源light

OpenGL(WebGL)的三维空间中,存在点光源和聚光灯两种类型。 而且,作为点光源的一种特例还存在平行光源(无线远光源)。另外,作为光源的参数还可以进行 [环境光] 等设置。 作为对应, Three.js中可以设置 [点光源(Point Light)] [聚光灯(Spot Light)] [平行光源(Direction Light)],和 [环境光(Ambient Light)]。 和OpenGL一样、在一个场景中可以设置多个光源。 基本上,都是环境光和其他几种光源进行组合。 如果不设置环境光,那么光线照射不到的面会变得过于黑暗。 本文中首先按照下面的步骤设置平行光源,在这之后还会追加环境光。

(0) 声明全局变量(对象)

(1) 设置平行光源

(2) 设置光源向量

(3) 追加光源到场景

这里我们用「DirectionalLight」类声明一个叫 [light] 的对象来代表平行光源

//设置光源
 var light;
 function initLight() { 
 light = new THREE.DirectionalLight(0xff0000, 1.0, 0);//设置平行光源
 light.position.set( 200, 200, 200 );//设置光源向量
 scene.add(light);// 追加光源到场景
 }

5.设置物体object

   这里,我们声明一个球模型

 

 //设置物体
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }

最后,我们写一个主函数执行以上五步:

//执行
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }

这时,测试以上程序,你会发现浏览器窗口中出现了你绘制的球形模型:

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

总结

以上就是three.js的入门内容,我们核心的五步就是:

1.设置three.js渲染器

2.设置摄像机camera

3.设置场景scene

4.设置光源light

5.设置物体object

可能其中有些设置你还不太清楚,没关系,后面几篇文章会对以上五个主要步骤进行详细的讲解,敬请期待~~

本例完整代码:

<!DOCTYPE html>
<html>
 <head>
 <meta charset="UTF-8">
 <title>lesson1-by-shawn.xie</title>
 <!--引入Three.js-->
 <script src="Three.js"></script>
 <script type="text/javascript">
 //开启Three.js渲染器
 var renderer;//声明全局变量(对象)
 function initThree() {
 width = document.getElementById('canvas3d').clientWidth;//获取画布「canvas3d」的宽
 height = document.getElementById('canvas3d').clientHeight;//获取画布「canvas3d」的高
 renderer=new THREE.WebGLRenderer({antialias:true});//生成渲染器对象(属性:抗锯齿效果为设置有效)
 renderer.setSize(width, height );//指定渲染器的高宽(和画布框大小一致)
 document.getElementById('canvas3d').appendChild(renderer.domElement);//追加 【canvas】 元素到 【canvas3d】 元素中。
 renderer.setClearColorHex(0xFFFFFF, 1.0);//设置canvas背景色(clearColor)
 }
 //设置相机
 var camera;
 function initCamera() { 
 camera = new THREE.PerspectiveCamera( 45, width / height , 1 , 5000 );//设置透视投影的相机,默认情况下相机的上方向为Y轴,右方向为X轴,沿着Z轴朝里(视野角:fov 纵横比:aspect 相机离视体积最近的距离:near 相机离视体积最远的距离:far)
 camera.position.x = 0;//设置相机的位置坐标
 camera.position.y = 50;//设置相机的位置坐标
 camera.position.z = 100;//设置相机的位置坐标
 camera.up.x = 0;//设置相机的上为「x」轴方向
 camera.up.y = 1;//设置相机的上为「y」轴方向
 camera.up.z = 0;//设置相机的上为「z」轴方向
 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( 200, 200, 200 );//设置光源向量
 scene.add(light);// 追加光源到场景
 }
 //设置物体
 var sphere;
 function initObject(){ 
 sphere = new THREE.Mesh(
  new THREE.SphereGeometry(20,20), //width,height,depth
  new THREE.MeshLambertMaterial({color: 0xff0000}) //材质设定
 );
 scene.add(sphere);
 sphere.position.set(0,0,0);
 }
 //执行
 function threeStart() {
 initThree();
 initCamera();
 initScene(); 
 initLight();
 initObject();
 renderer.clear(); 
 renderer.render(scene, camera);
 }
 </script>
 <style type="text/css">
 div#canvas3d{
  border: none;
  cursor: move;
  width: 1400px;
  height: 600px;
  background-color: #EEEEEE;
 }
 </style>
 </head>
 <body onload='threeStart();'>
 <!--盛放canvas的容器-->
 <div id="canvas3d"></div>
 </body>
</html>

总结

以上所述是小编给大家介绍的JS库之Three.js 简易入门篇(详解之一),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
基于JavaScript实现智能右键菜单
Mar 02 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
修复jQuery tablesorter无法正确排序的bug(加千分位数字后)
Mar 30 Javascript
jQuery.ajax 跨域请求webapi设置headers的解决方案
Aug 08 Javascript
巧用Vue.js+Vuex制作专门收藏微信公众号的app
Nov 03 Javascript
AngularJS 应用身份认证的技巧总结
Nov 07 Javascript
浅谈jQuery的bind和unbind事件(绑定和解绑事件)
Mar 02 Javascript
JS鼠标滚动分页效果示例
Jul 05 Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
Vue组件简易模拟实现购物车
Dec 21 Vue.js
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 #Javascript
JS库中的Particles.js在vue上的运用案例分析
Sep 13 #Javascript
详解vue-router 路由元信息
Sep 13 #Javascript
基于Particles.js制作超炫粒子动态背景效果(仿知乎)
Sep 13 #Javascript
JS库之Particles.js中文开发手册及参数详解
Sep 13 #Javascript
Vue-Router进阶之滚动行为详解
Sep 13 #Javascript
Vue 滚动行为的具体使用方法
Sep 13 #Javascript
You might like
php session处理的定制
2009/03/16 PHP
PHP中set error handler函数用法小结
2015/11/11 PHP
线路分流自动跳转代码;希望对大家有用!
2006/12/02 Javascript
jquery获取当前点击对象的value方法
2014/02/28 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
Jquery实现遮罩层的方法
2015/06/08 Javascript
jquery实现标题字体变换的滑动门菜单效果
2015/09/07 Javascript
jQuery hover事件简单实现同时绑定2个方法
2016/06/07 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
详解AngularJS如何实现跨域请求
2016/08/22 Javascript
JS获取鼠标坐标并且根据鼠标位置不同弹出不同内容
2017/06/12 Javascript
Angularjs自定义指令实现分页插件(DEMO)
2017/09/16 Javascript
浅谈vue-router 路由传参的方法
2017/12/27 Javascript
微信小程序实现轨迹回放的示例代码
2019/12/13 Javascript
[02:20]DOTA2中文配音宣传片
2013/05/22 DOTA
[02:09]DOTA2辉夜杯 EHOME夺冠举杯现场
2015/12/28 DOTA
用Python输出一个杨辉三角的例子
2014/06/13 Python
深入探究Python中变量的拷贝和作用域问题
2015/05/05 Python
Python常用的文件及文件路径、目录操作方法汇总介绍
2015/05/21 Python
python构建自定义回调函数详解
2017/06/20 Python
Django框架教程之正则表达式URL误区详解
2018/01/28 Python
python 在右键菜单中加入复制目标文件的有效存放路径(单斜杠或者双反斜杠)
2020/04/08 Python
Python爬虫JSON及JSONPath运行原理详解
2020/06/04 Python
优衣库澳大利亚官网:UNIQLO澳大利亚
2017/01/18 全球购物
天巡全球:Skyscanner Global
2017/06/20 全球购物
英国皇家邮政海外旗舰店:Royal Mail
2018/02/21 全球购物
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
什么时候用assert
2015/05/08 面试题
预备党员转正思想汇报
2014/01/12 职场文书
大学生职业规划书的范本
2014/02/18 职场文书
中西医专业毕业生职业规划书
2014/02/24 职场文书
读书小明星事迹材料
2014/05/03 职场文书
服务标语大全
2014/06/18 职场文书
公司领导班子群众路线四风问题对照检查材料
2014/10/02 职场文书
Python实现智慧校园自动评教全新版
2021/06/18 Python