ThreeJs 认识材质

发表于

一、前言

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

二、概述

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

图片描述

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

三、认识材质

1.Material

图片描述

2.LineBasicMaterial

图片描述

图片描述

3.LineDashedMaterial

图片描述

1
2
3
4
5
6
7
复制代码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

图片描述

1
2
3
4
5
6
7
8
9
复制代码var material = new THREE.RawShaderMaterial( {

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

} );

图片描述

14.ShaderMaterial

图片描述

1
2
3
4
5
6
7
8
9
10
11
12
13
14
复制代码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

图片描述

1
2
3
4
5
6
7
8
9
10
复制代码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

图片描述

1
2
3
4
5
6
7
8
复制代码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。

本文转载自: 掘金

开发者博客 – 和开发相关的 这里全都有

0%