three.js基础学习之类人造光源

这是three.js学习的第18篇笔记,在three.js基础学习之环境光源AmbientLightthree.js基础学习之平行光源DirectionalLight中,我们已经学习了两种模拟自然界本来就存在的光源,今天我们学习模仿人造光源的光源。其中的点光源PointLight模仿的是灯泡发光,聚光灯SpotLight模仿的是聚光灯,平面光源RectAreaLight模仿的是从窗户漏出去的光。

详细阅读

three.js基础学习之平行光源DirectionalLight

three.js基础学习之光源的学习中,我们已经学习和知道了如何在three.js中通过构造函数创建光源,并且设置光的颜色和强度。但是,我们在案例中并没有直接使用THREE.Light进行构造,而是使用THREE.DirectionalLight。这是因为Light只是three.js中众多光源中的基类,并不能直接构造光源,构造光源还是需要具体的光源构造函数,比如我们用到的DirectionalLight。那么,现在就开始学习探索DirectionalLight,了解它的用法和使用场景。

详细阅读

three.js基础学习之光源

这是three.js基础学习的第15篇博客,前14篇可以点击查看。在本篇中,将学习three.js中关于光光源知识。有AmbientLight环境光,DirectionalLight平行光,HemisphereLight半球光,PointLight点光源,RectAreaLight平面光源,SpotLight聚光灯等。

详细阅读

three.js学习之纹理贴图Texture(二)纹理背景的位置移动旋转和重复

three.js学习之纹理贴图Texture中,我们初步了解了three.js中纹理基础知识,包括怎么使用TextureLoader加载一张或者多张纹理图片,如何使用回调函数或者loadimgManager管理纹理图片的加载进度,如何计算纹理图片占用的内存大小。最后,我们提到了使用wrapSwrapT配合rotationrepeatoffset来管理贴图的位置,本篇博文中,我们进一步去探索这些内容及其它一些关于纹理的知识点。

详细阅读

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学习之基础网格材质MeshBasicMaterialthree.js学习之Lambert网格材质MeshLambertMaterial中的内容,然后对三者的异同点进行对比,本篇内容只学习一个新的内容。

详细阅读

three.js学习之Lambert网格材质MeshLambertMaterial

继续学习three.js基础部分,three.js学习之基础网格材质MeshBasicMaterial中学习了基础网格材质,今天学习另外一种网格材质Lambert网格材质。Lambert网格材质可以用来模仿生活中大部分的非镜面材质,有点类似于生生活中未加工的原材料。它对光照有反应,但是又不会很强烈。按照文档的说法,MeshLambertMaterial材质只在顶点计算光照。我们还是通过实际例子,去了解MeshLambertMaterial材质的一些特征。

详细阅读