Three.js贴图效果一览
纹理贴图(Textures)字面意思就是給几何体对象贴上不同的纹理图!好比于我们每天选择穿不同的衣服,我们穿不同的衣服带来的感官会有很大变化!同理几何体不同贴图的视觉效果也会有千差万别。纹理贴图是 Three.js一个很重要的内容,掌握了纹理贴图可以让3d效果产生质的飞跃。
那现在就让我们进入正题吧!go!go!go!
贴图的重要性
如果没有纹理贴图,我们看到的3d物体将会是很糟糕的!例如下面这个最基础贴图例子。
//创建一个球体几何对象
const circlegeometry = new THREE.SphereBufferGeometry(0.5, 16, 16)
//创建一个立方体几何对象Geometry
const geometry = new THREE.BoxGeometry(1, 1, 1);
//创建一个圆环几何对象
const tourGeometry = new THREE.TorusBufferGeometry(0.3, 0.15, 16, 32);
// 加载贴图
let textureLoader = new THREE.TextureLoader();
const texture=textureLoader.load('/three/grass.png');//材质对象Material
const material = new THREE.MeshBasicMaterial({// color: 0xb9d3ff
});
material.map= texture;
不同材质对象的贴图效果
不同的人穿同样的衣服显然是不合适的,好比一个140kg
的胖子穿s码
的T恤,那肯定是穿不下的!纹理贴图也是一样的道理,它并不是适合每种**「材质对象(Material)」**。材质对象按大类分可分为五种。如下
点材质
线材质
网格材质
精灵Sprite材质
自定义着色器材质
网络(Mesh)材质顾名思义,网格类模型才会使用的材质对象。那现在就来看看它带来的贴图效果吧。
MeshBasicMaterial
网格基础材质,不受带有方向光源影响,没有棱角感。使用示例如下:
//材质对象MeshBasicMaterial
const material = new THREE.MeshBasicMaterial({color: 0x00ff00transparent:true,opacity:.5
});
material.map= texture;
material.wireframe=true;
材质常用属性 | 简介 |
---|---|
color | 材质颜色,比如蓝色0x0000ff |
wireframe | 将几何图形渲染为线框。默认值为false |
opacity | 透明度设置,0表示完全透明,1表示完全不透明 |
transparent | 是否开启透明,默认false |
MeshNormalMaterial
网格法向量材质,是一种比较特殊的材质。它使得物体的每一个面的颜色都从该面向外指的法向量计算得到的。
//材质对象MeshNormalMaterial
const material = new THREE.MeshNormalMaterial({// color: 0x00ff00,// transparent:true,// opacity:.5
});
// material.map= texture;
// material.wireframe=true;
material.flatShading=true
材质常用属性 | 简介 |
---|---|
flatShading | 可以让每个小平面更加的平坦突出 |
MeshMatcapMaterial
由一个材质捕捉(MatCap,或光照球(Lit Sphere))纹理所定义,其编码了材质的颜色与明暗。由于mapcap图像文件编码了烘焙过的光照,因此_MeshMatcapMaterial_ 不对灯光作出反应。
const texture=textureLoader.load('/three/5B4CBC_B59AF2_9B84EB_8F78E4.png');//材质对象Material
const material = new THREE.MeshMatcapMaterial({});
material.matcap= texture;
材质特别属性 | 简介 |
---|---|
matcap | 贴图属性 |
MeshDepthMaterial
使用这种材质的物体,其外观不是由光照或某个材质属性决定的;而是由物体到相机的距离决定的。「当物体离相机较近时会呈现白色,较远时会呈现黑色。贴图和颜色对其无效果」,可以将这种材质与其他材质相结合,从而很容易创建逐渐消失的效果。
const material = new THREE.MeshDepthMaterial({// color: 0x00ff00,// transparent:true,// opacity:.5
});
const width = container.clientWidth; //窗口宽度
const height = container.clientHeight; //窗口高度
const k = width / height; //窗口宽高比
const s = 1.2; //三维场景显示范围控制系数,系数越大,显示的范围越大
//创建相机对象
const camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 100);
camera.position.set(2, 3, 4); //设置相机位置
// camera.position.set(20, 30, 40); //设置相机位置
camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
MeshLambertMaterial 和 MeshPhongMaterial
MeshLambertMaterial
这是一种暗淡的非光泽表面的材质,没有镜面高光,并且会对光源做出反应。高光网格材质MeshPhongMaterial
除了和MeshLambertMaterial
一样可以实现光源和网格表面的漫反射光照计算,还可以产生高光效果(镜面反射)。
//点光源
const point = new THREE.PointLight(0xffffff,.5);
point.position.set(4, 4, 4); //点光源位置
scene.add(point); //点光源添加到场景中
// //环境光
const ambient = new THREE.AmbientLight(0xffffff,.5);
scene.add(ambient);
// MeshLambertMaterial
const material = new THREE.MeshLambertMaterial({color: 0xff0000,
});
// MeshPhongMaterial
const material = new THREE.MeshPhongMaterial({color: 0xff0000,specular:0xffffff,//高光部分的颜色shininess:60,//高光部分的亮度,默认30
});
MeshLambertMaterial特别属性 | 简介 |
---|---|
specular | 高光部分的颜色 |
shininess | 高光部分的亮度,默认30 |
MeshStandardMaterial
MeshStandardMaterial
和MeshPhysicalMaterial
类是PBR物理材质,可以更好的模拟光照计算,相比光网格材质MeshPhongMaterial
渲染效果更逼真。我们今天只看MeshStandardMaterial
贴图效果。
//材质对象Material
const material = new THREE.MeshStandardMaterial();
material.metalness=0.45; // 金属度属性
material.roughness=0.65; //粗糙度属性
material.map= texture;
// 环境贴图
const envTextTure=cubeTextureLoader.load(['/three/texture/px.png','/three/texture/nx.png','/three/texture/py.png','/three/texture/ny.png','/three/texture/pz.png','/three/texture/nz.png'
])
//材质对象Material
const material = new THREE.MeshStandardMaterial();
material.metalness=0.7; // 金属度属性
material.roughness=0.2; //粗糙度属性
material.envMap=envTextTure;
材质特别属性 | 简介 |
---|---|
metalness | 金属度属性(0.0到1.0之间的值可用于生锈的金属外观) |
roughness | 粗糙度属性(0.0表示平滑的镜面反射,1.0表示完全漫反射. 默认 0.5) |
网站推荐
这些网站主要是关于「贴图推荐」和「纹理贴图工具」。好的贴图可以让我们的物体更加的惟妙惟肖。所以推荐一下,希望对大家有帮助!
textures
地址:https://www.textures.com/library
简介:这个网站贴图类别是我看过最齐全的啦!强大的搜索功能允许你搜索特定的纹理以及标签。不过国内加载有时会有点慢,不知道是不是我网络问题。不过还是极力推荐的!
polyhaven
地址:https://polyhaven.com/textures
简介:这是一个完全免费的3D素材网站。里面的贴图质量非常的高,贴图素材也很丰富!
MatCaps
地址:https://github.com/nidorx/matcaps
简介:是专为
MeshMatcapMaterial
材质准备的,太赞了!
plaintextures
地址:https://www…com/pbr/category/all/1
简介:网站能提供免费纹理、画笔和照片 高级账号可以下载更高分辨率的素材。
Texture Niaja
地址:https://texture.ninja/category/Wood/2
简介:网站能提供5106种贴图,如果你需要指纹贴图的话,这会是很好的选择!
图片切割
地址:https://matheowis.github.io/HDRI-to-CubeMap/
简介:上传图片文件可以切割成6等分,环境贴图可以用到哈!
纹理生成器1
- 地址:http://www.tartanmaker.com/
纹理生成器2
- 地址:https://coolbackgrounds.io/
纹理生成器3
- 地址:http://www.stripegenerator.com/
结论
本篇文章只是粗浅介绍了纹理贴图和常用网络材质的使用方法,并顺便引入了相机和光源。最后展示的贴图效果还是很不错的。如果你需要深入学习的话还是需要翻阅大量有关资料的。
参考资料
three.js journey
Three.js零基础入门教程(郭隆邦)
关注柳杉前端公众号,获取更多资料
Three.js贴图效果一览相关推荐
- php滑动轮播效果,js实现移动端手指滑动轮播图效果
本文主要为大家分享一篇js原生实现移动端手指滑动轮播图效果的示例,具有很好的参考价值,希望对大家有所帮助.一起跟随小编过来看看吧,希望能帮助到大家. 如下所示: Document html{heigh ...
- 自动轮播图html代码适应手机,JS实现自动轮播图效果(自适应屏幕宽度+手机触屏滑动)...
1.本文使用js+jQuery实现轮播图,需要引用jquery包,另种实现分别是animate实现自适应的轮播,以及transform平滑轮播(在注释代码中). 2.代码中的图片大家自己更换就可以了, ...
- 史上最简单的原生JS实现轮播图效果
原生JS实现轮播图效果 上篇文章我们说到了怎样利用原生JS实现Tab切换的效果,现在我们来说一下Tab切换的"升级版".如何利用原生JS实现轮播图效果.如图: HTML代码: &l ...
- html轮播台袋效果,使用html+js+css 实现页面轮播图效果(实例讲解)
html 页面 轮播图效果 < > css页面 carousel.css #main{ width: 655px; height: 361px; position: relative; } ...
- Three.js开发:环境贴图效果
Three.js支持环境贴图效果,通过设置场景的背景(background),增强显示效果,环境贴图一般使用全景图,分成6张图片,以立体贴图(CubeTexture)的方式进行加载. 官网示例效果: ...
- vue列表左右箭头滑动_vue.js+elementUI实现点击左右箭头切换头像功能(类似轮播图效果)...
1.效果图如下 2.vue代码如下 indicator-position="none" :autoplay="false"> > {{items.b ...
- 左右全屏banner焦点图 代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等
介绍 源码名称:[左右全屏banner焦点图]代码特效+苹果官网首页左右全屏banner焦点图效果+包括JS图片CSS样式等 源码大小:16.6KB 开发语言:PHP+Mysql 操作系统:Windo ...
- 原生JS实现 ‘Tab栏切换’,‘手风琴’,‘轮播图’效果
1.小天使跟随鼠标效果 <!DOCTYPE html> <html lang="en"><head><meta charset=" ...
- html点击小图轮播图,使用纯CSS实现点击轮播图效果,无js。
使用纯CSS实现图片轮播效果 首先我们来看一下所实现轮播图的最终效果: 轮播图 效果 接下来为html+css代码部分: 以下为HTML代码部分: 以下为CSS代码部分: *{ margin:0; p ...
- php自动轮播图代码,JavaScript如何实现动态轮播图效果?(代码示例)
本篇文章给大家带来的内容是JavaScript如何实现动态轮播图效果?(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 功能描述: 1.鼠标经过 左右侧箭头显示,鼠标离开 ...
最新文章
- 批量创建用户和设置密码
- 关于各种回归评价指标MSE、RMSE、MAE、R-Squared、Standard Deviation(标准差)
- Yii框架官方指南系列43——专题:URL(创建、路由、美化及自定义)
- frac函数_20个能够有效提高 Pandas数据分析效率的常用函数,附带解释和例子
- VTK:Math之NormalizeVector
- 这5部不容错过的超高评价纪录片,带你领略地球的魅力!
- 微型计算机硬件采用什么,微型计算机的硬件系统包括什么?
- 如何把jar包发布到maven私服
- java开发环境怎样选择_怎样搭建Java开发环境?
- log4j slf4j实现_日志那点事儿——slf4j源码剖析
- 【数据结构(C语言)】数据结构-树
- java学习心得与体会(自我鼓励)
- 利用R语言进行探索性数据分析(EDA)
- 关于手机app合并m3u8文件失效,pc端合成方法
- 使用labelimg标注图片
- 如何快速的转发别人的CSDN博客(转载)
- PhpStudy在nginx下配置虚拟主机和伪静态
- PGP 对于JSON的加解密
- sja1000 中断_SJA1000中断接收为什么接收中断不能被触发,不能进入中断接收子函数?看资料,里面说会自动触发中断的。...
- WLAN适配器的驱动程序可能出现了问题(连不了wifi)解决办法
热门文章
- 2018-2-13-win10-UWP-RSS阅读器
- mysql ---- 全文索引:中文语义分词检索
- 十六进制计算器 android,十六进制计算器
- sam机架和kx连线图_独立声卡 kx DSP连线图详细教程(SAM机架使用的DSP连线图)
- 微信小程序--点餐系统(本地服务器+源码分享)
- zen服务器芯片,Intel颤抖!AMD 32核心终极版Zen亮相:媲美人脑
- Excel导入SQLserver数据长度过长导入失败
- 华为NP课程笔记26-VXLAN概述
- 如何使用NFC读写器读卡器ACR122U-A9|ACR1251U-M1|ACR1252U读写NDEF格式的智能海报|网址|文本等数据的方法与步骤
- geotools将shp数据存入postgres