ThreeJs 认识材质

一、前言

材质和纹理有那么一点微妙的关系，纹理决定了物体的表面，而材质则决定了物体的“气质”，比如说，反射度，光滑度，金属感，塑料感或者玻璃的模仿等。当然，在 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。