ThreeJs 认识材质

4,094 阅读1分钟

一、前言

材质和纹理有那么一点微妙的关系,纹理决定了物体的表面,而材质则决定了物体的“气质”,比如说,反射度,光滑度,金属感,塑料感或者玻璃的模仿等。当然,在 ThreeJs 中,纹理想要被展示出来是要被依附在材质中的。

二、概述

ThreeJs 中定义了非常丰富的材质,其类图如下。

图片描述

从类图上看,定义了非常多的材质。

三、认识材质

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 );

图片描述

四、总结

ThreeJs 的内置材质非常的多,项目里可以根据需要来实际使用。如果内置的不能满足则使用 ShaderMaterial 来实现自定义的 Material。