three.js 04-01 之 MeshBasicMaterial 材质

程序员文章站 2022-06-11 11:37:23

...

前面我们用了六篇文章分别介绍了 three.js 中的各种光源。从本篇开始，我们将深入探讨一下 three.js 中各种常用材质。大体有如下表所示几种常用的材质：

名称	描述
MeshBasicMaterial （网格基础材质）	基础材质，可以用它赋予几何体一种简单的颜色，或者显示几何体的线框
MeshDepthMaterial （网格深度材质）	根据网格到相机的距离，这种材质决定如何给网格染色
MeshNormalMaterial （网格法向材质）	这是一种简单的材质，根据物体表面的法向向量计算颜色
MeshLambertMaterial （网格朗伯材质）	这种材质会考虑光照的影响，可以用来创建颜色暗淡的、不光亮的物体
MeshPhongMaterial （网格 Phong 式材质）	这种材质也会考虑光照的影响，并且可以用来创建光亮的物体
ShaderMaterial （着色器材质）	这种材质允许使用自定义的着色器程序，直接控制顶点的放置方式，以及像素的这色方式
LineBasicMaterial （直线基础材质）	这种材质可以用于 THREE.Line （直线）几何体，从而创建着色的直线。
LineDeshedMaterial （虚线材质）	跟直线基础材质一样，不过可以用来创建一种虚线效果

这些材质都有一些共同的属性。对此，我们把这些属性分成了三类：

基础属性：这些属性是最常用的。通过这些属性可以控制物体的透明度、可见性以及如何引用物体（通过 uuid 或自定义名称 name）；
融合属性：每个物体都有一系列的融合属性。这些属性决定物体如何与背景融合；
高级属性：有一些高级属性可以控制 WebGL 上下文渲染物体的方法。大多数情况下都不会用到这些属性；

THREE.Material 类的基础属性，如下表所示：

属性	描述
id （标识符）	用来标识材质，在创建时赋值
name （名称）	可以通过此属性赋予材质名称
opacity （透明度）	定义物体有多透明。与属性 transparent 一起使用才有效。取值范围是 0~1
transparent （是否透明）	决定物体是否透明。如果设为 true，three.js 就会根据 opacity 的值来渲染物体；否则，这个物体就不透明
overdraw （过度绘制）	当采用 THREE.CanvasRenderer （画布渲染器）进行渲染时，多边形会被渲染得稍大一点。即当使用这个渲染器画出来的物体有缝隙时，可以将此属性设置为 true
visible （可见性）	定义此材质是否可见。设为 false 时，那么在场景中就看不到该物体
side （侧面）	通过此属性，可以决定在几何体的哪一面应用该材质。默认是 THREE.FrontSide （前面或外面）；还有 THREE.BackSide （后面或里面）；以及 THREE.DoubleSide （双面或双侧）
needsUpdate （需要刷新）	对于材质的某些修改，需要告诉 three.js 材质已经改变了。如果这个属性设为 true，three.js 就会使用修改后的材质属性刷新它的缓存

材质还有几个跟融合相关的一般属性，如下表所示：

名称	描述
blending （融合）	决定物体上的材质如何跟背景融合。融合模式一般是 NormalBlending，在这种模式下只显示材质的上层
blendsrc （融合源）	除了使用标准融合模式外，还可以通过指定 blendsrc、blenddst 及 blendequation 三个属性来创建自定义的融合模式。此属性指定物体（源）如何跟背景（目标）相融合。默认值是 SrcAlphaFactor，即用 alpha（透明度）通道进行融合
blenddst （融合目标）	此属性定义融合时如何使用背景（目标），默认是 OneMinusSrcAlphaFactor，其含义是：目标也使用源的 alpha 通道进行融合，只是用的值是 1 （源的 alpha 通道值）
blendingequation （融合公式）	指定如何使用 blendsrc 和 blenddst 的值。默认方法是 AddEquation，即将两者颜色的值相加。使用这三个属性，就可以创建自定义的融合模式

