一、前言
材质和纹理有那么一点微妙的关系，纹理决定了物体的表面，而材质则决定了物体的“气质”，比如说，反射度，光滑度，金属感，塑料感或者玻璃的模仿等。当然，在 ThreeJs 中，纹理想要被展示出来是要被依附在材质中的。
二、概述
ThreeJs 中定义了非常丰富的材质，其类图如下。
Material.jpg
从类图上看，定义了非常多的材质。
三、认识材质
1.Material
MaterialXmind.jpg
2.LineBasicMaterial
LineBasicMaterial.jpg
LineBasicMaterialSample.jpg
3.LineDashedMaterial
LineDashedMaterial.jpg
var material = new THREE.LineDashedMaterial( {
color: 0xffffff,
linewidth: 1,
scale: 1,
dashSize: 3,
gapSize: 1,
} );
LineDashedMaterialSample.jpg
4.MeshBasicMaterial
MeshBasicMaterial.jpg
MeshBasicMaterialSample.jpg
5.MeshDepthMaterial
MeshDepthMaterial.jpg
MeshDepthMaterialSample.jpg
6.MeshLambertMaterial
MeshLambertMaterial.jpg
MeshLambertMaterialSample.jpg
7.MeshNormalMaterial
MeshNormalMaterial.jpg
MeshNormalMaterialSample.jpg
8.MeshPhongMaterial
MeshPhongMaterial.jpg
MeshPhongMaterialSample.jpg
9.MeshPhysicalMaterial
MeshPhysicalMaterial.jpg
MeshPhysicalMaterialSample.jpg
10.MeshStandardMaterial
MeshStandardMaterial.jpg
MeshStandardMaterialSample.jpg
11.MeshToonMaterial
MeshToonMaterial.jpg
MeshToonMaterialSample.jpg
12.PointsMaterial
PointsMaterial.jpg
PointsMaterialSample.jpg
13.RawShaderMaterial
RawShaderMaterial.jpg
var material = new THREE.RawShaderMaterial( {
uniforms: {
time: { value: 1.0 }
},
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
} );
RawShaderMaterialSample.jpg
14.ShaderMaterial
ShaderMaterial.jpg
var material = new THREE.ShaderMaterial( {
uniforms: {
time: { value: 1.0 },
resolution: { value: new THREE.Vector2() }
},
vertexShader: document.getElementById( 'vertexShader' ).textContent,
fragmentShader: document.getElementById( 'fragmentShader' ).textContent
} );
ShaderMaterialSample.jpg
15.ShadowMaterial
ShadowMaterial.jpg
var planeGeometry = new THREE.PlaneGeometry( 2000, 2000 );
planeGeometry.rotateX( - Math.PI / 2 );
var planeMaterial = new THREE.ShadowMaterial();
planeMaterial.opacity = 0.2;
var plane = new THREE.Mesh( planeGeometry, planeMaterial );
plane.position.y = -200;
plane.receiveShadow = true;
scene.add( plane );
ShadowMaterialSample.jpg
16.SpriteMaterial
SpriteMaterial.jpg
var spriteMap = new THREE.TextureLoader().load( 'textures/sprite.png' );
var spriteMaterial = new THREE.SpriteMaterial( { map: spriteMap, color: 0xffffff } );
var sprite = new THREE.Sprite( spriteMaterial );
sprite.scale.set(200, 200, 1)
scene.add( sprite );
SpriteMaterialSample.jpg
四、总结
ThreeJs 的内置材质非常的多，项目里可以根据需要来实际使用。如果内置的不能满足则使用 ShaderMaterial 来实现自定义的 Material。
