Three.js所有材质的属性及实例应用
材质(texture)
- 所有材质:
- 材质的共有属性
- 融合属性
- THREE.MeshBasicMaterial
- 简介
- 属性
- 实例应用
- THREE.MeshDepthMaterial
- 简介
- 属性
- 实例应用
- 联合材质
- 简介
- 实例应用
- THREE.MeshNormalMaterial
- 简介
- 属性
- 实例应用
- 在单几何体上使用多种材质
- 实例应用
- THREE.MeshLambertMaterial
- 简介
- 属性
- 创建
- 实例应用
- THREE.MeshPhongMaterial
- 简介
- 属性
- 创建
- THREE.MeshStandardMaterial
- 简介
- 属性
- THREE.MeshPhysicalMaterial
- 简介
- 属性
所有材质:
名称 | 描述 |
---|---|
MeshBasicMaterial(网格基础材质 | 基础材质,用于给几何体赋予一种简单的颜色,或者显示几何体的线框 |
MeshDepthMaterial(网格深度材质) | 这个材质的使用从摄像机到网格的距离来决定如何给网格上色 |
MeshNormalMaterial(网格法向材质) | 使用法向向量计算物体的表面颜色 |
MeshLambertMaterial(网格Lambert材质) | 这是一种考虑光照影响的材质,用于创建暗淡,不光亮的物体 |
MeshPhongMaterial(网格Phong材质) | 这是一种考虑光照影响的材质,用于创建光亮的物体 |
MeshStandardMaterial(网格标准材质) | 这种标准材质采用“基于物理的渲染(PBR)”算法来绘制物体表面。能计算出表面与光线的正确互动关系,从而使渲染出来的物体更真实。 |
MeshPhysicalMaterial(网格物理材质) | 这是MeshStandardMaterial(网格标准材质)的扩展材质,为光线反射计算模型提供了更多的控制 |
MeshToonMaterial(网格卡通材质) | 这是MeshPhongMaterial(网格Phong材质)的扩展材质,使得物体渲染卡通化 |
ShadowMaterial(阴影材质) | 专门用于接收用于阴影图的特殊材质。在该材质中只有阴影图像,非阴影部分为完全透明的区域 |
shaderMaterial(着色器材质) | 允许使用自定义的着色器程序,直接控制顶点的放置位置和像素的着色方式 |
LineBasicMaterial(直线基础材质) | 用于THREE.line(直线)几何体,用于创建着色的直线 |
LineDashMaterial(虚线材质) | 这种材质和LineBasicMaterial(直线基础材质)一样,但是允许创建一种虚线的效果。 |
材质的共有属性
属性 | 描述 |
---|---|
id(标识符) | 用于识别材质,并在创建材质时赋值。从0开始往上增加 |
uuid(通用唯一识别符) | 这是生成的唯一ID,在内部使用 |
name(名称) | 可以通过这个属性赋予材质名称,用于调试的目的 |
opacity(不透明度) | 定义物体的透明度。与transparent属性一起使用。该属性的赋值范围从0到1 |
transparent(是否透明) | 如果设置为true,Three.js会使用指定的不透明度渲染物体,如果设置为false,这个物体就不透明。如果使用alpha(透明度)通道的纹理,这个值应该设置为true。 |
overdraw(过度描绘) | 当使用THREE.CanvasRender时,多边形会被渲染的稍微大一点。当这个渲染器渲染的物体有间隙时,可以将这个属性设置为true。 |
visible(是否可见) | 定义该材质是否可见。如果设置为false,该物体在场景中就不可见 |
side(侧面) | 可以定义哪一面应用材质。默认值是THREE.FontSide(前面)。 |
needsUpdate(是否更新) | 对于材质的某些修改,是否告诉THREE.js材质已经改变,如果设置为true,Three.js会使用新的材质属性更新它的缓存 |
colorWrite(是否输出颜色) | 如果属性值设置为false,则具有该材质的物体不会被真正的绘制到场景中,实际效果是该物体本身是不可见的,但其他物体被它挡住的部分也不可见 |
flatShading(平面着色) | 该属性控制物体表面法线的生成方式,从而影响光线效果。属性值为true时,在两个相邻但不共面的三角形之间,光照会因为生硬过度而产生棱角,为false时则会产生平滑的过度效果。 |
lights | 该属性值为布尔值。控制物体表面是否接受光照。默认值为true |
dithering(抖动) | 该属性控制是否启用颜色抖动模式,在一定程度上可以减轻颜色不均的问题。默认值为false |
shadowSide(投影面) | 控制哪个面会投射阴影。默认值为null。当属性值为null时。投射阴影的面按照如下原则推定:当side为THREE.FrontSide时,side为后面;当side为THREE.BackSide时,side为前面;当side为THREE.DoubleSide时,side为前面双侧 |
vertexColors(顶点颜色) | 可以为物体的每一个顶点指定特有的颜色。默认值是THREE.NoColors。如果设置属性值为THREE.VertexColors,则渲染时将使用THREE.Face3 vertexColors数组指定的颜色,为每一个顶点设定颜色。如果该属性值为THREE.FaceColors,则会使用每一个面自己的颜色属性来设定面的颜色。CanvasRenderer不支持该属性,但WebGLRenderer能够支持 |
fog(雾) | 控制材质是否受雾的影响 |
融合属性
- 融合属性决定了我们渲染的颜色如何与它们后面的颜色交互
属性 | 描述 |
---|---|
blending(融合) | 该属性决定了物体上的材质如何与背景融合。一般的融合模式是THREE.NormalBlending,在这种模式下只显示材质的上层 |
blendSrc(融合源) | 除了标准融合模式之外,还可以通过设置blendSrc、blendDst和blendEquation来创建自定义的融合模式。这个属性定义了物体(源)如何与背景(目标)相融合。默认值为THREE.SrcAlphaFactor,即使用alpha(透明度通道)进行融合。 |
blendSrcAlpha(融合源透明度) | 该属性为blendSrc指定透明度,默认值为null |
blendDst(融合目标) | 定义了融合时如何使用背景(目标),默认值为THREE.OneMinusSrcAlphaFactor,其含义是目标也使用源的alpha通道进行融合,只是使用的值是1(源的alpha通道值) |
blendDstAlpha(融合目标透明度) | 该属性为blendDst指定透明度,默认值为null |
blendEquation(融合公式) | 定义如何使用不blendSrc和blendDst的值。默认值为使它们相加(AddEquation)。 |
THREE.MeshBasicMaterial
简介
- 一种简单的材质,不考虑场景中光照的影响
- 使用这种材质网格会被渲染成简单的平面多边形
- 可以显示几何体的线框
属性
名称 | 描述 |
---|---|
color(颜色) | 设置材质的颜色 |
wireframe(线框) | 设置这个属性可以将材质渲染成线框,适用于调试 |
wireframeLinewidth(线框线宽) | 如果打开了wireframe,这个属性定义线框中线的宽度 |
wireframeLinecap(线框线段端点) | 这个属性定义了线框模式下顶点间线段的端点如何显示。可选的值包括butt(平)、round(圆)和square(方)。默认值是round。在实际使用中,这个属性的修改结果很难看出来。WebGLRenderer对象不支持该属性。 |
wireframeLinejoin(线框线段连接点) | 定义了线段连接点如何显示。可选的值有round(圆)、bevel(斜角)、miter(尖角)。默认值为round。WebGLRenderer对象不支持该属性。 |
实例应用
链接:https://blog.csdn.net/Potatoyou/article/details/127979023?spm=1001.2014.3001.5502
THREE.MeshDepthMaterial
简介
- 这个材质使用摄像机到网格的距离来决定如何给网格上色
- 可以将这种材质和其他材质结合,容易创建出逐渐消失的效果。
- 这种材质只有两个控制线框显示的属性
属性
属性 | 描述 |
---|---|
wireframe | 该属性指定是否显示线框 |
wireframeLineWidth | 该属性指定线框的宽度(这个属性支队THREE.CanvasRenderer有效) |
实例应用
链接:MeshDepthMaterial
联合材质
简介
- THREE.MeshDepthMaterial材质没有用来设置颜色的属性,一切都是由材质的默认属性决定
- THREE.js库可以通过联合材质创建出可以拥有颜色,同时也是THREE.MeshDepthMaterial材质的物体
- 如何联合材质?
//创建两种材质
var cubeMaterial = new THREE.MeshDepthMaterial();
//对于THREE.MeshBasicMaterial材质,需要设置transparent为true,并且指定一个融合模式
//如果transparent没有设置为true,只会出现纯绿色物体,因为three.js不会执行任何融合模式
var colorMaterial = new THREE.MeshBasicMaterial({color:0xffffff,transparent:true,//设置THREE.MeshBasicMaterial如何与背景(THREE.MeshDepthMaterial材质渲染的方块)互相作用//THREE.MultiplyBlending对象,这种融合模式会把前景色和背景色相乘blending:THREE.MultiplyBlending
});var cube = new THREE.SceneUtils.createMultiMaterialObject(cubeGeometry,[colorMaterial,cubeMaterial]);
cube.children[1].scale.set(0.99,0.99,0.99);
- 当调用THREE.SceneUtils.createMultiMaterialObject()方法创建一个网格时,几何体会被复制,返回一个网格组
- 如果没有最后一行,渲染的时候画面会有闪烁
- 通过缩小THREE.MeshDepthMaterial材质的网格,可以避免闪烁现象
- 这些方块从MeshDepthMaterial对象获得了亮度,从MeshBasicMaterial对象获得了颜色
实例应用
链接:联合材质
THREE.MeshNormalMaterial
简介
- 使用法向向量计算物体的表面颜色
- 法向量在three.js中可以用来决定光的反射,有助于将纹理映射到三维模型,并提供有关如何计算光照、阴影和为表面像素着色的信息
属性
属性 | 描述 |
---|---|
wireframe | 该属性指定是否显示线框 |
wireframeLineWidth | 该属性指定线框的宽度(这个属性支队THREE.CanvasRenderer有效) |
实例应用
链接:MeshNormalMaterial
在单几何体上使用多种材质
- 如果有一个方块,有12个面(注意,three.js中只作用于三角形)。你可以用这种材质给方块的每个面指定一种材质(例如不同的颜色)
实例应用
链接:多种材质
THREE.MeshLambertMaterial
简介
- 用来创建暗淡的并不光亮的表面
- 该材质非常易用,而且会对场景中的光源产生反应
- 支持线框绘制属性,可以绘制具有光照效果的线框物体
- 效果看起来比较暗淡
属性
名称 | 描述 |
---|---|
color(颜色) | 这是材质的环境光 |
emissive(自发光) | 材质自发光的颜色。该材质虽然不会让使用它的物体变成光源,但会使物体的颜色不受其他光源的影响(即使在场景中没有光源的暗处,该物体表面的emissive颜色也可见,从而实现物体自发光。)该属性的默认值为黑色。 |
创建
var meshLambertMaterial = new THREE.MeshLambertMaterial({color:0xffffff});
实例应用
链接:MeshLambertMaterial
THREE.MeshPhongMaterial
简介
- 创建一种光亮的材质
- 可以在物体表面实现高光效果
- 可以模拟塑料质感,也可以模拟金属质
- THREE.js还提供了一个THREE.MeshPhongMaterial材质的扩展材质:THREE.MeshToonMaterial
属性
名称 | 描述 |
---|---|
color(颜色) | 材质的环境色。与环境光源一起使用。这个颜色会与环境光提供的颜色相乘。默认值为白色 |
emissive(自发光颜色) | 材质自发光的颜色。该材质虽然不会让使用它的物体变成光源,但会使物体的颜色不受其他光源的影响(即使在场景中没有光源的暗处,该物体表面的emissive颜色也可见,从而实现物体自发光。)该属性的默认值为黑色。 |
specular(高光颜色) | 该属性指定该材质的光亮程度及高光部分颜色。如果将它设置成与color属性相同的颜色,将会得到一个类似金属的材质,如果将它设置成灰色(grey),材质将会变得像塑料 |
shiness(高光度) | 该属性指定物体表面镜面高光部分的轮廓的清晰程度,越光滑的表面,高光部分越清晰,反之越模糊。该属性的默认值为30 |
创建
var meshPhongMaterial = new THREE.MeshPhongMaterial({color: 0xdddddd});
THREE.MeshStandardMaterial
简介
- 这种材质使用更加正确的物理计算来决定物体表面如何与场景中的光源互动
- 能够更好的表现塑料质感和金属质感的表面
属性
名称 | 描述 |
---|---|
metalness(金属感程度) | 该属性控制物体表面的金属感程度。0代表完全塑料质感,1代表完全金属质感。默认值为0.5 |
roughness(粗糙程度) | 该属性控制物体表面的粗糙程度。在视觉上,它决定表面对入射光的漫反射程度。默认值0.5。当值为0时会产生类似镜面的反射,为1时会产生完全的漫反射效果 |
THREE.MeshPhysicalMaterial
简介
- 该材质与THREE.MeshPhongMaterial材质非常相似
- 提供了对反光度的更多控制
- 该材质与上述MeshStandardMaterial材质,在不动手实验的情况下,很难确定什么样的参数值才能最符合特定需求。因此最佳的实践方法就是在程序里增加一个简单的UI,一边调节参数一边观察。
属性
名称 | 描述 |
---|---|
clearCoat(清漆) | 该属性控制物体表面清漆涂层效果的明显程度。该属性值越高,则清漆图层越厚,其结果是clearCoatRoughness属性带来的影响越明显。取值范围是0-1,默认值0 |
clearCoatRoughness(清漆粗糙程度) | 该属性控制物体表面清漆涂层的粗糙程度。粗糙程度越高,漫反射越明显。该属性需要与clearCoat属性配合使用。取值范围0-1,默认值0 |
reflectivity(反光度) | 该属性用于控制非金属表面的反光度,因此当metalness(金属感程度)为1或接近1时该属性的作用很小。取值范围时0-1,默认值0.5 |
Three.js所有材质的属性及实例应用相关推荐
- Three.js中使用材质覆盖属性
场景 Three.js中实现点击按钮添加删除旋转立方体: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/119452536 在上面 ...
- 前端:JS/35/二级联动菜单,select对象,select对象的属性,option对象,option对象属性,实例:省份列表与城市列表的联动
二级联动菜单 select 对象 一个<select>标记,对应一个select对象: select对象的属性 1,options[] :设置或返回下拉列表中<option>标 ...
- Vue.js:监听属性
ylbtech-Vue.js:监听属性 1.返回顶部 1. Vue.js 监听属性 本章节,我们将为大家介绍 Vue.js 监听属性 watch,我们可以通过 watch 来响应数据的变化: 实例 & ...
- php接收键盘事件,js获取键盘事件的方法实例
本文主要和大家分享js获取键盘事件的方法实例,希望能帮助到大家. document.οnkeydοwn=function(event){ var e = event || window.event | ...
- matlab 模拟心电图,使用原生js+canvas实现模拟心电图的实例
从2015年2月转行进入IT行业,到现在也有将近两年的时间了,从最开始的java到现在的前端,前进的路上一直靠自己摸索,一路走到现在,前端大神是绝对谈不上的,最多算一只刚入门的菜鸟. 从最开始的懵懵懂 ...
- unity 相同材质不同属性怎么合批
多个完全相同的物体,想改材质的属性,直接 render.material.Set... 会导致合批失败,查看FrameDebug发现 objects have different materials ...
- 原生js获取html元素属性,JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性)...
JS(原生js和jq方式)获取元素属性(自定义属性),删除属性(自定义属性) 以下内容: 一.获取元素的属性 二.设置元素的属性 三.删除元素的属性 一.获取元素的属性 1-原生JS 获取属性 .ge ...
- 图形化开发(五)021-Three.js之材质——不受光影响-MeshBasicMaterial-同颜色MeshNormalMaterial-方向不同颜色LineBasicMaterial线条材质
图形化开发(五)021-Three.js之材质--不受光影响-MeshBasicMaterial-整个物体颜色一样&MeshNormalMaterial-方向不同自动改变颜色 & Li ...
- python类中的属性分为类属性和实例属性两种_python从入门到大神---1、初始化实例、类属性、方法...
python从入门到大神---1.初始化实例.类属性.方法 一.总结 一句话总结: 方法不加括号是代码段:感觉python方法和js,php很类似,不加括号是代码段,加括号变成方法,比如f,f() 1 ...
最新文章
- AI大军又添猛将:海云数据宣布“双亿元AI扶持计划”
- 如何在Python中获取字符串的子字符串?
- ios 三种颜色画笔和橡皮擦的画图板demo
- mysql 数据库表被锁住了_mysql数据库锁的产生原因及解决办法
- pyhton 把文字放入图片里_藏在京城老字号里的六道功夫菜!久违了!!
- 简单的聊聊,顺便招前端
- Oracle:sqlplus查询出的中文是乱码问题的解决(转)
- HashMap 为什么会导致 CPU 100%?文章看不懂?来看这个视频吧!——面试突击 006 期...
- css 透明度_如何在网页控制透明度
- 电商咄咄逼人的黑色星期五促销横BANNER设计模板
- 嵌入Windows User Control到ASP.NET web form
- 游戏筑基开发之测试篇(C语言)
- 用于主题检测的临时日志(861e8353-61d5-43a9-b1b4-e055dac9cf39 - 3bfe001a-32de-4114-a6b4-4005b770f6d7)...
- html5中的错误怎么调试,页面中css调试和问题 解决的一些经验总结
- 位运算中的一些数学原理
- Yasm的作用及NASM详解
- 信息学奥赛一本通——2062:【例1.3】电影票
- yaml文件 *.yml 写法简介
- 为什么吃狗肉那么有争议?
- 关于时间复杂度什么是时间复杂度
热门文章
- python十以内加减法_python生成PDF文件20以内加减法,给上小学的宝宝
- 7-7 哈利·波特的考试 (25 分)
- FZU 1055 赋值问题
- 意大利品质至上的菜 自由自在享受美味
- 利用numpy读取mnist数据集
- 清新时尚岗位竞聘个人介绍PPT模板(8598)_竞聘简历PPT_素材在线
- Numpy 高级操作大全
- JZOJ 3823【NOIP2014模拟9.9】遇见
- [附源码]SSM计算机毕业设计高校教师教学助手系统的设计与实现JAVA
- 【Unity3D读取数据】(四)Excel文件操作(创建、读取、写入、修改)