最后，材质还有另外一些不常用到的高级属性，这跟 WebGL 内部如何工作相关。想要了解这些，最好就是通过 OpenGL 规范进行了解。因此，我们将不会深入讨论这些属性，包括：depthTest （深度测试）、depthWrite（深度缓存）、polygonOffset、polygonOffsetFactor、polygonOffsetUnits 及 alphaTest （透明度通道测试）等等。

接下来，我们先探讨一下 three.js 中比较简单的 MeshBasicMaterial 材质。这种材质不考虑光照的影响。该材质除了那些共有属性之外，通常还可以设置下面这些属性：

属性	描述
color （颜色）	设置材质的颜色
wireframe （线框）	当此属性设为 true 时，物体将显示为线框。这对调试非常有利
wireframeLinewidth （线框宽度）	线框模式下，此属性设置线框的宽度。WebGLRenderer 不支持该属性
wireframeLinecap （线框端帽）	此属性定义线框模式下，顶点间线段的断点如何显示。可选的值有 round（圆）、butt（平）和square（方）三种。默认是 round。对于这个属性的修改结果在实际使用中很难看出来。WebGLRenderer 不支持该属性
wireframeLinejoin （线框连接）	此属性定义线框模式下，线段的连接点如何显示。可选的值有 round（圆）、bevel（斜角）和 miter（尖角）三种。默认是 round。WebGLRenderer 不支持该属性
shading （着色）	此属性定义如何着色。可选的值有 THREE.SmoothShading 和 THREE.FlatShading 两种
vertexColors （顶点颜色）	可以通过此属性为每一个顶点定义不同的颜色。CanvasRenderer 不支持该属性
fox （雾化）	此属性指定当前材质是否会受全局雾化效果设置的影响。如果设置成 false，那么全局的雾化效果设置就不会影响当前物体的渲染

好了，对于网格基础材质来说，大体上就是这些东西了，下面我们来看一个完整的示例，代码如下：

<!DOCTYPE html>
<html>
<head>
    <title>示例 04.01 - MeshBasicMaterial</title>
	<script src="../build/three.js"></script>
	<script src="../build/js/controls/OrbitControls.js"></script>
	<script src="../build/js/libs/stats.min.js"></script>
	<script src="../build/js/libs/dat.gui.min.js"></script>
	<script src="../build/js/renderers/CanvasRenderer.js"></script>
	<script src="../build/js/renderers/Projector.js"></script>
	<script src="../jquery/jquery-3.2.1.min.js"></script>
    <style>
        body {
            /* 设置 margin 为 0，并且 overflow 为 hidden，来完成页面样式 */
            margin: 0;
            overflow: hidden;
        }
		/* 统计对象的样式 */
		#Stats-output {
			position: absolute;
			left: 0px;
			top: 0px;
		}
    </style>
</head>
<body>

<!-- 用于 WebGL 输出的 Div -->
<div id="webgl-output"></div>
<!-- 用于统计 FPS 输出的 Div -->
<div id="stats-output"></div>

