前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >three.js 材质

three.js 材质

作者头像
郭先生的博客
发布2020-08-28 02:36:02
9.8K0
发布2020-08-28 02:36:02
举报
文章被收录于专栏:郭先生的博客郭先生的博客

今天郭先生说一说three.js的材质。材质描述了对象objects的外观。它们的定义方式与渲染器无关, 因此,如果您决定使用不同的渲染器,不必重写材质。

1. three.js材质基类

所有其他材质类型都继承了Material。

下面是一些属性:

.alphaTest : Float

设置运行alphaTest时要使用的alpha值。如果不透明度低于此值,则不会渲染材质。默认值为0。

.blendDst : Integer

混合目标。默认值为OneMinusSrcAlphaFactor。 目标因子所有可能的取值请参阅constants。 必须将材质的blending设置为CustomBlending才能生效。

.blendDstAlpha : Integer

.blendDst的透明度。 默认值为 null.

.blendEquation : Integer

使用混合时所采用的混合方程式。默认值为AddEquation。 混合方程式所有可能的取值请参阅constants。 必须将材质的blending设置为CustomBlending才能生效。

.blendEquationAlpha : Integer

.blendEquation 的透明度. 默认值为 null.

.blending : Blending

在使用此材质显示对象时要使用何种混合。

必须将其设置为CustomBlending才能使用自定义blendSrc, blendDst 或者 page:Constant blendEquation。 混合模式所有可能的取值请参阅constants。默认值为NormalBlending。

.blendSrc : Integer

混合源。默认值为SrcAlphaFactor。 源因子所有可能的取值请参阅constants。

必须将材质的blending设置为CustomBlending才能生效。

.blendSrcAlpha : Integer

.blendSrc的透明度。 默认值为 null.

.clipIntersection : Boolean

更改剪裁平面的行为,以便仅剪切其交叉点,而不是它们的并集。默认值为 false。

.clippingPlanes : Array

用户定义的剪裁平面,在世界空间中指定为THREE.Plane对象。这些平面适用于所有使用此材质的对象。空间中与平面的有符号距离为负的点被剪裁(未渲染)。 这需要WebGLRenderer.localClippingEnabled为true。 示例请参阅WebGL / clipping /intersection。默认值为 null。

.clipShadows : Boolean

定义是否根据此材质上指定的剪裁平面剪切阴影。默认值为 false。

.colorWrite : Boolean

是否渲染材质的颜色。 这可以与网格的renderOrder属性结合使用,以创建遮挡其他对象的不可见对象。默认值为true。

.defines : Object

注入shader的自定义对象。 以键值对形式的对象传递,{ MY_CUSTOM_DEFINE: '' , PI2: Math.PI * 2 }。 这些键值对在顶点和片元着色器中定义。默认值为undefined。

.depthFunc : Integer

使用何种深度函数。默认为LessEqualDepth。 深度模式所有可能的取值请查阅constants。

.depthTest : Boolean

是否在渲染此材质时启用深度测试。默认为 true。

.depthWrite : Boolean

渲染此材质是否对深度缓冲区有任何影响。默认为true。

在绘制2D叠加时,将多个事物分层在一起而不创建z-index时,禁用深度写入会很有用。

.flatShading : Boolean

定义材质是否使用平面着色进行渲染。默认值为false。

.fog : Boolean

材质是否受雾影响。默认为true。

.id : Integer

此材质实例的唯一编号。

.isMaterial : Boolean

用于检查此类或派生类是否为材质。默认值为 true。

因为其通常用在内部优化,所以不应该更改该属性值。

.lights : Boolean

材质是否受到光照的影响。默认为true。

.name : String

对象的可选名称(不必是唯一的)。默认值为空字符串。

.needsUpdate : Boolean

指定需要重新编译材质。

实例化新材质时,此属性自动设置为true。

.opacity : Float

在0.0 - 1.0的范围内的浮点数,表明材质的透明度。值0.0表示完全透明,1.0表示完全不透明。

如果材质的transparent属性未设置为true,则材质将保持完全不透明,此值仅影响其颜色。 默认值为1.0。

.polygonOffset : Boolean

是否使用多边形偏移。默认值为false。这对应于WebGL的GL_POLYGON_OFFSET_FILL功能。

.polygonOffsetFactor : Integer

设置多边形偏移系数。默认值为0。

.polygonOffsetUnits : Integer

设置多边形偏移单位。默认值为0。

.precision : String

重写此材质渲染器的默认精度。可以是"highp", "mediump" 或 "lowp"。默认值为null。

.premultipliedAlpha : Boolean

是否预乘alpha(透明度)值。有关差异的示例,请参阅WebGL / Materials / Transparency。 默认值为false。

.dithering : Boolean

是否对颜色应用抖动以消除条带的外观。默认值为 false。

.shadowSide : Integer

定义投影的面。设置时,可以是THREE.FrontSide, THREE.BackSide, 或Materials。默认值为 null。

如果为null, 则面投射阴影确定如下:

Material.side Side casting shadows

THREE.FrontSide 背面

