欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

31 - three.js 笔记 - MeshNormalMaterial 材质

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

MeshNormalMaterial是一种将法向量映射到 RGB 颜色的材质。
网格在每一个面上渲染的颜色都不一样,法向量是与面垂直的向量,由于一个物体各个面上的法向量都不同,所以每个面映射的颜色也不同。
示例:MeshNormalMaterial.html
示例中将flatShading设置为true为了更好看到每个面的颜色。
并且为每个面都添加了一个辅助箭头,可以清晰看到每个面的法向量的位置。

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>MeshNormalMaterial 计算法向颜色的材质</title>
    <style>
        body {
            margin: 0;
            overflow: hidden; /*溢出隐藏*/
        }
    </style>
    <script src="../../libs/build/three-r93.min.js"></script>
    <script src="../../libs/examples/js/controls/OrbitControls.js"></script>
    <script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
    <script src="../../libs/examples/js/libs/stats.min.js"></script>
    <script src="../../libs/examples/js/Detector.js"></script>
</head>
<body>
<script>

    let stats = initStats();
    let scene, camera, renderer, controls, guiControls;

    // 场景
    function initScene() {

        scene = new THREE.Scene();

    }

    // 相机
    function initCamera() {

        camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 5000);
        camera.position.set(0, 0, 250);
        camera.lookAt(new THREE.Vector3(0, 0, 0));

    }

    // 渲染器
    function initRenderer() {

        renderer = new THREE.WebGLRenderer({antialias: true});
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.setClearColor(0x050505);
        document.body.appendChild(renderer.domElement);

    }

    // 灯光
    function initLight() {

        let spotLight = new THREE.SpotLight(0xffffff);
        spotLight.position.set(-10, 200, 30);
        scene.add(spotLight);

    }

    // 控制器
    function initControls() {

        controls = new THREE.OrbitControls(camera, renderer.domElement);
        // 添加惯性
        controls.enableDamping = true;
        // 最大偏移角度
        controls.maxPolarAngle = 0.49 * Math.PI;
        // 旋转速度
        controls.rotateSpeed = 0.05;
        // 最大可视距离
        controls.maxDistance = 500;
        // 最小可视距离
        controls.minDistance = 100;

    }

    // 调试插件
    let flag = false;
    function initGui() {

        guiControls = new function () {

            this.opacity = normalMaterial.opacity;
            this.transparent = normalMaterial.transparent;
            this.wireframe = normalMaterial.wireframe;
            this.flatShading = normalMaterial.flatShading;
            this.side = 'front';
            this.arrow = false;
        };

        let gui = new dat.GUI();

        gui.add(guiControls, 'opacity',0, 1).onChange(function (e) {
           normalMaterial.opacity = e;
        });

        gui.add(guiControls, 'transparent').onChange(function (e) {
           normalMaterial.transparent = e;
        });

        gui.add(guiControls, 'wireframe').onChange(function (e) {
           normalMaterial.wireframe = e;
        });

        gui.add(guiControls, 'flatShading').onChange(function (e) {
           normalMaterial.flatShading = e;
            console.log(normalMaterial.flatShading);
            // 材质flatShading被修改时需要重新编译材质
            normalMaterial.needsUpdate = true;
        });

        gui.add(guiControls, 'arrow').onChange(function (e) {

            if (e){

                for (let f = 0, fl = sphere.geometry.faces.length; f < fl; f++){

                    let face = sphere.geometry.faces[f];
                    let centroid = new THREE.Vector3(0, 0, 0);
                    centroid.add(sphere.geometry.vertices[face.a]);
                    centroid.add(sphere.geometry.vertices[face.b]);
                    centroid.add(sphere.geometry.vertices[face.c]);
                    centroid.divideScalar(3);
                    let arrow = new THREE.ArrowHelper(face.normal,centroid, 10, 0x33ffff, 10, 0.1);
                    sphere.add(arrow);
                }

            }else{

                scene.remove(sphere);
                initContent();

            }

        });

        gui.add(guiControls,'side',['front','back','double']).onChange(function (e) {

            switch (e){
                case "front":
                    normalMaterial.side = THREE.FrontSide;
                    break;
                case "back":
                    normalMaterial.side = THREE.BackSide;
                    break;
                case "double":
                    normalMaterial.side = THREE.DoubleSide;
                    break;
            }
            normalMaterial.needsUpdate = true;

        });

    }

    let sphere;
    let normalMaterial;
    // 场景中的内容
    function initContent() {

        let sphereGeometry = new THREE.SphereGeometry(80, 35, 35);
        normalMaterial = new THREE.MeshNormalMaterial();
        normalMaterial.flatShading = true;
        sphere = new THREE.Mesh(sphereGeometry, normalMaterial);

        scene.add(sphere);

    }

    // 性能插件
    function initStats() {

        let stats = new Stats();

        stats.domElement.style.position = 'absolute';
        stats.domElement.style.left = '0px';
        stats.domElement.style.top = '0px';

        document.body.appendChild(stats.domElement);

        return stats;
    }
    // 更新
    function update() {

        stats.update();
        controls.update();
        sphere.rotation.y -= 0.01;

    }

    // 初始化
    function init() {

        // 兼容性判断,若不兼容会提示信息
        if (!Detector.webgl) Detector.addGetWebGLMessage();

        initScene();
        initCamera();
        initRenderer();
        initLight();
        initControls();
        initContent();
        initGui();

        window.addEventListener('resize', onWindowResize, false);
    }

    // 窗口变动触发的方法
    function onWindowResize() {

        // 重新设置相机的宽高比
        camera.aspect = window.innerWidth / window.innerHeight;

        // 更新相机投影矩阵
        camera.updateProjectionMatrix();

        // 更新渲染器大小
        renderer.setSize(window.innerWidth, window.innerHeight);

    }

    // 循环渲染
    function animate() {

        requestAnimationFrame(animate);
        renderer.render(scene, camera);
        update();
    }

    // 页面绘制完后加载
    window.onload = function () {

        init();
        animate();

    };

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