WebGL three.js学习笔记 法向量网格材质MeshNormalMaterial的介绍和建立360度全景天空盒的方法

WebGL学习----Three.js学习笔记（5）

点击查看demo演示

Demo地址：https://nsytsqdtn.github.io/demo/360/360

简单网格材质 MeshNormalMaterial

MeshNormalMaterial是一种不受渲染时使用的颜色影响的材质，它只与本身每个面从内到外的法向量有关。法向量在webgl中用处十分普遍，光的反射，以及三维图形的纹理映射都与这个有关。

MeshNormalMaterial

从图中能够看到，网格的每一面渲染的颜色都是不同的，若是咱们想要在物体表面添加法向量，咱们可使用的THREE.ArrowHelper去表示每个法向量，它的参数为

THREE.ArrowHelper（dir, origin, length, color, headLength, headWidth）

其中参数的意义为： dir:方向,默认是法向量 origin:开始的坐标位置 length：辅助线的长度 color：辅助线的颜色 headLength：头部的长度 headWidth：头部的宽度

对于一个球体，要描述它每个面的法向量，首先须要对它的每个面进行遍历，取出这个面上的三个顶点（由于webgl的面都是三角形，因此是三个顶点），经过divideScalar(3)这个函数计算它的中心位置，咱们就能够在这个中心位置点上，从内向外引出一个ArrowHelper，来模拟法向量。

 1 for(let i=0;i<sphereGeometry.faces.length;i++){//在每个面上面循环
 2            let face = sphereGeometry.faces[i];//获得每一个面的对象
 3            let centroid = new THREE.Vector3();
 4            //先建立一个vector3对象，要使用这个对象找到每一个面的中心
 5            centroid.add(sphereGeometry.vertices[face.a]);
 6             // 将这该面的三个顶点的索引传给sphereGeometry.vertices找到其顶点的坐标
 7             //再添加进centroid
 8            centroid.add(sphereGeometry.vertices[face.b]);
 9            centroid.add(sphereGeometry.vertices[face.c]);
10            centroid.divideScalar(3);//三角形的中心点坐标
11            let arrow = new THREE.ArrowHelper(
12                face.normal,//face这个面的法向量
13                centroid,
14                2,
15                0xffcc55,
16                0.5,
17                0.5);//箭头辅助线，至关于把法向量用箭头表示出来
18            sphere.add(arrow);
19        }
复制代码

其中，centroid.add(sphereGeometry.vertices[face.a])这段代码中的sphereGeometry.vertices存有几何体的全部顶点信息，经过[ ]索引能够取得其中的某一个顶点。face.a还有下面的face.b和c都是该面的顶点索引号，表示这个面是由顶点编号为face.a，face.b，face.c的三个顶点所构成的一个三角形（webgl的面都是三角形），而后咱们再计算这三个顶点的中心点。

菜单面板的设置

