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材质的一些特征。
three.js学习之基础网格材质MeshBasicMaterial
在three.js学习之立体圆环及立体扭结圆环中,我们学习了立体图像的最后一部分内容,今天开始,我们要学习material的内容了,在开始之前,让我们将思路回到threejs学习第一课:了解threejs的基本概念,复习一下相关的内容。
three.js学习之立体圆环及立体扭结圆环
今天我们学习初级阶段能学到的最后两个图元,圆环和扭结圆环。还是和之前一样,将three.js学习之类球多面体的html代码复制出来新建一个文件,删除有关多面体的代码,保留公共部分。
three.js学习之类球多面体
在将three.js学习之常见几何体圆柱和球一章中我们学习了球SphereGeometry,创建时需要传如的第一个参数就是radius球面半径,今天咱们学的这些多面体,在这一点上和SphereGeometry球很相似,因此我想将它们归类成类球多面体。还是秉承咱们一贯的习惯,复制three.js学习之平面图形圆环和平面的html代码,并删除有关平面圆形和平面的代码,保留公用部分。
three.js学习之平面图形圆环和平面
特意看了一眼,从2022年8月19号开始写第一篇教程到今天,已经一个月零三天了。平均下来连三天一篇都做不到。进度缓慢的原因很多,自己面对的众多琐碎小事,工作的压力,在某些细节处被卡住等等。总之就是没有预想的顺利。本来我的计划是一个月将文字版教程写完,然后开始录制视频。按照目前的进度看来,显然是不可能的了。首先就是要写明白的东西比较多,限制篇幅可能会导致每一篇都很长,不利于阅读,然后就是我自己的时间精力也被自己高估了。不管怎么样,我都想坚持把three.js教程系列做完。这里我要手动@我的大学辅导员,他曾对我说,不管做什么,在大学坚持做完一件事都是很好的。可惜了,我大学做的事多,但是没有坚持下去的。
three.js学习之常见几何体圆柱和球
这是学习three.js的第六篇博客,想循序渐进的学习,可以到目录下查看。在开始之前先创建一个learnCylinderGeometrySphereGeometry.html文件,然后将three.js学习之常见几何体平面圆形和圆锥中的代码复制过来,删除掉绘制平面圆形和圆锥的部分。
three.js学习之常见几何体平面圆形和圆锥
在three.js学习之盒子中,我们已经能够做出立方体并且根据需要进行变换了,点此可以查看demo。