ThreeJs 学习之旅(七)_threejs wireframe

Material(材质)

一、MeshNormalMaterial(网状通用材料)

例:

const MeshBasicMaterial=new THREE.MeshNormalMaterial()

.wireframe : 线框

Boolean Render geometry as wireframe. Default is false (i.e. render as smooth shaded). .wireframeLinewidth : Float Controls wireframe thickness. Default is 1. Due to limitations of the OpenGL Core Profile with the WebGL renderer on most platforms linewidth will always be 1 regardless of the set value.

。线框:布尔型 将几何体渲染为线框。默认值为false(即渲染为平滑着色)。 。线框线宽:浮动 控制线框厚度。默认值为1。 由于大多数平台上带有WebGL渲染器的OpenGL核心配置文件的限制，无论设置值如何，线宽都将始终为1。

例:

const MeshBasicMaterial=new THREE.MeshNormalMaterial()
MeshBasicMaterial.wireframe=true;    //线框显示

 

.flatShading : 平面阴影

Boolean Define whether the material is rendered with flat shading. Default is false.

。平面阴影:布尔型 定义是否使用平面着色渲染材质。默认值为false。

 例:

const MeshBasicMaterial=new THREE.MeshNormalMaterial()
MeshBasicMaterial.wireframe=true    //线框
MeshBasicMaterial.flatShading=true      //平面阴影

二、MeshMatcapMaterial        (无光泽帽/泥塑

const MeshBasicMaterial=new THREE.MeshMatcapMaterial();  //泥塑材料

)材质

MeshMatcapMaterial is defined by a MatCap (or Lit Sphere) texture, which encodes the material color and shading.

MeshMatcapMaterial由MatCap(或光照球体)纹理定义，它对材质颜色和明暗度进行编码。

MeshMatcapMaterial( parameters : Object ) parameters - (optional) an object with one or more properties defining the material's appearance. Any property of the material (including any property inherited from Material) can be passed in here. The exception is the property color, which can be passed in as a hexadecimal string and is 0xffffff (white) by default. Color.set( color ) is called internally.

MeshMatcapMaterial(参数:对象) 参数-(可选)具有一个或多个定义材料外观的属性的对象。材料的任何属性(包括从材料继承的任何属性)都可以在这里传入。 属性color是个例外，它可以作为十六进制字符串传入，默认情况下是0xffffff(白色)。内部调用Color.set( color)。

例:

.matcap : 纹理

Texture The matcap map. Default is null.

。matcap:纹理 马特卡普地图。默认值为null。

 例:

const MeshBasicMaterial=new THREE.MeshMatcapMaterial();  //泥塑材料
const matcp=texture.load('/matcaps/3.png');
MeshBasicMaterial.matcap=matcp

 材质

结果:

 

三、MeshDepthMaterial (网格深度材料)

MeshDepthMaterial A material for drawing geometry by depth. Depth is based off of the camera near and far plane. White is nearest, black is farthest.

网格深度材料 一种按深度画几何图形的材料。深度是基于相机的近平面和远平面。白色最近，黑色最远。 

 const MeshBasicMaterial=new THREE.MeshDepthMaterial()   //景深材料​​​​​​​

 例:

 四、MeshLambertMaterial无光泽表面的材质

A material for non-shiny surfaces, without specular highlights. The material uses a non-physically based Lambertian model for calculating reflectance. This can simulate some surfaces (such as untreated wood or stone) well, but cannot simulate shiny surfaces with specular highlights (such as varnished wood). Shading is calculated using a Gouraud shading model. This calculates shading per vertex (i.e. in the vertex shader) and interpolates the results over the polygon's faces. Due to the simplicity of the reflectance and illumination models, performance will be greater when using this material over the MeshPhongMaterial, MeshStandardMaterial or MeshPhysicalMaterial, at the cost of some graphical accuracy.

