three.js材质二

ThreeJS的材质分为：基础材质、深度材质、法向量材质、琥珀材质、冯氏材质、标准材质、着色器材质、基础线材质以及虚线材质。

本期介绍下基础材质、琥珀材质、着色器材质⬇

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。

举例：

var component.material = new THREE.MeshBasicMaterial({
    color: [0.5, 0.5, 0.5]
});
效果如下：



MeshLambertMaterial 琥珀材质

定义：晶体结构非晶质，成分有机植物树脂混合物，硬度2. 5，折射率1.54—1.55 ，具有树脂光泽。

特点：适用于暗淡、不光亮表面，会对光源产生反应。

构造：

var meshMaterial = new THREE.MeshLamberMaterial()
属性：ambient（环境色）emissive（发射颜色）

举例：

var component.material = new THREE.MeshLambertMaterial({
    color: [0.5, 0.5, 0.5]
});
效果如下：



ShaderMaterial 着色器材质

定义：是一种计算机程序，处理CG特效、进行与浓淡处理无关的影片后期处理

特点：自定义的着色器渲染材料，使用GLSL语言编写可自定义着色器，直接在WebGL环境中运行。

属性：fragmentShader（传入像素的颜色）vertexShader（传入顶点的位置）uniform（向着色器发送信息）defines（设置全局变量）attributes（修改顶点和片段）lights（光照）。

举例：

var material = new THREE.ShaderMaterial({
    "uniforms": {
        "time": {
            "value": 1.0
        },
        "resolution": {
            "value": newTHREE.Vector2()
        },
        "attributes": {
            "vertexOpacity": {
                "value": []
            }
        },
        "vertexShader": document.getElementById('vertexShader').textContent,
        "fragmentShader": document.getElementById('fragmentShader').textContent
    }
});
Notes：RawShaderMaterial原始着色器材料，与ShaderMaterial类似，但内置的uniforms和attributes定义不会自动添加到GLSL着色器代码。


MeshDepthMaterial 深度材质

定义：一种简单的材质，此材质不考虑场景中光照的影响。
特点：外观不是由光照和材质决定的，而是由物体到相机的距离决定的。

构造：

var depthMaterial  = new THREE.MeshDepthMaterial()
属性：wireframe（显示线框） wireframeLinewidth（线框宽度）。

举例：

var component.material = new THREE.MeshDepthMaterial({
    color: [0.5, 0.5, 0.5]
});
效果如下：



MeshPhongMaterial 冯氏材质

特点：光亮材质。

构造：

var meshMaterial = 
new.THREE.MeshPhongMaterial()
属性：ambient（环境色）emissive（发射颜色）specular（高光颜色） shininess（高光亮度，默认30）

举例：

var component.material = new THREE.MeshPhongMaterial({
    "color": [0.5, 0.5, 0.5],
    "specular": [0.5, 0.5, 0.5]
});
效果如下：



Notes：将specular属性设置成和材质color一样的颜色有类似金属的效果；将specular属性设置成灰色会有类似塑料的效果。

LineBasicMaterial 基础线材质

特点：用于THREE,Line的简单线性材质。

属性：color（颜色）linewidth（线宽）Linecap（端点如何显示）LineJoin（连接点如何显示）vertexColors（顶点颜色）fog（是否受雾化效果影响）。

举例：

var material = new THREE.LineBasicMaterial({
    opacity: 1.0,
    linewidth: 1,
    vertexColors: THREE.VertexColors
});
  
本文摘自 https://zhuanlan.zhihu.com/p/100241366

 



     返回顶部