这是three.js学习的第19篇学习笔记。在three.js基础学习之类人造光源中我们学习了三种人造光源,分别是点光源PointLight,聚光灯SpotLight和平面光源RectAreaLight。今天学习three.js的渲染引擎WebGLRenderer
。
three.js基础学习之类人造光源
这是three.js学习的第18篇笔记,在three.js基础学习之环境光源AmbientLight和three.js基础学习之平行光源DirectionalLight中,我们已经学习了两种模拟自然界本来就存在的光源,今天我们学习模仿人造光源的光源。其中的点光源PointLight
模仿的是灯泡发光,聚光灯SpotLight
模仿的是聚光灯,平面光源RectAreaLight
模仿的是从窗户漏出去的光。
three.js基础学习之环境光源AmbientLight
这是three.js学习的第17篇笔记,在本篇中,我们将学习three.js中的环境光AmbientLight。环境光会均匀的照亮所有的物体,而不会出现阴影。就像太阳被遮住了一样。环境光的使用非常简单,只需要实例化然后加入scene中即可。
three.js基础学习之平行光源DirectionalLight
在three.js基础学习之光源的学习中,我们已经学习和知道了如何在three.js中通过构造函数创建光源,并且设置光的颜色和强度。但是,我们在案例中并没有直接使用THREE.Light
进行构造,而是使用THREE.DirectionalLight
。这是因为Light
只是three.js中众多光源中的基类,并不能直接构造光源,构造光源还是需要具体的光源构造函数,比如我们用到的DirectionalLight
。那么,现在就开始学习探索DirectionalLight
,了解它的用法和使用场景。
three.js基础学习的基础代码
思来想去,我还是决定把基础代码放到一个地方,供大家参考,每次说复制上一节的代码,感觉比较麻烦。
three.js学习之纹理贴图Texture(二)纹理背景的位置移动旋转和重复
three.js学习之纹理贴图Texture中,我们初步了解了three.js中纹理基础知识,包括怎么使用TextureLoader
加载一张或者多张纹理图片,如何使用回调函数或者loadimgManager
管理纹理图片的加载进度,如何计算纹理图片占用的内存大小。最后,我们提到了使用wrapS
和wrapT
配合rotation
,repeat
,offset
来管理贴图的位置,本篇博文中,我们进一步去探索这些内容及其它一些关于纹理的知识点。
three.js学习之纹理贴图Texture
这是three.js基础学习的第十三篇内容。在之前的学习中,我们已经学习了three.js应用的基础组成部分geometry
(图元)和material
(材质)。本篇中,我们将学习一个material的一个可选组成部分,纹理贴图(Texture)。在之前我们做过的所有three.js demo示例,基本都是纯色的。在本节学习纹理贴图Texture后,除了纯色,我们还可以将各种设计图放到立体图形的显示面上去。所谓的Texture纹理贴图,可以将它和css中的背景图片做一对应。
three.js学习之Phong网格材质MeshPhongMaterial
这是three.js学习基础部分的第12篇内容,这次要学习的是MeshPhongMaterial的内容,也是material(材质的)最后一部分内容,不过这一部分,我想偷个懒,希望能看到这里的人用MeshPhongMaterial
去实现一下three.js学习之基础网格材质MeshBasicMaterial和three.js学习之Lambert网格材质MeshLambertMaterial中的内容,然后对三者的异同点进行对比,本篇内容只学习一个新的内容。
three.js学习之Lambert网格材质MeshLambertMaterial
继续学习three.js基础部分,three.js学习之基础网格材质MeshBasicMaterial中学习了基础网格材质,今天学习另外一种网格材质Lambert网格材质。Lambert网格材质可以用来模仿生活中大部分的非镜面材质,有点类似于生生活中未加工的原材料。它对光照有反应,但是又不会很强烈。按照文档的说法,MeshLambertMaterial材质只在顶点计算光照。我们还是通过实际例子,去了解MeshLambertMaterial材质的一些特征。