无光泽表面的材质，没有镜面高光。 该材质使用基于非物理的朗伯模型来计算反射率。这可以很好地模拟某些表面(如未经处理的木材或石头)，但不能模拟具有镜面高光的闪亮表面(如涂漆木材)。 使用Gouraud着色模型计算着色。这将计算每个顶点的着色(即在顶点着色器中)并将结果插值到多边形的面上。 由于反射和照明模型的简单性，当在MeshPhongMaterial、MeshStandardMaterial或MeshPhysicalMaterial上使用该材质时，性能会更好，但会损失一些图形精度。

****需要灯光辅助才能看到形状

例:

const MeshBasicMaterial=new THREE.MeshLambertMaterial()   //反射材料
const ambientLight=new THREE.AmbientLight(0xffffff,0.5)    //环境光
sence.add(ambientLight)
const pointLinght=new THREE.PointLight(0xffffff,0.5)
pointLinght.position.x=2;
pointLinght.position.y=3;
pointLinght.position.z=4;
sence.add(pointLinght)
colorTexture.minFilter=THREE.NearestFilter

五、MeshPhongMaterial 镜面高光材质

MeshPhongMaterial A material for shiny surfaces with specular highlights. The material uses a non-physically based Blinn-Phong model for calculating reflectance. Unlike the Lambertian model used in the MeshLambertMaterial this can simulate shiny surfaces with specular highlights (such as varnished wood). Shading is calculated using a Phong shading model. This calculates shading per pixel (i.e. in the fragment shader, AKA pixel shader) which gives more accurate results than the Gouraud model used by MeshLambertMaterial, at the cost of some performance. The MeshStandardMaterial and MeshPhysicalMaterial also use this shading model. Performance will generally be greater when using this material over the MeshStandardMaterial or MeshPhysicalMaterial, at the cost of some graphical accuracy.

MeshPhongMaterial一种用于具有镜面高光的闪亮曲面的材质。该材质使用基于非物理的Blinn-Phong模型来计算反射率。与MeshLambertMaterial中使用的Lambertian模型不同，这可以模拟具有镜面高光的闪亮曲面(如涂漆木材)。使用Phong着色模型计算着色。这将计算每个像素的着色(即在片段着色器中，也称为像素着色器)，其结果比MeshLambertMaterial使用的Gouraud模型更精确，但会牺牲一些性能。MeshStandardMaterial和MeshPhysicalMaterial也使用这种着色模型。与MeshStandardMaterial或MeshPhysicalMaterial相比，使用此材质时，性能通常会更好，但会牺牲一些图形精度。

***需要灯光辅助才能看到 

例:

const MeshBasicMaterial=new THREE.MeshPhongMaterial()   //镜面反射材料
 
 
//光
const ambientLight=new THREE.AmbientLight(0xffffff,0.5)    //环境光
sence.add(ambientLight)
const pointLinght=new THREE.PointLight(0xffffff,0.5)
pointLinght.position.x=2;
pointLinght.position.y=3;
pointLinght.position.z=4;
sence.add(pointLinght)
colorTexture.minFilter=THREE.NearestFilter

 六、MeshToonMaterial卡通材质

Constructor MeshToonMaterial( parameters : Object ) parameters - (optional) an object with one or more properties defining the material's appearance. Any property of the material (including any property inherited from Material) can be passed in here. The exception is the property color, which can be passed in as a hexadecimal string and is 0xffffff (white) by default. Color.set( color ) is called internally.

构造器 MeshToonMaterial(参数:对象) 参数-(可选)具有一个或多个定义材料外观的属性的对象。材料的任何属性(包括从材料继承的任何属性)都可以在这里传入。 属性color是个例外，它可以作为十六进制字符串传入，默认情况下是0xffffff(白色)。内部调用Color.set( color)。

***需要灯光辅助 

例:

const MeshBasicMaterial=new THREE.MeshToonMaterial()   //卡通材料

 //添加灯光

const ambientLight=new THREE.AmbientLight(0xffffff,0.5)    //环境光
sence.add(ambientLight)
const pointLinght=new THREE.PointLight(0xffffff,0.5)
pointLinght.position.x=2;
pointLinght.position.y=3;
pointLinght.position.z=4;
sence.add(pointLinght)
colorTexture.minFilter=THREE.NearestFilter

.gradientMap : 梯度纹理贴图

