js图片动态效果、js图片动态效果有哪些 收藏 0

Three.js贴图效果一览

纹理贴图（Textures）字面意思就是給几何体对象贴上不同的纹理图！好比于我们每天选择穿不同的衣服，我们穿不同的衣服带来的感官会有很大变化！同理几何体不同贴图的视觉效果也会有千差万别。纹理贴图是 Three.js一个很重要的内容，掌握了纹理贴图可以让3d效果产生质的飞跃。

那现在就让我们进入正题吧！go!go!go!

如果没有纹理贴图，我们看到的3d物体将会是很糟糕的！例如下面这个最基础贴图例子。

不同的人穿同样的衣服显然是不合适的，好比一个140kg的胖子穿s码的T恤，那肯定是穿不下的！纹理贴图也是一样的道理，它并不是适合每种「材质对象（Material）」。材质对象按大类分可分为五种。如下

• 点材质
• 线材质
• 网格材质
• 精灵Sprite材质
• 自定义着色器材质

「网络（Mesh）材质」顾名思义，网格类模型才会使用的材质对象。那现在就来看看它带来的贴图效果吧。

网格基础材质，不受带有方向光源影响，没有棱角感。使用示例如下：

材质常用属性简介：color材质颜色，比如蓝色0x0000ff；wireframe将几何图形渲染为线框。默认值为false；opacity透明度设置，0表示完全透明，1表示完全不透明；transparent是否开启透明，默认false

网格法向量材质,是一种比较特殊的材质。它使得物体的每一个面的颜色都从该面向外指的法向量计算得到的。

材质常用属性简介：flatShading可以让每个小平面更加的平坦突出

由一个材质捕捉（MatCap，或光照球（Lit Sphere））纹理所定义，其编码了材质的颜色与明暗。由于mapcap图像文件编码了烘焙过的光照，因此MeshMatcapMaterial 不对灯光作出反应。

材质特别属性简介：matcap贴图属性

使用这种材质的物体，其外观不是由光照或某个材质属性决定的;而是由物体到相机的距离决定的。「当物体离相机较近时会呈现白色，较远时会呈现黑色。贴图和颜色对其无效果」，可以将这种材质与其他材质相结合，从而很容易创建逐渐消失的效果。

MeshLambertMaterial这是一种暗淡的非光泽表面的材质,没有镜面高光,并且会对光源做出反应。高光网格材质MeshPhongMaterial除了和MeshLambertMaterial一样可以实现光源和网格表面的漫反射光照计算，还可以产生高光效果(镜面反射)。

MeshLambertMaterial特别属性简介:specular高光部分的颜色；shininess高光部分的亮度，默认30

MeshStandardMaterial和MeshPhysicalMaterial类是PBR物理材质，可以更好的模拟光照计算，相比光网格材质MeshPhongMaterial渲染效果更逼真。我们今天只看MeshStandardMaterial贴图效果。

材质特别属性简介：metalness金属度属性(0.0到1.0之间的值可用于生锈的金属外观)；roughness粗糙度属性(0.0表示平滑的镜面反射，1.0表示完全漫反射. 默认 0.5)

这些网站主要是关于「贴图推荐」和「纹理贴图工具」。好的「贴图」可以让我们的物体更加的惟妙惟肖。所以推荐一下，希望对大家有帮助！

• 地址：https://www.textures.com/library
• 简介：这个网站贴图类别是我看过最齐全的啦！强大的搜索功能允许你搜索特定的纹理以及标签。不过国内加载有时会有点慢，不知道是不是我网络问题。不过还是极力推荐的！

• 地址：https://polyhaven.com/textures
• 简介：这是一个完全免费的3D素材网站。里面的贴图质量非常的高，贴图素材也很丰富！

• 地址：https://github.com/nidorx/matcaps
• 简介：是专为MeshMatcapMaterial材质准备的，太赞了！

• 地址：https://www..com/pbr/category/all/1
• 简介：网站能提供免费纹理、画笔和照片 高级账号可以下载更高分辨率的素材。

• 地址：https://texture.ninja/category/Wood/2
• 简介：网站能提供5106种贴图，如果你需要指纹贴图的话，这会是很好的选择！

• 地址：https://matheowis.github.io/HDRI-to-CubeMap/
• 简介：上传图片文件可以切割成6等分，环境贴图可以用到哈！

• 地址：http://www.tartanmaker.com/

• 地址：https://coolbackgrounds.io/

• 地址：http://www.stripegenerator.com/

本篇文章只是粗浅介绍了纹理贴图和常用网络材质的使用方法，并顺便引入了相机和光源。最后展示的贴图效果还是很不错的。如果你需要深入学习的话还是需要翻阅大量有关资料的。

three.js journey

Three.js零基础入门教程(郭隆邦)

让网站动起来的js库，真漂亮，再也不用写复杂的动画了~wow.js

越来越多的网站特效很漂亮，其中就有一种我很喜欢的动画，就是当滑动到某个元素的时候，元素就是出现动画效果，如：缩放、旋转、滑动等。感觉很漂亮，之前在做企业站的时候，基本上都是自己手写的，有点麻烦而且效果也不是很好，最近发现了一款比较好用的动画库~~~~wow.js，可以轻松的网站具有这种特效。感受一下吧

Wow.js 的动画效果依赖于第三方库，官方推荐的是： Animate.css

当然也可以使用其它的动画库，需要配置一下 wowo.js。这里就以 Animate.css 为例展开介绍了。有兴趣的同学可以尝试使用一下其它的动画库。

• 引入动画库

• 引入并且使用 wow.js

• 配置一下需要使用动画的元素，为元素的class属性添加一个名为 .wow 的class样式

• 从 Animate.css 选择要使用的动画效果

至此，就已经添加好了一个效果了

可以针对时间、延时等一些配置做具体的修改

还可以通过js一些属性

boxClass: 给需要动画效果的元素 设置的class名称，默认是\”wow\”

animateClass: 需要提供动画的库，默认是由 animate.css 提供

offset: 定义距底部还有多少距离时触发动画效果

mobile: 开启是否在手机上使用动画效果

wow.js 使用的 MIT 开源协议，可以免费的使用，不过你的软件如果是有专利或者需要付费的，请记住在您的产品中包含MIT许可证的全部内容。

wow.js 是一款不错的js特效库，可以方便地给元素添加上滑动出现的效果。大大提高了网站的美观和交互性，并且降低了开发时间和成本。

关注我，分享给您实用的前端知识和优秀的组件库~~

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com