WebGL-threejs学习笔记-法向量网格材质MeshNormalMaterial的介绍和创建360度全景天空盒的方法

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

点击查看 demo 演示

Demo 地址：https://nsytsqdtn.github.io/d…

简单网格材质 MeshNormalMaterial

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

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

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

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

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

 for(let i=0;i<sphereGeometry.faces.length;i++){// 在每一个面上面循环
            let face = sphereGeometry.faces[i];// 得到每个面的对象
            let centroid = new THREE.Vector3();
            // 先创建一个 vector3 对象，要使用这个对象找到每个面的中心
            centroid.add(sphereGeometry.vertices[face.a]);
             // 将这该面的三个顶点的索引传给 sphereGeometry.vertices 找到其顶点的坐标
             // 再添加进 centroid
            centroid.add(sphereGeometry.vertices[face.b]);
            centroid.add(sphereGeometry.vertices[face.c]);
            centroid.divideScalar(3);// 三角形的中心点坐标
            let arrow = new THREE.ArrowHelper(
                face.normal,//face 这个面的法向量
                centroid,
                2,
                0xffcc55,
                0.5,
                0.5);// 箭头辅助线，相当于把法向量用箭头表示出来
            sphere.add(arrow);
        }

其中，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";// 着色方式，有平面着色和平滑着色，对一个面很平的几何体几乎看不出区别，如正方体 **
    

function initDatGUI() {
        // 设置菜单中需要的参数
        controls = new function () {
            this.rotationSpeed = 0.02;
            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";// 着色方式，有平面着色和平滑着色，对一个面很平的几何体几乎看不出区别，如正方体
        };
        let gui = new dat.GUI();
        // 将刚刚设置的参数添加到菜单中
        let F1 = gui.addFolder("Mesh");
        F1.add(controls, "rotationSpeed", 0, 0.1);
        F1.add(controls, "visible").onChange(function (e) {meshMaterial.visible = e;});
        F1.add(controls, "wireframe").onChange(function (e) {meshMaterial.wireframe = e;});
        F1.add(controls, "wireframeWidth",0,10).onChange(function (e) {meshMaterial.wireframeWidth = e;});
        F1.add(controls, "transparent").onChange(function (e) {meshMaterial.transparent = e;});
        F1.add(controls, "opacity",0,1).onChange(function (e) {meshMaterial.opacity = e;});
        F1.add(controls, "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;// 要在程序中让材质更新需要添加这一句话
        });
        F1.add(controls, "selectMesh",["sphere","cube","plane"]).onChange(function (e) {
            // 先把场景的物体清除，再来添加
            scene.remove(cube);
            scene.remove(sphere);
            scene.remove(plane);
            switch (e) {
                case "sphere":
                    scene.add(sphere);
                    break;
                case "cube":
                    scene.add(cube);
                    break;
                case "plane":
                    scene.add(plane);
                    break;
            }
        });
        F1.add(controls, "shading",["flat","smooth"]).onChange(function (e) {switch (e) {
                case "flat":
                    meshMaterial.shading = THREE.FlatShading;
                    break;
                case "smooth":
                    meshMaterial.shading = THREE.SmoothShading;
                    break;
            }
            meshMaterial.needsUpdate = true;// 要在程序中让材质更新需要添加这一句话
        });
    }

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

360 度全景背景

360 度全景背景能够让人有身临其境的感觉，所有这里的背景使用了全景背景

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

 let urls =[
            'image/posx.jpg',
            'image/negx.jpg',
            'image/posy.jpg',
            'image/negy.jpg',
            'image/posz.jpg',
            'image/negz.jpg'
        ];// 引入 6 个方向的贴图
        let cubeMap = THREE.ImageUtils.loadTextureCube(urls);
        scene = new  THREE.Scene();
        scene.background = cubeMap;

这些图片的需要按照顺序摆放，右左上下后前，否则背景会错乱。
这里给一个全景图片的网站，里面有很多的 360 度风景图，都是 6 张类型的，下载下来解压后就可以直接引入
http://www.humus.name/index.p…

本例子的完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Depth Material Test</title>
    <script src="../../import/three.js"></script>
    <script src="../../import/stats.js"></script>
    <script src="../../import/Setting.js"></script>
    <script src="../../import/OrbitControls.js"></script>
    <script src="../../import/dat.gui.min.js"></script>
    <script src="../../import/SceneUtils.js"></script>
    <style type="text/css">
        div#WebGL-output {
            border: none;
            cursor: pointer;
            width: 100%;
            height: 850px;
            background-color: #333333;
        }
    </style>