Texture Gradient map for toon shading. It's required to set Texture.minFilter and Texture.magFilter to THREE.NearestFilter when using this type of texture. Default is null.

。梯度贴图:纹理 卡通阴影的渐变贴图。需要将Texture.minFilter和Texture.magFilter设置为三个。使用这种类型的纹理时使用NearestFilter。默认值为null

例:

纹理贴图

const MeshBasicMaterial=new THREE.MeshToonMaterial()   //卡通材料
const gradientsMesh=texture.load('/gradients/3.jpg')
gradientsMesh.minFilter=THREE.NearestFilter
gradientsMesh.magFilter=THREE.NearestFilter
MeshBasicMaterial.gradientMap=gradientsMesh

七、MeshStandardMaterial 标准材质

 A standard physically based material, using Metallic-Roughness workflow.

Physically based rendering (PBR) has recently become the standard in many 3D applications, such as Unity, Unreal and 3D Studio Max.

This approach differs from older approaches in that instead of using approximations for the way in which light    interacts with a surface, a physically correct model is used. The idea is that, instead of tweaking materials to look good under specific lighting, a material can    be created that will react 'correctly' under all lighting scenarios.

In practice this gives a more    accurate and realistic looking result than the MeshLambertMaterial or MeshPhongMaterial, at the cost of being somewhat more computationally expensive.

Shading is calculated in the same way as for the MeshPhongMaterial, using a Phong shading model. This calculates shading per pixel (i.e. in the fragment shader, AKA pixel shader) which gives more accurate results than the Gouraud model used by MeshLambertMaterial, at the cost of some performance.

Note that for best results you should always specify an environment map when using this material.

For a non-technical introduction to the concept of PBR and how to set up a PBR material, check out these articles by the people at marmoset:

Basic Theory of Physically Based Rendering
Physically Based Rendering and You Can Too
Technical details of the approach used in three.js (and most other PBR systems) can be found is this paper from Disney (pdf), by Brent Burley

一种基于物理的标准材料，使用金属粗糙度工作流。

基于物理的渲染（PBR）最近已成为许多3D应用程序的标准，如Unity、Unreal和3D Studio Max。

这种方法与旧方法的不同之处在于，它使用了一个物理上正确的模型，而不是对光与曲面的相互作用方式使用近似值。其想法是，可以创建一种在所有照明场景下都能“正确”反应的材质，而不是调整材质以使其在特定照明下看起来很好。

在实践中，与MeshLambertMaterial或MeshPhongMaterial相比，这会提供更精确、更逼真的结果，但代价是计算成本更高。

着色的计算方法与网格PhongMaterial相同，使用Phong着色模型。这会计算每像素的着色（即在片段着色器中，也称为像素着色器），这比MeshLambertMaterial使用的Gouraud模型提供更精确的结果，但会牺牲一些性能。

请注意，为了获得最佳效果，在使用此材质时应始终指定环境贴图。

要了解PBR概念的非技术性介绍以及如何建立PBR材料，请查看marmoset的人员撰写的以下文章：

基于物理绘制的基本理论

基于物理的渲染，您也可以

三个项目中使用的方法的技术细节。js（以及大多数其他PBR系统）是由Brent Burley从迪士尼（pdf）撰写的这篇论文

****需要灯光辅助才能看到形状 

例:

const MeshBasicMaterial=new THREE.MeshStandardMaterial();   //标准网格材质

 

.metalness : 金属光泽

Float How much the material is like a metal. Non-metallic materials such as wood or stone use 0.0, metallic use 1.0, with nothing (usually) in between. Default is 0.0. A value between 0.0 and 1.0 could be used for a rusty metal look. If metalnessMap is also provided, both values are multiplied.

。金属性:浮动 这种材料有多像金属。木材或石头等非金属材料使用0.0，金属材料使用1.0，中间(通常)没有任何东西。默认值为0.0。介于0.0和1.0之间的值可用于生锈的金属外观。如果还提供了metalnessMap，则两个值相乘。

.roughness : 粗糙度