<!-- 运行 Three.js 示例的 Javascript 代码 -->
<script type="text/javascript">

	var scene;
	var camera;
	var render;
	var webglRender;
	var canvasRender;
	var controls;
	var stats;
	var guiParams;
	
	var ground;
	var cube;
	var plane;
	var sphere;
	
	var meshMaterial;
	
	var ambientLight;
	var spotLight;

    $(function() {
		stats = initStats();
		scene = new THREE.Scene();
		
		webglRender = new THREE.WebGLRenderer( {antialias: true, alpha: true} ); // antialias 抗锯齿
		webglRender.setSize(window.innerWidth, window.innerHeight);
		webglRender.setClearColor(0xEEEEEE, 1.0);
		webglRender.shadowMap.enabled = true; // 允许阴影投射
		
		canvasRender = new THREE.CanvasRenderer();
		canvasRender.setSize(window.innerWidth, window.innerHeight);
		
		render = webglRender;
		
		camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 2147483647); // 2147483647
		camera.position.set(-20, 50, 40);
		
		var target = new THREE.Vector3(10, 10 , 0);
		controls = new THREE.OrbitControls(camera, render.domElement);
		controls.target = target;
		camera.lookAt(target);
		
		$('#webgl-output')[0].appendChild(render.domElement);
		window.addEventListener('resize', onWindowResize, false);
		
		scene.add(new THREE.AxesHelper(20));// 加入坐标轴
		
		// 加入一个平面
		var groundGeometry = new THREE.PlaneGeometry(100, 100, 4, 4);
		var groundMaterial = new THREE.MeshBasicMaterial({color: 0x777777});
		ground = new THREE.Mesh(groundGeometry, groundMaterial);
		ground.rotation.set(-0.5 * Math.PI, 0, 0); // 沿着 X轴旋转-90°
		scene.add(ground);
		
		// 定义 cube、plane、sphere 几何
		var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);
		var planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4);
		var sphereGeometry = new THREE.SphereGeometry(14, 20, 20);
		
		// 定义网格材质
		meshMaterial = new THREE.MeshBasicMaterial({color: 0x7777ff, opacity: 0.8, wireframeLinewidth: 20});
		
		// 定义 cube、plane、sphere 网格
		cube = new THREE.Mesh(cubeGeometry, meshMaterial);
		plane = new THREE.Mesh(planeGeometry, meshMaterial);
		sphere = new THREE.Mesh(sphereGeometry, meshMaterial);
		var meshPosition = new THREE.Vector3(0, 7, 7);
		cube.position.set(meshPosition.x, meshPosition.y, meshPosition.z);
		plane.position.set(meshPosition.x, meshPosition.y, meshPosition.z);
		sphere.position.set(meshPosition.x, meshPosition.y, meshPosition.z);
		cube.name = 'addedMesh';
		plane.name = 'addedMesh';
		sphere.name = 'addedMesh';
		// 默认加入 cube
		scene.add(cube);
		
		// 加入一个环境灯
		ambientLight = new THREE.AmbientLight(0x0c0c0c);
		scene.add(ambientLight);
		
		// 加入一个聚光灯
		spotLight = new THREE.SpotLight(0xcccccc, 0.3);
        spotLight.position.set(-40, 60, -10);
		spotLight.castShadow = true;
        spotLight.target = ground;
        scene.add(spotLight);
		
		/** 用来保存那些需要修改的变量 */
		guiParams = new function() {
			this.rotationSpeed = 0.02;
			
			this.color = '#7777ff';
			this.side = 'front';
			this.selectedMesh = 'cube';
			this.switchRender = function() {
				if (render instanceof THREE.WebGLRenderer) {
					render = canvasRender;
				} else {
					render = webglRender;
				}
				$('#webgl-output').empty();
				$('#webgl-output')[0].appendChild(render.domElement);
				controls = new THREE.OrbitControls(camera, render.domElement);
			};
			this.wireframeLinejoin = 'round';
			this.wireframeLinecap = 'round';
		}
		/** 定义 dat.GUI 对象，并绑定 guiParams 的几个属性 */
		var gui = new dat.GUI();
		var folder = gui.addFolder("Mesh");
		folder.open();
		folder.addColor(guiParams, 'color').onChange(function(e) {
			meshMaterial.color = new THREE.Color(e);
		});
		folder.add(meshMaterial, 'opacity', 0.0, 1.0);
		folder.add(meshMaterial, 'transparent');
		folder.add(meshMaterial, 'wireframe');
		folder.add(meshMaterial, 'visible');
		folder.add(guiParams, 'side', ['front', 'back', 'double']).onChange(function(e) {
			switch (e) {
				case 'front':
					meshMaterial.side = THREE.FrontSide;
					break;
				case 'back':
					meshMaterial.side = THREE.BackSide;
					break;
				case 'double':
					meshMaterial.side = THREE.DoubleSide;
					break;
			}
			meshMaterial.needsUpdate = true;
		});
		folder.add(guiParams, 'selectedMesh', ['cube', 'plane', 'sphere']).onChange(function(e) {
			scene.remove(scene.getObjectByName('addedMesh'));
			switch (e) {
				case 'cube':
					scene.add(cube);
					break;
				case 'plane':
					scene.add(plane);
					break;
				case 'sphere':
					scene.add(sphere);
					break;
			}
		});
		
		gui.add(guiParams, 'switchRender');
		
		folder = gui.addFolder("CanvasRenderer");
		folder.open();
		folder.add(meshMaterial, 'overdraw');
		folder.add(meshMaterial, 'wireframeLinewidth', 1.0, 20.0);
		folder.add(guiParams, 'wireframeLinejoin', ['round', 'bevel', 'miter']).onChange(function(e) {
			meshMaterial.wireframeLinejoin = e;
			//meshMaterial.needsUpdate = true; // 无需更新即可生效
		});
		folder.add(guiParams, 'wireframeLinecap', ['round', 'butt', 'square']).onChange(function(e) {
			meshMaterial.wireframeLinecap = e;
			//meshMaterial.needsUpdate = true; // 无需更新即可生效
		});
		
		renderScene();
    });
	
	/** 渲染场景 */
	function renderScene() {
		stats.update();
		rotateAddedMesh(); // 旋转已加入场景的物体
		
		requestAnimationFrame(renderScene);
		render.render(scene, camera);
	}
	
	/** 初始化 stats 统计对象 */
	function initStats() {
		stats = new Stats();
		stats.setMode(0); // 0 为监测 FPS；1 为监测渲染时间
		$('#stats-output').append(stats.domElement);
		return stats;
	}
	
	/** 当浏览器窗口大小变化时触发 */
	function onWindowResize() {
		camera.aspect = window.innerWidth / window.innerHeight;
		camera.updateProjectionMatrix();
		render.setSize(window.innerWidth, window.innerHeight);
	}
	
	/** 旋转已加入场景的物体 */
	function rotateAddedMesh() {
		var addedMesh = scene.getObjectByName('addedMesh');
		//addedMesh.rotation.x += guiParams.rotationSpeed;
		addedMesh.rotation.y += guiParams.rotationSpeed;
		//addedMesh.rotation.z += guiParams.rotationSpeed;
	}