在菜单面板中设置一些MeshNormalmaterial的一些属性，便于去测试这种材质的一些特质
其中：
this.visible = meshMaterial.visible;//是否可见 this.wireframe = meshMaterial.wireframe;//是否以线框的方式渲染物体 this.wireframeWidth = meshMaterial.wireframeLinewidth;//线框的宽度 this.transparent = meshMaterial.transparent;//是否透明 this.opacity = meshMaterial.opacity;//透明度，须要transparent为true才有效果 this.side = "front";//边的渲染方式，有三种，前面，后面，还有双面 this.selectMesh = "sphere";//当前选择的几何体 this.shading = "smooth";//着色方式，有平面着色和平滑着色，对一个面很平的几何体几乎看不出区别，如正方体

 1function initDatGUI() {
 2        //设置菜单中须要的参数
 3        controls = new function () {
 4            this.rotationSpeed = 0.02;
 5            this.visible = meshMaterial.visible;//是否可见
 6            this.wireframe = meshMaterial.wireframe;//是否以线框的方式渲染物体
 7            this.wireframeWidth = meshMaterial.wireframeLinewidth;//线框的宽度
 8            this.transparent = meshMaterial.transparent;//是否透明
 9            this.opacity = meshMaterial.opacity;//透明度，须要transparent为true才有效果
10            this.side = "front";//边的渲染方式，有三种，前面，后面，还有双面
11            this.selectMesh = "sphere";//当前选择的几何体
12            this.shading = "smooth";//着色方式，有平面着色和平滑着色，对一个面很平的几何体几乎看不出区别，如正方体
13        };
14        let gui = new dat.GUI();
15        //将刚刚设置的参数添加到菜单中
16        let F1 = gui.addFolder("Mesh");
17        F1.add(controls, "rotationSpeed", 0, 0.1);
18        F1.add(controls, "visible").onChange(function (e) {
19            meshMaterial.visible = e;
20        });
21        F1.add(controls, "wireframe").onChange(function (e) {
22            meshMaterial.wireframe = e;
23        });
24        F1.add(controls, "wireframeWidth",0,10).onChange(function (e) {
25            meshMaterial.wireframeWidth = e;
26        });
27        F1.add(controls, "transparent").onChange(function (e) {
28            meshMaterial.transparent = e;
29        });
30        F1.add(controls, "opacity",0,1).onChange(function (e) {
31            meshMaterial.opacity = e;
32        });
33        F1.add(controls, "side",["front","back","double"]).onChange(function (e) {
34            switch (e) {
35                case "front":
36                    meshMaterial.side = THREE.FrontSide;
37                    break;
38                case "back":
39                    meshMaterial.side = THREE.BackSide;
40                    break;
41                case "double":
42                    meshMaterial.side = THREE.DoubleSide;
43                    break;
44            }
45            meshMaterial.needsUpdate = true;//要在程序中让材质更新须要添加这一句话
46        });
47        F1.add(controls, "selectMesh",["sphere","cube","plane"]).onChange(function (e) {
48            //先把场景的物体清除，再来添加
49            scene.remove(cube);
50            scene.remove(sphere);
51            scene.remove(plane);
52            switch (e) {
53                case "sphere":
54                    scene.add(sphere);
55                    break;
56                case "cube":
57                    scene.add(cube);
58                    break;
59                case "plane":
60                    scene.add(plane);
61                    break;
62            }
63        });
64        F1.add(controls, "shading",["flat","smooth"]).onChange(function (e) {
65            switch (e) {
66                case "flat":
67                    meshMaterial.shading = THREE.FlatShading;
68                    break;
69                case "smooth":
70                    meshMaterial.shading = THREE.SmoothShading;
71                    break;
72            }
73            meshMaterial.needsUpdate = true;//要在程序中让材质更新须要添加这一句话
74        });
75    }
复制代码

注意在程序运行过程当中想要改变材质的属性，须要在改完之后，添加一句 meshMaterial.needsUpdate = true，这样才能更新成功。

360度全景背景

360度全景背景可以让人有身临其境的感受，全部这里的背景使用了全景背景

在这里插入图片描述

若是想要使用全景的背景，就须要6张6个方向的图片来合成一个完整的背景（也可使用1张6方向的图片），而后把这些贴图赋值给 scene.background

 1 let urls =[
 2            'image/posx.jpg',
 3            'image/negx.jpg',
 4            'image/posy.jpg',
 5            'image/negy.jpg',
 6            'image/posz.jpg',
 7            'image/negz.jpg'
 8        ];//引入6个方向的贴图
 9        let cubeMap = THREE.ImageUtils.loadTextureCube( urls );
10        scene = new  THREE.Scene();
11        scene.background = cubeMap;
复制代码

这些图片的须要按照顺序摆放，右左上下后前，不然背景会错乱。
这里给一个全景图片的网站，里面有不少的360度风景图，都是6张类型的，下载下来解压后就能够直接引入
http://www.humus.name/index.php?page=Textures