Float How rough the material appears. 0.0 means a smooth mirror reflection, 1.0 means fully diffuse. Default is 1.0. If roughnessMap is also provided, both values are multiplied.

。粗糙度:浮动 材料看起来有多粗糙。0.0表示平滑的镜面反射，1.0表示完全漫反射。默认值为1.0。如果还提供了roughnessMap，则两个值相乘。

AOMap : 环境遮罩

什么是AO？

AO是一种阴影（shading）和渲染（rendering）方法，用于为对象提供全局背景（global background）或者间接（indirect）的阴影。

这个方法可以增加渲染的真实性，因为它会创建软的全局阴影（soft global shadow），让物体间的视觉区隔变得更加明显。

这是一个全局的方法。例如，对象的每个点的亮度依赖于在场景中的其他物体。

阴影（Shadow）不会保持黑色，他们消散（dissiplate），造成半色调（creating halftones）和让得到很少光线的地方模糊。

在大部分情况下，AO通过构造一个发射光线的半球（hemisphere）来计算。半球上表面布满朝各个方向发射的光线，然后判断这些光线是否与其它的物体相交。如果光线到达背景或者天空，那么就增加这个光线发出点的表面亮度，如果与其他物体相交，则不用。

这样一来，被大量几何遮挡的点会变暗，而少量被遮挡的点会变亮。

也就意味着，靠得非常近的物体之间的阴影效果会非常明显。

上面是AO的一个例子。我们可以看到，如果没有AO，整个场景感觉非常扁平（flatter），我们大脑潜意识根本获取不到场景的深度信息。

所以，AO主要目标是模拟和计算我们能直接看到那部分场景的阴影

Texture The red channel of this texture is used as the ambient occlusion map. Default is null. The aoMap requires a second set of UVs.

aoMap:纹理 该纹理的红色通道被用作环境遮挡贴图。默认值为null。aoMap需要第二组uv

 例: 

 
const colorTexture=texture.load('/door/color.jpg');
const doorAmbTexture=texture.load('/door/ambientOcclusion.jpg');
MeshBasicMaterial.map=colorTexture
MeshBasicMaterial.aoMap=doorAmbTexture
MeshBasicMaterial.aoMapIntensity=1

 

.aoMapIntensity :

Float Intensity of the ambient occlusion effect. Default is 1. Zero is no occlusion effect.

。aoMapIntensity : Float 环境遮挡效果的强度。默认值为1。零表示没有遮挡效果。

 

 DisplacementMap

Displacement Map（置换贴图，也叫移位贴图）可以改变模型对象的几何形状，因此在提供最真实的效果的同时也会大幅增加渲染性能的开销。

例:

 

 贴图

 

const doorHeightTexture=texture.load('/door/height.jpg')
MeshBasicMaterial.displacementMap=doorHeightTexture

 

MetalnessMap 光泽金属度贴图

Metallic（金属贴图）起到类似于蒙版的作用，区分固有色贴图中的金属和绝缘体数据。在金属性贴图中，0（黑色-0 sRGB）表示绝缘体，而1（白-255 sRGB）表示金属。在金属/粗糙度工作流中，BaseColor贴图实则包含了漫反射和高光贴图的信息。而Metallic贴图这决定了有多少BaseColor被解释为漫反射或者高光。

 

 

贴图 

const doorMetalnessTexture=texture.load('/door/metalness.jpg')
MeshBasicMaterial.metalness=1
MeshBasicMaterial.metalnessMap=doorMetalnessTexture

Roughness Map

Roughness的本质

我们首先思考，为什么物体的反射会有清晰与模糊的区别呢？

——因为微观结构。有的物体微观结构整齐，反射就清晰；有的物体微观结构凹凸不平，体现在宏观上的反射就模糊

关键词就是：微观、凹凸不平。

Bump也是凹凸贴图，是宏观的，肉眼立马可见的，Roughness也是凹凸贴图，不过是微观的，肉眼看到的微观凹凸不平，会转化成另外一个现象，叫粗糙度。其实本质是一回事。