THREE.BackSide 前面

THREE.DoubleSide 双面

.side : Integer

定义将要渲染哪一面 - 正面,背面或两者。 默认为THREE.FrontSide。其他选项有THREE.BackSide和THREE.DoubleSide。

.transparent : Boolean

定义此材质是否透明。这对渲染有影响,因为透明对象需要特殊处理,并在非透明对象之后渲染。

设置为true时,通过设置材质的opacity属性来控制材质透明的程度。

默认值为false。

.type : String

值是字符串'Material'。不应该被更改,并且可以用于在场景中查找此类型的所有对象。

.uuid : String

此材质实例的UUID,会自动分配,不应该被更改。

.vertexColors : Integer

是否使用顶点着色。默认值为THREE.NoColors。 其他选项有THREE.VertexColors 和 THREE.FaceColors。

.vertexTangents : Boolean

TODO.

.visible : Boolean

此材质是否可见。默认为true。

.userData : object

一个对象,可用于存储有关Material的自定义数据。它不应该包含对函数的引用,因为这些函数不会被克隆。

下面是一些方法:

EventDispatcher 方法在此类中可用。

.clone ( ) : Material

返回与此材质具有相同参数的新材质。

.copy ( material : material ) : Material

将被传入材质中的参数复制到此材质中。

.dispose () : null

处理材质。材质的纹理不会被处理。需要通过Texture处理。

.onBeforeCompile ( shader : Shader, renderer : WebGLRenderer ) : null

在编译shader程序之前立即执行的可选回调。此函数使用shader源码作为参数。用于修改内置材质。

.setValues ( values : object ) : null

values -- 具有参数的容器。 根据values设置属性。

.toJSON ( meta : object ) : null

meta -- 包含元素,例如材质的纹理或图像。 将材质转换为three.js JSON格式。

2. three.js材质种类

名称

介绍

LineBasicMaterial

一种用于绘制线框样式几何体的材质。

LineDashedMaterial

一种用于绘制虚线样式几何体的材质。

MeshBasicMaterial

一个以简单着色(平面或线框)方式来绘制几何体的材质。这种材质不受光照的影响。

MeshLambertMaterial

一种非光泽表面的材质,没有镜面高光。该材质使用基于非物理的Lambertian模型来计算反射率。 这可以很好地模拟一些表面(例如未经处理的木材或石材),但不能模拟具有镜面高光的光泽表面(例如涂漆木材)。

MeshPhongMaterial

一种用于具有镜面高光的光泽表面的材质。该材质使用非物理的Blinn-Phong模型来计算反射率。 与MeshLambertMaterial中使用的Lambertian模型不同,该材质可以模拟具有镜面高光的光泽表面(例如涂漆木材)。

MeshNormalMaterial

一种把法向量映射到RGB颜色的材质。

MeshDepthMaterial

一种按深度绘制几何体的材质。深度基于相机远近平面。白色最近,黑色最远。

MeshDistanceMaterial

在内部用于使用PointLight来实现阴影映射。

MeshMatcapMaterial

由一个材质捕捉(MatCap,或光照球(Lit Sphere))纹理所定义,其编码了材质的颜色与明暗。可以理解为自带光效果的材质

MeshToonMaterial

MeshPhongMaterial卡通着色的扩展。

PointsMaterial

点材质,粒子系统所使用的缺省材料。

SpriteMaterial

点精灵材质,一种使用Sprite的材质。

MeshPhysicalMaterial

MeshStandardMaterial的扩展,能够更好地控制反射率。请注意,为了获得最佳效果,您在使用此材质时应始终指定环境贴图。

MeshStandardMaterial

一种基于物理的标准材质,使用Metallic-Roughness工作流程。这种方法与旧方法的不同之处在于,不使用近似值来表示光与表面的相互作用,而是使用物理上正确的模型。 我们的想法是,不是在特定照明下调整材质以使其看起来很好,而是可以创建一种材质,能够“正确”地应对所有光照场景。

ShadowMaterial

此材质可以接收阴影,但在其他方面完全透明。

ShaderMaterial

使用自定义shader渲染的材质。 shader是一个用GLSL编写的小程序 ,在GPU上运行。 您可能需要使用自定义shader,

这些材料都很常见,这里最最重要的是ShaderMaterial(着色器材质)。日后我将花大量时间说这个,但是现在还不是时候,日后说说Vector3,Matrix3,Matrix4,Quaternion,然后在说说着色器语言。

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2020-07-15 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. three.js材质基类
    • 下面是一些属性:
      • 下面是一些方法:
      • 2. three.js材质种类
      相关产品与服务
      容器服务
      腾讯云容器服务(Tencent Kubernetes Engine, TKE)基于原生 kubernetes 提供以容器为核心的、高度可扩展的高性能容器管理服务,覆盖 Serverless、边缘计算、分布式云等多种业务部署场景,业内首创单个集群兼容多种计算节点的容器资源管理模式。同时产品作为云原生 Finops 领先布道者,主导开源项目Crane,全面助力客户实现资源优化、成本控制。
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档