Skip to content

Latest commit

 

History

History
96 lines (53 loc) · 5.02 KB

05 人物材质与贴图.md

File metadata and controls

96 lines (53 loc) · 5.02 KB

材质(Material)

材质种类

材质(material)是物体(object)表面除了几何体(geometry)以外所有可视属性的集合,像是颜色(color)、纹理(texture)、透明度(opacity)、发光度(shininess)、镜面反射程度(specular)等等。

一个以简单着色(平面或线框)方式来绘制几何体的材质。

赋予几何体一个简单的颜色,不考虑场景中光源的影响。

basicMat

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

透过法向量(与面垂直的向量)计算物体表面的颜色,也不受光源影响。

normalMat

一种非光泽表面的材质,没有镜面高光。

受光源影响,常用于创建暗淡不光亮的物体。

lambertMat

一种用于具有镜面高光的光泽表面的材质。

受光源影响,常用于创建光亮的物体。

phongMat

一种基于物理的标准材质。

基于PBR(Physically Based Rendering)计算出来的材质,透过更复杂的算法让物体更能反应在真实物理环境的外观。

standardMat

材质比较

基础材质

MeshBasicMaterialMeshNormalMaterial 主要被用在开发过程中的实验上,由于他们不受光源影响,可以在还没设置光源到场景中时,使用这两种材质测试物体是否能正确显示到画面中,或是在除错过程中能排除光源的问题,对材质进行测试。

高级材质

在案例中常会看到 MeshLambertMaterialMeshPhongMaterial,这两种材质都能与光源有互动,但两者根据不同的著色算法,会呈现不同的感觉,前者是较黯淡粗糙的塑胶感,后者则是较光亮平滑的金属感,主要的差异在于冯氏材质具有 镜面反射(specular) 这个属性,这个属性可以指定高光的反射颜色,让物体更具金属感。

而在查官网文件时,看到两个相对比较新的材质分别是 MeshStandardMaterialMeshPhysicalMaterial,比起朗伯特与冯氏只是透过近似值来模拟光与材质间的互动,MeshStandardMaterial使用更复杂的算法,让物体更具真实感,甚至可以设定金属感(metalness)与粗糙度(roughness)。

MeshPhysicalMaterial则是由前者延伸出来的材质,但多了一个 反射率(reflectivity)的属性,让调整的弹性更大。

材质属性

材质属性 说明
color 材质的颜色
transparent 是否透明,设为true后,可以依据opacity调整透明度
opacity 透明度,与transparent搭配使用,值从0到1
wireframe 设为true可将材质渲染成线框,适合拿来开发除错
side 决定几何体哪一面使用此材质,预设为THREE.FrontSide(外侧),另外也可以设定为THREE.BackSide(内侧)THREE.DoubleSide(两侧)
map 贴图属性,可透过 THREE.TextureLoader() 载入图片资源贴在几何体上。

材质的属性非常之多,这边只简单介绍每个材质共用且常见的几个,更高级的材质还可以设定像是反射率(specular)亮度(shininess)材质发散色彩(emissive)等等。

贴图

载入贴图

// 苦力怕脸部贴图
const headMap = new THREE.TextureLoader().load(
  'https://dl.dropboxusercontent.com/s/bkqu0tty04epc46/creeper_face.png'
)
// 苦力怕皮肤贴图
const skinMap = new THREE.TextureLoader().load(
  'https://dl.dropboxusercontent.com/s/eev6wxdxfmukkt8/creeper_skin.png'
)

首先为了让苦力怕更接近原作一些,稍后我们需要在材质中多加一个属性叫做map,这是另一个关于Texture(纹理)的概念,文字上看起来跟材质差不多,很容易混淆,但其实它只是Material 中的一个属性,是拿来作为贴图的,这边先做简单的载入贴图,其它进阶的应用如凹凸贴图、环境贴图等等。