课程表

three.js课程

工具箱
速查手册

Three 光源和外部光

当前位置：免费教程 » JS/JS库/框架 » three.js

假设你将要画一个圆或者画一条线，而不是一个线框模型，或者说不是一个Mesh（网格）。 第一步我们要做的，是设置好renderer（渲染器）、scene（场景）和camera（相机）-（如果对这里所提到的东西，还不了解，请阅读本手册第一章“Hello World”。

本课程风格和大多数课程风格不同，注意一定要结合案例代码学习，在案例代码的基础上调试体验总结，就像做化学实验一样，不要仅仅阅读文字。

案例源码

这个Three.js案例除了第一节提到的知识外，还引入了一个光源和外部光的概念，麻雀虽小，五脏俱全，这里整体展示了Three.js的整套渲染系统。

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <title>第一个three.js文件_WebGL三维场景</title>
  7.   <style>
  8.     body {
  9.       margin: 0;
  10.       overflow: hidden;
  11.       /* 隐藏body窗口区域滚动条 */
  12.     }
  13.   </style>
  14.   <!--引入three.js三维引擎-->
  15.   <script src="https://cdn.bootcdn.net/ajax/libs/three.js/r128/three.js"></script>
  16.  
  17. </head>
  18.  
  19. <body>
  20.   <script>
  21.     /**
  22.      * 创建场景对象Scene
  23.      */
  24.     var scene = new THREE.Scene();
  25.     /**
  26.      * 创建网格模型
  27.      */
  28.     // var geometry = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
  29.     var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
  30.     var material = new THREE.MeshLambertMaterial({
  31.       color: 0x0000ff
  32.     }); //材质对象Material
  33.     var mesh = new THREE.Mesh(geometry, material); //网格模型对象Mesh
  34.     scene.add(mesh); //网格模型添加到场景中
  35.     /**
  36.      * 光源设置
  37.      */
  38.     //点光源
  39.     var point = new THREE.PointLight(0xffffff);
  40.     point.position.set(400, 200, 300); //点光源位置
  41.     scene.add(point); //点光源添加到场景中
  42.     //环境光
  43.     var ambient = new THREE.AmbientLight(0x444444);
  44.     scene.add(ambient);
  45.     /**
  46.      * 相机设置
  47.      */
  48.     var width = window.innerWidth; //窗口宽度
  49.     var height = window.innerHeight; //窗口高度
  50.     var k = width / height; //窗口宽高比
  51.     var s = 200; //三维场景显示范围控制系数，系数越大，显示的范围越大
  52.     //创建相机对象
  53.     var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
  54.     camera.position.set(200, 300, 200); //设置相机位置
  55.     camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
  56.     /**
  57.      * 创建渲染器对象
  58.      */
  59.     var renderer = new THREE.WebGLRenderer();
  60.     renderer.setSize(width, height);//设置渲染区域尺寸
  61.     renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
  62.     document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
  63.     //执行渲染操作   指定场景、相机作为参数
  64.     renderer.render(scene, camera);
  65.   </script>
  66. </body>
  67. </html>

在线运行实例

几何体Geometry

  1. //创建一个立方体几何对象Geometry
  2. var geometry = new THREE.BoxGeometry(100, 100, 100);

代码var box=new THREE.BoxGeometry(100,100,100);通过构造函数THREE.BoxGeometry()创建了一个长宽高都是100的立方体，通过构造函数名字BoxGeometry也能猜出这个构造函数的意义，利用new关键字操作构造函数可以创建一个对象， 这都是Javascript语言的基本知识，至于THREE.BoxGeometry()构造函数具体是什么可以不用关心， 就像你使用前端使用JQuery库一样查找官方文档就可以，你可以把代码THREE.BoxGeometry(100,100,100)中的第一个参数更改为为50，刷新浏览器查看数据更改后长方体的效果图，可以看到已经不是长宽高一样的立方体， 而是普通的长方体。

你也可以用下面一段代码代替上面的长方体代码，你会发现会渲染出来一个球体效果。

  1. //创建一个球体几何对象
  2. var geometry = new THREE.SphereGeometry(60, 40, 40);

材质Material

