MeshPhongMaterial 网格Phong材质

—> Material

这是一种高光平滑材质. 基于 Blinn-Phong 模型, 以越南裔美国科学家 Bui Tuong Phong 裴祥风 ( 1942 ~ 1975 ) 命名. 它明显的接收光, 也反射光, 修改下面演示的 ambient light 和 emissive 便可看到了. 这种材质中的 shininess 和 specular 属性是区别于其他材质的特有属性, 它体现了物体的亮度, 光泽度, 把 shininess 调得越高, 便可看到反光的白色区域越明显. 而 specular 是高光颜色, 把它设置得跟 color 接近, 或差别大, 可得到类似于玉石、珍珠、珐琅、玻璃、塑料等不同材质的外表.

function MeshPhongMaterial( parameters ) { } var geometry = new THREE.BoxGeometry(6, 6, 6), material = new THREE.MeshPhongMaterial({color: 0xb180e3}), mesh = new THREE.Mesh(geometry, material); scene.add(mesh);

Attributes

type : String

Default value : 'MeshPhongMaterial'
Description : 类型

alphaMap : Texture

Default value : null
Description : 透明贴图.

aoMap : Texture

Default value : null
Description : 环境遮挡贴图 ( AO贴图: Ambient occlusion map ).

aoMapIntensity : Float ( 0 ~ 1 )

Default value : 1
Description : 环境遮挡贴图强度.

bumpMap : Texture

Default value : null
Description : 凹凸贴图; 表面反射效果.

bumpScale : Float

Default value : 1
Description : 凹凸系数

color : Color

Default value : 0xffffff
Description : 材质的颜色.

combine : Integer ( THREE.MultiplyOperation, THREE.MixOperation, THREE.AddOperation )

Default value : THREE.MultiplyOperation
Description : 如何将表面颜色与环境贴图结合起来.

displacementMap : Texture

Default value : null
Description : 位移贴图 ( 置换贴图 ).

displacementScale : Float

Default value : 1
Description : 位移比例系数.

displacementBias : Float

Default value : 0
Description : 位移偏差

emissive : Color

Default value : 0xffffff
Description : 发射出的颜色.

emissiveMap : Texture

Default value : null
Description : 自发光贴图.

emissiveIntensity : Float

Default value : 1.0
Description : 发射强度.

envMap : TextureCube

Default value : null
Description : 环境贴图.

envMapIntensity : Float

Default value : 1
Description : 环境贴图强度.

lightMap : Texture

Default value : null
Description : 光照贴图.

lightMapIntensity : Float

Default value : 1.0
Description : 光照贴图强度.

map : Texture

Default value : null
Description : 颜色贴图.

morphNormals : Boolean

Default value : false
Description : 变形法线.

morphTargets : Boolean

Default value : false
Description : 是否使用变形目标.

normalMap : Texture

Default value : null
Description : 法线贴图

normalMapType : Interger

Default value : THREE.TangentSpaceNormalMap
Description : 法线贴图种类

normalScale : Vector2

Default value : new Vector2( 1, 1 )
Description : 法线缩放

refractionRatio : Float ( 0 ~ 1 )

Default value : 0.98
Description : 折射率.

shininess : Float

Default value : 30
Description : 亮度, 光泽度.

specular : Color

Default value : 0x111111
Description : 高光颜色.

specularMap : Texture

Default value : null
Description : 高光贴图.

wireframe : Boolean

Default value : false
Description : 是否把模型渲染为线框. 默认是 false, 渲染为平面多边形.

wireframeLinewidth : Float

Default value : 1
Description : 线框线宽.

wireframeLinecap : String ( "butt", "round", "square" )

Default value : 'round'
Description : 线端点样式. WebGL 不支持, 但 Canvas 有效.

wireframeLinejoin : String ( "round", "bevel", "miter" )

Default value : 'round'
Description : 线连接点样式. WebGL 不支持, 但 Canvas 有效.

图解API

1. 只有贴图 map 和贴了 specularMap,normalMap 的区别

添加了法线贴图 normalMap, 可大大增强了立体感, 感觉山脉是凸出来的. 点开查看

const loader = new THREE.TextureLoader(); const texture = loader.load('---.jpg'); const specularTexture = loader.load('---.jpg'); const normalTexture = loader.load('---.jpg'); const material = new THREE.MeshPhongMaterial({ specular: 0x333333, shininess: 15, map: texture, specularMap: specularTexture, normalMap: normalTexture, normalScale: new THREE.Vector2( 0.85, 0.85 ) });