本例子的完整代码以下：

 1<!DOCTYPE html>
 2<html lang="en">
 3<head>
 4    <meta charset="UTF-8">
 5    <title>Depth Material Test</title>
 6    <script src="../../import/three.js"></script>
 7    <script src="../../import/stats.js"></script>
 8    <script src="../../import/Setting.js"></script>
 9    <script src="../../import/OrbitControls.js"></script>
 10    <script src="../../import/dat.gui.min.js"></script>
 11    <script src="../../import/SceneUtils.js"></script>
 12    <style type="text/css">
 13        div#WebGL-output {
 14            border: none;
 15            cursor: pointer;
 16            width: 100%;
 17            height: 850px;
 18            background-color: #333333;
 19        }
 20    </style>
 21</head>
 22<body onload="Start()">
 23<div id="WebGL-output"></div>
 24<script>
 25    let camera, renderer, scene, light;
 26    let controller;
 27    let controls;
 28    let cube, sphere, plane, meshMaterial;
 29
 30    function initThree() {
 31        //渲染器初始化
 32        renderer = new THREE.WebGLRenderer({
 33            antialias: true
 34        });
 35        renderer.setSize(window.innerWidth, window.innerHeight);
 36        renderer.setClearColor(0x333333);
 37        document.getElementById("WebGL-output").appendChild(renderer.domElement);//将渲染添加到div中
 38
 39        //初始化摄像机，这里使用透视投影摄像机
 40        camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 10, 100);
 41        camera.position.set(0, 40, 60);
 42        camera.up.x = 0;//设置摄像机的上方向为哪一个方向，这里定义摄像的上方为Y轴正方向
 43        camera.up.y = 1;
 44        camera.up.z = 0;
 45        camera.lookAt(0, 0, 0);
 46
 47        //初始化场景
 48        let urls =[
 49            'image/posx.jpg',
 50            'image/negx.jpg',
 51            'image/posy.jpg',
 52            'image/negy.jpg',
 53            'image/posz.jpg',
 54            'image/negz.jpg'
 55        ];//引入6个方向的贴图
 56        let cubeMap = THREE.ImageUtils.loadTextureCube( urls );
 57        scene = new  THREE.Scene();
 58        scene.background = cubeMap;
 59
 60        //相机的移动
 61        controller = new THREE.OrbitControls(camera, renderer.domElement);
 62        controller.target = new THREE.Vector3(0, 0, 0);
 63
 64
 65        light = new THREE.AmbientLight(0x0c0c0c);
 66        scene.add(light);
 67
 68        // add spotlight for the shadows
 69        light = new THREE.SpotLight(0xffffff);
 70        light.position.set(0, 30, 30);
 71        scene.add(light);
 72
 73    }
 74
 75    //初始化菜单面板
 76    function initDatGUI() {
 77        //设置菜单中须要的参数
 78        controls = new function () {
 79            this.rotationSpeed = 0.02;
 80            this.visible = meshMaterial.visible;//是否可见
 81            this.wireframe = meshMaterial.wireframe;//是否以线框的方式渲染物体
 82            this.wireframeWidth = meshMaterial.wireframeLinewidth;//线框的宽度
 83            this.transparent = meshMaterial.transparent;//是否透明
 84            this.opacity = meshMaterial.opacity;//透明度，须要transparent为true才有效果
 85            this.side = "front";//边的渲染方式，有三种，前面，后面，还有双面
 86            this.selectMesh = "sphere";//当前选择的几何体
 87            this.shading = "smooth";//着色方式，有平面着色和平滑着色，对一个面很平的几何体几乎看不出区别，如正方体
 88        };
 89        let gui = new dat.GUI();
 90        //将刚刚设置的参数添加到菜单中
 91        let F1 = gui.addFolder("Mesh");
 92        F1.add(controls, "rotationSpeed", 0, 0.1);
 93        F1.add(controls, "visible").onChange(function (e) {
 94            meshMaterial.visible = e;
 95        });
 96        F1.add(controls, "wireframe").onChange(function (e) {
 97            meshMaterial.wireframe = e;
 98        });
 99        F1.add(controls, "wireframeWidth",0,10).onChange(function (e) {
100            meshMaterial.wireframeWidth = e;
101        });
102        F1.add(controls, "transparent").onChange(function (e) {
103            meshMaterial.transparent = e;
104        });
105        F1.add(controls, "opacity",0,1).onChange(function (e) {
106            meshMaterial.opacity = e;
107        });
108        F1.add(controls, "side",["front","back","double"]).onChange(function (e) {
109            switch (e) {
110                case "front":
111                    meshMaterial.side = THREE.FrontSide;
112                    break;
113                case "back":
114                    meshMaterial.side = THREE.BackSide;
115                    break;
116                case "double":
117                    meshMaterial.side = THREE.DoubleSide;
118                    break;
119            }
120            meshMaterial.needsUpdate = true;//要在程序中让材质更新须要添加这一句话
121        });
122        F1.add(controls, "selectMesh",["sphere","cube","plane"]).onChange(function (e) {
123            //先把场景的物体清除，再来添加
124            scene.remove(cube);
125            scene.remove(sphere);
126            scene.remove(plane);
127            switch (e) {
128                case "sphere":
129                    scene.add(sphere);
130                    break;
131                case "cube":
132                    scene.add(cube);
133                    break;
134                case "plane":
135                    scene.add(plane);
136                    break;
137            }
138        });
139        F1.add(controls, "shading",["flat","smooth"]).onChange(function (e) {
140            switch (e) {
141                case "flat":
142                    meshMaterial.shading = THREE.FlatShading;
143                    break;
144                case "smooth":
145                    meshMaterial.shading = THREE.SmoothShading;
146                    break;
147            }
148            meshMaterial.needsUpdate = true;//要在程序中让材质更新须要添加这一句话
149        });
150    }
151
152    function initObject() {
153        //建立正方体，球和地面的几何体
154        let cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
155        let sphereGeometry = new THREE.SphereGeometry(10, 20, 20);
156        let planeGeometry = new THREE.PlaneGeometry(10, 10, 1, 1);
157        //建立一个法向量材质
158        meshMaterial = new THREE.MeshNormalMaterial();
159
160        cube = new THREE.Mesh(cubeGeometry, meshMaterial);
161        sphere = new THREE.Mesh(sphereGeometry, meshMaterial);
162        plane = new THREE.Mesh(planeGeometry, meshMaterial);
163        //把三者的位置统一
164        cube.position.set(0,0,0);
165        sphere.position = cube.position;
166        plane.position = cube.position;
167
168        //在球的每个面上显示一个法向量，方便观测这种法向量材质的渲染方式
169        for(let i=0;i<sphereGeometry.faces.length;i++){//在每个面上面循环
170            let face = sphereGeometry.faces[i];//获得每一个面的对象
171            let centroid = new THREE.Vector3();//先建立一个vector3对象，要使用这个对象找到每一个面的中心，
172            centroid.add(sphereGeometry.vertices[face.a]);
173            // 将这该面的三个顶点的索引传给sphereGeom.vertices找到其顶点的坐标，再添加进centroid
174            centroid.add(sphereGeometry.vertices[face.b]);
175            centroid.add(sphereGeometry.vertices[face.c]);
176            centroid.divideScalar(3);//三角形的中心点坐标
177            let arrow = new THREE.ArrowHelper(
178                face.normal,
179                centroid,
180                2,
181                0xffcc55,
182                0.5,
183                0.5);//箭头辅助线，至关于把法向量用箭头表示出来
184            sphere.add(arrow);
185        }
186        scene.add(sphere);
187    }
188
189    function rotation() {
190        scene.traverse(function (e) {
191            if (e instanceof THREE.Mesh) {
192                e.rotation.y += controls.rotationSpeed;
193            }
194        })
195    }
196
197    //渲染函数
198    function render() {
199        rotation();
200        stats.update();
201        renderer.clear();
202        requestAnimationFrame(render);
203        renderer.render(scene, camera);
204    }
205
206    //功能函数
207    function setting() {
208        loadFullScreen();
209        loadAutoScreen(camera, renderer);
210        loadStats();
211    }
212
213    //运行主函数，敲代码的时候总是敲错，因此改了一个名字，叫Start更方便
214    function Start() {
215        initThree();
216        initObject();
217        initDatGUI();
218        setting();
219        render();
220    }
221</script>
222</body>
223</html>
复制代码