代码var material=new THREE.MeshLambertMaterial({color:0x0000ff});通过构造函数THREE.MeshLambertMaterial()创建了一个可以用于立方体的材质对象， 构造函数的参数是一个对象，对象包含了颜色、透明度等属性，本案例中只定义了颜色color，颜色属性值0x0000ff表示蓝色，可以把颜色值改为0x00ff00，可以看到是绿色的立方体效果， 这里使用的颜色值表示方法是16进制RGB三原色模型。使用过渲染类软件、设计过网页或者学习过图形学应该能知道RGB三原色模型，这里就不再详述。

光源Light

代码var point=new THREE.PointLight(0xffffff);通过构造函数THREE.PointLight()创建了一个点光源对象，参数0xffffff定义的是光照强度， 你可以尝试把参数更改为为0x444444，刷新浏览器你会看到立方体的表面颜色变暗，这很好理解，实际生活中灯光强度变低了，周围的景物自然暗淡，three.js引擎对WebGL光照模型算法都进行了封装，不需要你了解计算机图形学， 可以直接使用调用three.js光源相关API直接创建一个光源对象，就像你使用普通的三维建模渲染软件一样，只是这里多了一个Javascript编程语言而已。

相机Camera

代码var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);通过构造函数THREE.OrthographicCamera()创建了一个正射投影相机对象， 什么是“正射投影”，什么是“相机对象”，每个人的基础不一样，或许你不太理解，或许你非常理解，如果不清楚还是那句话，刚一开始不用深究，改个参数测试一下看看视觉效果你就会有一定的感性认识。 比如把该构造函数参数中用到的参数s，也就是代码var s = 200;中定义的一个系数，可以把200更改为300,你会发现立方体显示效果变小，这很好理解，相机构造函数的的前四个参数定义的是拍照窗口大小，就像平时拍照一样，取景范围为大，被拍的人相对背景自然变小了。camera.position.set(200, 300, 200);和camera.lookAt(scene.position);定义的是相机的位置和拍照方向，可以更改camera.position.set(200,300,200);参数重新定义的相机位置，把第一个参数也就是x坐标从200更改为250，你会发现立方的在屏幕上呈现的角度变了，这就像你生活中拍照人是同一个人，但是你拍照的位置角度不同，显示的效果肯定不同。这些具体的参数细节可以不用管， 至少你知道相机可以缩放显示三维场景、对三维场景的不同角度进行取景显示。

整个程序的结构

1.jpg

场景——相机——渲染器

从实际生活中拍照角度或是使用三维渲染软件角度理解本节课的案例代码，立方体网格模型和光照组成了一个虚拟的三维场景,相机对象就像你生活中使用的相机一样可以拍照，只不过一个是拍摄真实的景物，一个是拍摄虚拟的景物，拍摄一个物体的时候相机的位置和角度需要设置，虚拟的相机还需要设置投影方式，当你创建好一个三维场景，相机也设置好，就差一个动作“咔”，通过渲染器就可以执行拍照动作。

2.png

对象、方法和属性

从面向对象编程的角度理解上面的程序，使用three.js和使用其它传统前端Javascript库或框架一样，通过框架提供的构造函数可以创建对象，对象拥有方法和属性，只不过three.js是一款3D引擎， 如果你对HTML、Javascript语言、三维建模渲染软件都能够理解应用，即使你不懂计算机图形学和WebGL，也能够学习three.js引擎,创建可以在线预览的三维场景。

案例源码分别使用构造函数THREE.Scene()、THREE.OrthographicCamera()、THREE.WebGLRenderer()创建了场景、相机、渲染器三个最顶层的总对象，然后通过总对象的子对象、方法和属性进行设置， 相机对象和渲染对象相对简单，最复杂的是场景对象，new THREE.Mesh(box,material);使用构造函数Mesh()创建了一个网格模型对象，该对象把上面两行含有顶点位置信息的几何体对象和含有颜色信息的材质对象作为参数，网格模型创建好之后， 需要使用场景对象的方法.add()把三维场景的子对象添加到场景中，new THREE.PointLight(0xffffff);、new THREE.AmbientLight(0x444444);定义了两个点光源、环境光对象，然后作为场景的子对象插入场景中。 场景、相机、渲染器设置完成后，设置代码renderer.render(scene,camera)把场景、相机对象作为渲染器对象方法render()的参数，这句代码的意义相当于告诉浏览器根据相机的放置方式拍摄已经创建好的三维场景对象。