</head>
<body onload="Start()">
<div id="WebGL-output"></div>
<script>
    let camera, renderer, scene, light;
    let controller;
    let controls;
    let cube, sphere, plane, meshMaterial;

    function initThree() {
        // 渲染器初始化
        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x333333);
        document.getElementById("WebGL-output").appendChild(renderer.domElement);// 将渲染添加到 div 中

        // 初始化摄像机，这里使用透视投影摄像机
        camera = new THREE.PerspectiveCamera(50, window.innerWidth / window.innerHeight, 10, 100);
        camera.position.set(0, 40, 60);
        camera.up.x = 0;// 设置摄像机的上方向为哪个方向，这里定义摄像的上方为 Y 轴正方向
        camera.up.y = 1;
        camera.up.z = 0;
        camera.lookAt(0, 0, 0);

        // 初始化场景
        let urls =[
            'image/posx.jpg',
            'image/negx.jpg',
            'image/posy.jpg',
            'image/negy.jpg',
            'image/posz.jpg',
            'image/negz.jpg'
        ];// 引入 6 个方向的贴图
        let cubeMap = THREE.ImageUtils.loadTextureCube(urls);
        scene = new  THREE.Scene();
        scene.background = cubeMap;

        // 相机的移动
        controller = new THREE.OrbitControls(camera, renderer.domElement);
        controller.target = new THREE.Vector3(0, 0, 0);


        light = new THREE.AmbientLight(0x0c0c0c);
        scene.add(light);

        // add spotlight for the shadows
        light = new THREE.SpotLight(0xffffff);
        light.position.set(0, 30, 30);
        scene.add(light);

    }

    // 初始化菜单面板
    function initDatGUI() {
        // 设置菜单中需要的参数
        controls = new function () {
            this.rotationSpeed = 0.02;
            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";// 着色方式，有平面着色和平滑着色，对一个面很平的几何体几乎看不出区别，如正方体
        };
        let gui = new dat.GUI();
        // 将刚刚设置的参数添加到菜单中
        let F1 = gui.addFolder("Mesh");
        F1.add(controls, "rotationSpeed", 0, 0.1);
        F1.add(controls, "visible").onChange(function (e) {meshMaterial.visible = e;});
        F1.add(controls, "wireframe").onChange(function (e) {meshMaterial.wireframe = e;});
        F1.add(controls, "wireframeWidth",0,10).onChange(function (e) {meshMaterial.wireframeWidth = e;});
        F1.add(controls, "transparent").onChange(function (e) {meshMaterial.transparent = e;});
        F1.add(controls, "opacity",0,1).onChange(function (e) {meshMaterial.opacity = e;});
        F1.add(controls, "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;// 要在程序中让材质更新需要添加这一句话
        });
        F1.add(controls, "selectMesh",["sphere","cube","plane"]).onChange(function (e) {
            // 先把场景的物体清除，再来添加
            scene.remove(cube);
            scene.remove(sphere);
            scene.remove(plane);
            switch (e) {
                case "sphere":
                    scene.add(sphere);
                    break;
                case "cube":
                    scene.add(cube);
                    break;
                case "plane":
                    scene.add(plane);
                    break;
            }
        });
        F1.add(controls, "shading",["flat","smooth"]).onChange(function (e) {switch (e) {
                case "flat":
                    meshMaterial.shading = THREE.FlatShading;
                    break;
                case "smooth":
                    meshMaterial.shading = THREE.SmoothShading;
                    break;
            }
            meshMaterial.needsUpdate = true;// 要在程序中让材质更新需要添加这一句话
        });
    }

    function initObject() {
        // 创建正方体，球和地面的几何体
        let cubeGeometry = new THREE.BoxGeometry(10, 10, 10);
        let sphereGeometry = new THREE.SphereGeometry(10, 20, 20);
        let planeGeometry = new THREE.PlaneGeometry(10, 10, 1, 1);
        // 创建一个法向量材质
        meshMaterial = new THREE.MeshNormalMaterial();

        cube = new THREE.Mesh(cubeGeometry, meshMaterial);
        sphere = new THREE.Mesh(sphereGeometry, meshMaterial);
        plane = new THREE.Mesh(planeGeometry, meshMaterial);
        // 把三者的位置统一
        cube.position.set(0,0,0);
        sphere.position = cube.position;
        plane.position = cube.position;

        // 在球的每一个面上显示一个法向量，方便观测这种法向量材质的渲染方式
        for(let i=0;i<sphereGeometry.faces.length;i++){// 在每一个面上面循环
            let face = sphereGeometry.faces[i];// 得到每个面的对象
            let centroid = new THREE.Vector3();// 先创建一个 vector3 对象，要使用这个对象找到每个面的中心，centroid.add(sphereGeometry.vertices[face.a]);
            // 将这该面的三个顶点的索引传给 sphereGeom.vertices 找到其顶点的坐标，再添加进 centroid
            centroid.add(sphereGeometry.vertices[face.b]);
            centroid.add(sphereGeometry.vertices[face.c]);
            centroid.divideScalar(3);// 三角形的中心点坐标
            let arrow = new THREE.ArrowHelper(
                face.normal,
                centroid,
                2,
                0xffcc55,
                0.5,
                0.5);// 箭头辅助线，相当于把法向量用箭头表示出来
            sphere.add(arrow);
        }
        scene.add(sphere);
    }

    function rotation() {scene.traverse(function (e) {if (e instanceof THREE.Mesh) {e.rotation.y += controls.rotationSpeed;}
        })
    }

    // 渲染函数
    function render() {rotation();
        stats.update();
        renderer.clear();
        requestAnimationFrame(render);
        renderer.render(scene, camera);
    }

    // 功能函数
    function setting() {loadFullScreen();
        loadAutoScreen(camera, renderer);
        loadStats();}

    // 运行主函数，敲代码的时候老是敲错，所以改了一个名字，叫 Start 更方便
    function Start() {initThree();
        initObject();
        initDatGUI();
        setting();
        render();}
</script>
</body>
</html>