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材质的一些特征。

详细阅读

three.js学习之类球多面体

在将three.js学习之常见几何体圆柱和球一章中我们学习了球SphereGeometry,创建时需要传如的第一个参数就是radius球面半径,今天咱们学的这些多面体,在这一点上和SphereGeometry球很相似,因此我想将它们归类成类球多面体。还是秉承咱们一贯的习惯,复制three.js学习之平面图形圆环和平面的html代码,并删除有关平面圆形和平面的代码,保留公用部分。

详细阅读

three.js学习之平面图形圆环和平面

特意看了一眼,从2022年8月19号开始写第一篇教程到今天,已经一个月零三天了。平均下来连三天一篇都做不到。进度缓慢的原因很多,自己面对的众多琐碎小事,工作的压力,在某些细节处被卡住等等。总之就是没有预想的顺利。本来我的计划是一个月将文字版教程写完,然后开始录制视频。按照目前的进度看来,显然是不可能的了。首先就是要写明白的东西比较多,限制篇幅可能会导致每一篇都很长,不利于阅读,然后就是我自己的时间精力也被自己高估了。不管怎么样,我都想坚持把three.js教程系列做完。这里我要手动@我的大学辅导员,他曾对我说,不管做什么,在大学坚持做完一件事都是很好的。可惜了,我大学做的事多,但是没有坚持下去的。

详细阅读