专业解释一下，Roughness（粗糙度贴图）定义材质得粗糙度信息，0（黑色-0 sRGB）表示光滑，1（白-255 sRGB）表示粗糙。粗粗糙度是指造成光漫射的表面不规则状况，反射方向根据表面粗糙度自由变化。这改变了光的方向，但是光强度保持恒定不变。表面越粗糙，高光越散越暗。表面越光滑，高光反射集中，尽管反射的光的总量是一点的，表面也会更亮，光会更强。

粗糙度贴图采样得来的粗糙度数值会影响一个表面的微平面统计学上的取向度。一个比较粗糙的表面会得到更宽阔更模糊的镜面反射（高光），而一个比较光滑的表面则会得到集中而清晰的镜面反射。

 

 

 

 贴图

const doorRoughnessTexture=texture.load('/door/roughness.jpg')
MeshBasicMaterial.roughnessMap=doorRoughnessTexture
MeshBasicMaterial.roughness=0.2

 .normalMap 法线贴图

 

例:

const doorNormalTexture=texture.load('/door/normal.jpg')
MeshBasicMaterial.normalMap=doorNormalTexture
MeshBasicMaterial.normalScale.set(0.1,0.1);

 

.alphaMap : 透明度纹理

Texture The alpha map is a grayscale texture that controls the opacity across the surface (black: fully transparent; white: fully opaque). Default is null. Only the color of the texture is used, ignoring the alpha channel if one exists. For RGB and RGBA textures, the WebGL renderer will use the green channel when sampling this texture due to the extra bit of precision provided for green in DXT-compressed and uncompressed RGB 565 formats. Luminance-only and luminance/alpha textures will also still work as expected.

alphaMap:纹理 alpha贴图是一种灰度纹理，控制整个表面的不透明度(黑色:完全透明；白色:完全不透明)。默认值为null。 只使用纹理的颜色，忽略alpha通道(如果有的话)。对于RGB和RGBA纹理，由于在DXT压缩和未压缩的RGB 565格式中为绿色提供了额外的精度，因此WebGL渲染器在对此纹理进行采样时将使用绿色通道。仅亮度和亮度/alpha纹理也将按预期工作。

例:

const doorAlphaTexture=texture.load('/door/alpha.jpg')
MeshBasicMaterial.alphaMap=doorAlphaTexture
MeshBasicMaterial.transparent=true

  

 

 

贴图

CubeTextureLoader全景贴图

CubeTextureLoader Class for loading a CubeTexture. This uses the ImageLoader internally for loading files. Code Example const scene = new THREE.Scene(); scene.background = new THREE.CubeTextureLoader() .setPath( 'textures/cubeMaps/' ) .load( [ 'px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png' ] ); Examples materials / cubemap materials / cubemap / dynamic materials / cubemap / refraction Constructor CubeTextureLoader( manager : LoadingManager ) manager — The loadingManager for the loader to use. Default is THREE.DefaultLoadingManager. Creates a new CubeTextureLoader.

立方体纹理加载器 用于加载立方体纹理的类。这在内部使用ImageLoader来加载文件。 代码示例 const场景=新三。场景()； scene.background =新三。立方体纹理加载器() 。setPath('纹理/立方体贴图/') 。负载([ ' px.png '， ' nx.png ' py.png '， ny.png '， pz.png '， '新西兰.巴布亚新几内亚' ] ); 例子 材质/立方体贴图 材质/立方体贴图/动态 材质/立方体贴图/折射 构造器 CubeTextureLoader(管理器:LoadingManager) 管理器—供加载程序使用的加载管理器。默认值为三。 创建新的CubeTextureLoader。

 例:

const environmentMaps=new CubeTextureLoader().load([
    '/environmentMaps/0/px.jpg',
    '/environmentMaps/0/nx.jpg',
    '/environmentMaps/0/py.jpg',
    '/environmentMaps/0/ny.jpg',
    '/environmentMaps/0/pz.jpg',
    '/environmentMaps/0/nz.jpg'
]);
MeshBasicMaterial.envMap=environmentMaps

 

 最后:推荐比较好的全景贴图工具 及网站

全景贴图网站Poly HavenThe Public 3D Asset Libraryhttps://polyhaven.com/​​​​​​​