three.js 04-04 之 MeshNormalMaterial 材質

本篇將要介紹的這個 MeshNormalMaterial 網格法向量材質，是一種比較特殊的材質。它使得物體的每一個面的顏色都從該面向外指的法向量計算得到的。所謂法向量是指與面垂直的向量。法向量在 three.js 庫中有着廣泛的應用。它可以用來決定光的反射方向，在三維物體上映射材質時起到輔助作用。還可以在計算光照、陰影時提供有用信息，從而爲物體表面像素上色。

想要理解 MeshNormalMaterial 材質，最直觀的就是先來看一個具體的示例，完整代碼如下：

<!DOCTYPE html>
<html>
<head>
    <title>示例 04.04 - MeshNormalMaterial</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="../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 sphere;
	var plane;
	var activeMesh;
	
	var meshMaterial;
	
	var ambientLight;

    $(function() {
		stats = initStats();
		scene = new THREE.Scene();
		
		webglRender = new THREE.WebGLRenderer( {antialias: true, alpha: true} ); // antialias 抗鋸齒
		webglRender.setSize(window.innerWidth, window.innerHeight);
		webglRender.setClearColor(0x000000, 1.0);
		//webglRender.shadowMap.enabled = true; // 允許陰影投射
		render = webglRender;
		
		camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 30, 1000); // 2147483647
		camera.position.set(-50, 40, 50);
		
		var target = new THREE.Vector3(0, 0 , 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);
		
		ambientLight = new THREE.AmbientLight(0x000000);
		scene.add(ambientLight);
		
		// 加入一個平面
		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, sphere, plane
        var cubeGeometry = new THREE.BoxGeometry(15, 15, 15);
		var sphereGeometry = new THREE.SphereGeometry(14, 20, 20);
        var planeGeometry = new THREE.PlaneGeometry(14, 14, 4, 4);

		// 網格法向量材質不支持 color 屬性
        meshMaterial = new THREE.MeshNormalMaterial({flatShading: true});
        cube = new THREE.Mesh(cubeGeometry, meshMaterial);
        sphere = new THREE.Mesh(sphereGeometry, meshMaterial);
        plane = new THREE.Mesh(planeGeometry, meshMaterial);

        cube.position.set(0, 12, 2);
        sphere.position.set(0, 14, 2);
        plane.position.set(0, 12, 2);
		
		/** 用來保存那些需要修改的變量 */
		guiParams = new function() {
			this.rotationSpeed = 0.02;
			this.opacity = meshMaterial.opacity;
			this.transparent = meshMaterial.transparent;
			this.wireframe = meshMaterial.wireframe;
			this.wireframeLinewidth = meshMaterial.wireframeLinewidth;
			this.visible = meshMaterial.visible;
			this.side = 'front';
			this.flatShading = meshMaterial.flatShading;
			this.selectedMesh = 'cube';
			this.arrows = false;
			
			this.addMesh = function(e) {
				scene.remove(activeMesh);

				switch (e) {
					case "cube":
						activeMesh = cube;
						break;
					case "sphere":
						activeMesh = sphere;
						break;
					case "plane":
						activeMesh = plane;
						break;
				}
				scene.add(activeMesh);
			};
			this.addArrows = function(needsArrows) {
				activeMesh.children = [];
				if (!needsArrows) return;
				for (var f = 0, fl = activeMesh.geometry.faces.length; f < fl; f++) {
					var face = activeMesh.geometry.faces[f];
					var centroid = new THREE.Vector3(0, 0, 0);
					centroid.add(activeMesh.geometry.vertices[face.a]);
					centroid.add(activeMesh.geometry.vertices[face.b]);
					centroid.add(activeMesh.geometry.vertices[face.c]);
					centroid.divideScalar(3);

					var arrow = new THREE.ArrowHelper(
							face.normal,
							centroid,
							2,
							0x3333FF,
							0.5,
							0.5);
					activeMesh.add(arrow);
				}
			};
		}
		/** 定義 dat.GUI 對象，並綁定 guiParams 的幾個屬性 */
		var gui = new dat.GUI();
		var folder = gui.addFolder('Mesh');
		folder.open();
		folder.add(guiParams, 'opacity', 0.1, 1.0).onChange(function(e) {
			meshMaterial.opacity = e;
		});
		folder.add(guiParams, 'transparent').onChange(function(e) {
			meshMaterial.transparent = e;
		});
		folder.add(guiParams, 'wireframe').onChange(function(e) {
			meshMaterial.wireframe = e;
		});
		folder.add(guiParams, 'wireframeLinewidth', 1, 20).onChange(function(e) {
			meshMaterial.wireframeLinewidth = e;
		});
		folder.add(guiParams, 'visible').onChange(function(e) {
			meshMaterial.visible = e;
		});
		folder.add(guiParams, 'side', ['front', 'back', 'double']).onChange(function(e) {
			console.log(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, 'flatShading').onChange(function(e) {
			meshMaterial.flatShading = e;
            meshMaterial.needsUpdate = true;
		});
		folder.add(guiParams, 'selectedMesh', ['cube', 'sphere', 'plane']).onChange(function(e) {
			guiParams.addMesh(e);
			guiParams.addArrows(guiParams.arrows);
		});
		folder.add(guiParams, 'arrows').onChange(function(e){
			guiParams.addArrows(e);
		});
		
		guiParams.addMesh(guiParams.selectedMesh);
		
		renderScene();
    });
	
	/** 渲染場景 */
	function renderScene() {
		stats.update();
		rotateMesh(); // 旋轉物體
		
		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 rotateMesh() {
		scene.traverse(function(mesh) {
			if (mesh instanceof THREE.Mesh && mesh != ground) {
				//mesh.rotation.x += guiParams.rotationSpeed;
				mesh.rotation.y += guiParams.rotationSpeed;
				//mesh.rotation.z += guiParams.rotationSpeed;
			}
		});
	}

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

以上示例運行效果如下所示：

在此示例中，因爲法向量所指的方向決定了每個面從 MeshNormalMaterial 材質獲取的顏色，又由於球體各個面的法向量都不相同，所以我們看到的是一個色彩斑斕的球體。

另外，在本示例中我們爲了表示每個面的法向量，特意爲每個面添加了一個箭頭，這個可以通過使用 THREE.ArrowHelper 對象實現，具體可參考示例中的 guiParams 裏的 addArrows() 函數實現。

關於 MeshNormalMaterial 還有一個 flatShading 屬性需要提一下。通過此屬性，我們可以告訴 three.js 庫如何渲染物體。如果把此屬性設置爲 true，那麼每個平面從 MeshNormalMaterial 材質上獲取到什麼顏色就會直接渲染成什麼顏色，就如上圖所示的那樣，球體上的每一個小面片都顯示的格外鮮明；相反，如果把 flatShading 設置成 false 的話，那麼整個物體的表面就會變得光滑。讀者可以通過右上角的下來菜單親自去試驗一下，調整爲不同參數值的情況下的展示效果。

未完待續···

three.js 04-04 之 MeshNormalMaterial 材質

EXCEL中下拉菜單中添加新選項或者刪除選項

號稱能打敗MLP的KAN到底行不行？數學核心原理全面解析

同事使用 insert into select 遷移數據，開開心心上線，上線後被公司開除！

Git使用經驗總結5-修改提交信息

Python 爬蟲：Spring Boot 反爬蟲的成功案例

京東科技數字化營銷能力的演進與最佳實踐| 京東雲技術團隊

Git使用經驗總結4-撤回上一次本地提交

Java中止線程的方式

壓榨數據庫的真實處理速度

[轉帖]Oracle Exadata 學習筆記之核心特性Part1

three.js 04-10 之 LineDashedMaterial 材質

three.js 05-08 之 TorusKnotGeometry 幾何體

three.js 04-04 之 MeshNormalMaterial 材質

three.js 05-04 之 BoxGeometry 幾何體

three.js 05-03 之 ShapeGeometry 幾何體

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結