3.png

WebGL封装

如果你有WebGL基础，可以通过下面介绍了解Three.js对WebGL的封装，如果不了解WebGL或计算机图形学，随便阅读一下或者直接跳过。

从WebGL的角度来看，three.js提供的构造函数基本是对原生WebGL的封装，如果你有了WebGL的基础，在学习three.js的很多对象、方法和属性是很容易理解的。在three.js入门教程中不会去过多讲解WebGL的基础知识， 但是为了大家更好的理解three.js的很多命令，与three.js相关的WebGL API知识、GPU渲染管线的知识。图形学可能很多人会觉得比较难，其实主要是算法部分，大家先可以学习一些基本的WebGL知识，初学的时候尽量不关注算法，主要了解顶点数据处理的过程，GPU渲染管线的基本功能单元。实际的工作中如果不是开发3D引擎可能不会使用原生WebGL API，但是学习了这些之后，对于three.js的深度开发学习很有好处，如果你了解你WebGL知识，可以联系绘制函数drawArrays()来理解渲染器的渲染操作方法render()。

4.png

threejs光源

为了更好的渲染场景，threejs提供了生活中常见的一些光源的API。

你可以测试前面几节课案例中的光源代码，比如全部删除所有的光源代码，你会发现场景中的物体是黑色的，就像生活中一样没有光，物体是黑色的。

常见光源类型

本节课不会对threejs各类光源进行深入介绍，主要是简单展示下，对于初学者有一个印象就可以。

光源类型简介
AmbientLight环境光
PointLight点光源
DirectionalLight平行光，比如太阳光
SpotLight聚光源

环境光创建语法：

  1. //环境光    环境光颜色与网格模型的颜色进行RGB进行乘法运算
  2. var ambient = new THREE.AmbientLight(0x444444);
  3. scene.add(ambient);

立体效果

仅仅使用环境光的情况下，你会发现整个立方体没有任何棱角感，这是因为环境光只是设置整个空间的明暗效果。如果需要立方体渲染要想有立体效果，需要使用具有方向性的点光源、平行光源等。

点光源创建：

  1. //点光源
  2. var point = new THREE.PointLight(0xffffff);
  3. point.position.set(400, 200, 300); //点光源位置
  4. // 通过add方法插入场景中，不插入的话，渲染的时候不会获取光源的信息进行光照计算
  5. scene.add(point); //点光源添加到场景中

光源通过add方法插入场景中，不插入的话，渲染的时候不会获取光源的信息进行光照计算。

这两种光源的创建方法，在之前的例子中，我们已经使用过了。

光源光照强度

通过光源构造函数的参数可以设置光源的颜色，一般设置明暗程度不同的白光RGB三个分量值是一样的。如果把THREE.AmbientLight(0x444444);的光照参数0x444444改为0xffffff,你会发现场景中的立方体渲染效果更明亮。

光源位置

设置光源位置：

  1. //点光源
  2. var point = new THREE.PointLight(0xffffff);
  3. point.position.set(400, 200, 300); //点光源位置
  4. scene.add(point); //点光源添加到场景中

你可以把点光源的位置设置为(0,0,0)，然后不使用其它任何光源，这时候你会发现场景中立方体渲染效果是黑色。其实原因很简单，立方体是有大小占，用一定空间的，如果光源位于立方体里面，而不是外部，自然无法照射到立方体外表面。

  1. point.position.set(0, 0, 0);

如果只设置一个点光源的情况下，你通过鼠标旋转操作整个三维场景，你会发现立方体点光源无法照射的地方相对其他位置会比较暗，你可以通过下面的代码在新的位置插入一个新的光源对象。点光源设置的位置是(-400, -200, -300)，相当于把立方体夹在两个点光源之间。

  1. // 点光源2  位置和point关于原点对称
  2. var point2 = new THREE.PointLight(0xffffff);
  3. point2.position.set(-400, -200, -300); //点光源位置
  4. scene.add(point2); //点光源添加到场景中


转载本站内容时，请务必注明来自W3xue，违者必究。
 友情链接：直通硅谷 　点职佳 　北美留学生论坛

本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
皖ICP备17017327号-2　皖公网安备34020702000426号