</script>
</body>
</html>

在这个例子中你可以尝试去改变各种不同的属性。特别注意的是 side 属性。通过这个属性可以指定在几何体的哪一个面上应用材质。如果我们选择 selectedMesh 为 plane （平面）网格的话，再尝试调整 side 这个属性，就能很容易检验该属性是如何起作用的。假设你把 side 设置成了 FrontSide，因为材质往往是附着在物体表面上的，所以当 plane 旋转时，会有一半的时间看不到它，原因是你看到的是它的背面。如果你把 side 设置成 DoubleSide，那么 plane 的两面都有材质，所以你始终都能看到它。

未完待续···

上一篇：云服务器(腾讯云)使用及项目部署参考1

下一篇： UE4 Runtime下导入IES贴图为TextureLightProfile

three.js 04-01 之 MeshBasicMaterial 材质

Three.js之MeshBasicMaterial材质与MeshPhongMaterial材质

three.js 04-01 之 MeshBasicMaterial 材质

28 - three.js 笔记 - MeshBasicMaterial 材质

Three.js之材质

three.js 04-09 之 LineBasicMaterial 材质

图形化开发（五）021-Three.js之材质——不受光影响-MeshBasicMaterial-同颜色&MeshNormalMaterial-方向不同颜色&LineBasicMaterial线条材质