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 CSS菜单功能 改进版
Dec 20 Javascript
JS 学习笔记 防止发生命名冲突
Jul 30 Javascript
jQuery中.live()方法的用法深入解析
Dec 30 Javascript
多种方法实现360浏览器下禁止自动填写用户名密码
Jun 16 Javascript
JavaScript实现级联菜单的方法
Jun 29 Javascript
值得分享和收藏的Bootstrap学习教程
May 12 Javascript
js判断请求的url是否可访问,支持跨域判断的实现方法
Sep 17 Javascript
AngularJS中指令的四种基本形式实例分析
Nov 22 Javascript
Vue概念及常见命令介绍(1)
Dec 08 Javascript
基于jQuery实现滚动刷新效果
Jan 09 Javascript
纯JS单页面赛车游戏制作代码分享
Mar 03 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
Dec 25 jQuery
详解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无限极分类递归排序实现方法
2014/11/11 PHP
php在线解压ZIP文件的方法
2014/12/30 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
thinkPHP模板中函数的使用方法示例
2016/11/30 PHP
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
Js判断参数(String,Array,Object)是否为undefined或者值为空
2013/11/04 Javascript
js动态添加删除,后台取数据(示例代码)
2013/11/25 Javascript
JavaScript中的splice()方法使用详解
2015/06/09 Javascript
JavaScript中的parse()方法使用简介
2015/06/12 Javascript
jquery插件ajaxupload实现文件上传操作
2015/12/09 Javascript
JavaScript中关于for循环删除数组元素内容时出现的问题
2016/11/21 Javascript
Angular7.2.7路由使用初体验
2019/03/01 Javascript
Nodejs让异步变成同步的方法
2019/03/02 NodeJs
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
JavaScript如何操作css
2020/10/24 Javascript
Python实现简单截取中文字符串的方法
2015/06/15 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
PyQt5实现QLineEdit添加clicked信号的方法
2019/06/25 Python
python常用库之NumPy和sklearn入门
2019/07/11 Python
python base64库给用户名或密码加密的流程
2020/01/02 Python
Python基于内置函数type创建新类型
2020/10/22 Python
手把手教你配置JupyterLab 环境的实现
2021/02/02 Python
python gui开发——制作抖音无水印视频下载工具(附源码)
2021/02/07 Python
Python用requests库爬取返回为空的解决办法
2021/02/21 Python
HTML5的download属性详细介绍和使用实例
2014/04/23 HTML / CSS
html2canvas生成的图片偏移不完整的解决方法
2020/05/19 HTML / CSS
法国太阳镜店:Sunglasses Shop
2016/08/27 全球购物
计算机软件个人的自荐信范文
2013/12/01 职场文书
《李广射虎》教学反思
2014/04/27 职场文书
学前班评语大全
2014/05/04 职场文书
贵阳市党的群众路线教育实践活动党(工)委领导班子整改方案
2014/10/26 职场文书
2015年村级财务管理制度
2015/08/04 职场文书
致创业您:正能量激励人心句子(48条)
2019/08/15 职场文书
辞职报告(范文三篇)
2019/08/27 职场文书
go 实现简易端口扫描的示例
2021/05/22 Golang
详解JavaScript中Arguments对象用途
2021/08/30 Javascript