ThreeJs 認識材質

1、前言

材質和紋理有那麼一點微妙的關係，紋理決定了物體的表面，而材質則決定了物體的「氣質」，好比說，反射度，光滑度，金屬感，塑料感或者玻璃的模仿等。固然，在 ThreeJs 中，紋理想要被展現出來是要被依附在材質中的。

2、概述

ThreeJs 中定義了很是豐富的材質，其類圖以下。

從類圖上看，定義了很是多的材質。

3、認識材質

1.Material

2.LineBasicMaterial

3.LineDashedMaterial

var material = new THREE.LineDashedMaterial( {
	color: 0xffffff,
	linewidth: 1,
	scale: 1,
	dashSize: 3,
	gapSize: 1,
} );
複製代碼

4.MeshBasicMaterial

5.MeshDepthMaterial

6.MeshLambertMaterial

7.MeshNormalMaterial

8.MeshPhongMaterial

9.MeshPhysicalMaterial

10.MeshStandardMaterial

11.MeshToonMaterial

12.PointsMaterial

13.RawShaderMaterial

var material = new THREE.RawShaderMaterial( {

    uniforms: {
        time: { value: 1.0 }
    },
    vertexShader: document.getElementById( 'vertexShader' ).textContent,
    fragmentShader: document.getElementById( 'fragmentShader' ).textContent,

} );
複製代碼

14.ShaderMaterial

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

} );
複製代碼

15.ShadowMaterial

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 );
複製代碼

16.SpriteMaterial

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 );
複製代碼

4、總結

ThreeJs 的內置材質很是的多，項目裏能夠根據須要來實際使用。若是內置的不能知足則使用 ShaderMaterial 來實現自定義的 Material。