三维模型材质了解一下

最新推荐文章于 2025-07-23 11:53:28 发布

原创最新推荐文章于 2025-07-23 11:53:28 发布 · 3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#材质 #法向量 #着色器 #虚线材质 #materrial

Three JS 专栏收录该内容

11 篇文章

订阅专栏

材质

材质的分类

材质的分类

【砖人专语】ThreeJS功能解读—材质

1. MeshBasicMaterial 基础材质

构造：

var basicMaterial = new THREE.MeshBasicMaterial ()

特点：简单的几何材料，不考虑光照的影响
属性（基础属性）：
color — 线条的十六进制颜色。缺省值为 0xffffff。
==map ===— 设置纹理贴图。缺省为null。
aoMap — 设置环境遮挡贴图（ao = ambient occlusion）。缺省为null。
aoMapIntensity — 设置环境遮挡贴图强度。缺省为1。
specularMap — 设置高光贴图。默认为null。
==alphaMap ==— 设置阿尔法贴图。默认为null。
==envMap ==— 设置环境贴图。默认为null。
combine — 设置组合操作。默认值为THREE.MultiplyOperation.
reflectivity — 设置反射率。默认值是 1.
refractionRatio — 设置折射率。默认值是 0.98.
fog — 定义材质颜色是否受全局雾设置的影响。默认是true。
shading — 定义着色类型。缺省为 THREE.SmoothShading。
wireframe — 渲染模型为线框。默认是false。
wireframeLinewidth — 线框线宽。默认是1。
wireframeLinecap — 定义线端的外观。默认值是 ‘round’.
wireframeLinejoin — 定义线连接节点的外观。默认值是 ‘round’.
vertexColors — 定义顶点如何着色。默认值是 THREE.NoColors.
skinning — 定义材料是否使用皮肤。默认值是false.
morphTargets — 定义材料是否使用 morphTargets。默认值是 false。
Eg:

component.material = new THREE.MeshBasicMaterial({
        color: [0.5,0.5,0.5],
      });

效果如下：

在这里插入图片描述

2. MeshDepthMaterial 深度材料

构造：

var depthMaterial = new THREE.MeshDepthMaterial()

特点：外观不是由光照和材质决定的，而是由物体到相机的距离决定的。
属性：
wireframe（显示线框） wireframeLinewidth（线框宽度）
Eg:

component.material = new THREE.MeshDepthMaterial({color: [0.5,0.5,0.5]});

效果如下：

在这里插入图片描述

3. MeshNormalMaterial 法向量材料

构造：

var normalMaterial = new THREE.MeshNormalMaterial()

特点：每个面的颜色是从该面向外指的法向量映射到RGB颜色上
属性：
wireframe（显示线框）wireframeLinewidth（线框宽度）
Shading：THREE.FlatShading 平面着色；THREE.SmoothShading 平滑着色
Eg:

component.material = new THREE.MeshNormalMaterial({color: [0.5,0.5,0.5]});

效果如下：
在这里插入图片描述

Notes:
可以通过THREE.ArrowHelper添加表示法向量的箭头

4. MeshLamberMaterial

构造：

var meshMaterial = new THREE.MeshLamberMaterial()

特点：适用于暗淡、不光亮表面，会对光源产生反应
属性：ambient（环境色），emissive（发射颜色）
Eg:

component.material = new THREE.MeshLambertMaterial({color: [0.5,0.5,0.5]});

效果如下：

在这里插入图片描述

5. MeshPhongMaterial

构造：

var meshMaterial = new.THREE.MeshPhongMaterial()

特点：光亮材质
属性：ambient（环境色），emissive（发射颜色），specular（高光颜色），shininess（高光亮度，默认30）
Eg:

component.material = new THREE.MeshPhongMaterial({
        color: [0.5,0.5,0.5],
        specular:[0.5,0.5,0.5],
});

效果如下：

在这里插入图片描述
Notes:
将specular属性设置成和材质color一样的颜色有类似金属的效果；将specular属性设置成灰色会有类似塑料的效果。

6. MeshStandardMaterial 标准材料

构造：

var meshMaterial = new.THREE.MeshStandardMaterial();

特点：基于物理的标准材料,在实践中，这提供了比MeshLambertMaterial或MeshPhongMaterial更准确和逼真的结果，代价是计算成本更高。
属性：

component.material = new THREE.MeshStandardMaterial({
    color: [0.5, 0.5, 0.5],
    metalness: 0.6 //  这种材料多少像金属一样。 非金属材料，如木材或石材，使用0.0，金属使用1.0。
    // 默认值为0.5。 0.0到1.0之间的值可用于生锈的金属外观。
});

效果如下：
在这里插入图片描述

7. ShaderMaterial 着色器材料

自定义的着色器渲染材料，使用GLSL语言编写可自定义着色器，直接在WebGL环境中运行。
属性：fragmentShader（传入像素的颜色）、vertexShader（传入顶点的位置）、uniform（向着色器发送信息）、defines（设置全局变量）、attributes（修改顶点和片段）、lights（光照）
Eg:

var material = new THREE.ShaderMaterial( { 
uniforms: { 
time: { value: 1.0 }, 
resolution: { value: new THREE.Vector2() } },
 attributes: { vertexOpacity: { value: [] } },
 vertexShader: document.getElementById( 'vertexShader' ).textContent, 
fragmentShader: document.getElementById( 'fragmentShader' ).textContent } );
//创建shaderMaterial

Notes：
RawShaderMaterial原始着色器材料，与ShaderMaterial类似，但内置的uniforms和attributes定义不会自动添加到GLSL着色器代码。

8. LineBasicMaterial 基础线材质

特点：用于THREE,Line的简单线性材质
属性：color（颜色）、linewidth（线宽）、Linecap（端点如何显示）、LineJoin（连接点如何显示）、vertexColors（顶点颜色）、fog（是否受雾化效果影响）
Eg:

var material = new THREE.LineBasicMaterial({
    opacity:1.0,
    linewidth:1,
    vertexColors: THREE.VertexColors
  });

9. LineDashedMaterial 虚线材质

属性：
scale（缩放比例）、dashSize（短划线的长度）、gapSize（间隔长度）
Eg:

Lines.computeLineDistance();   //显示间隔
Var material = new THREE.LineDashedMaterial({
vertexColors: true,
Color: 0xffffff,
dashSize: 10,
gapSize: 1,
Scale: 0.1
});

Notes：
（1）若要创建透明材质，不仅要设置opacity的值，还要将transparent属性设为true；
（2）还有一些较为少见的材质，such as⬇
PointsMaterial：点材料，粒子系统所使用的缺省材质
SpriteMaterial: 精灵材料，使用Sprite的材料
MultiMaterial: 多种材料，使用faces materialindex来决定哪个面使用哪个材料