three.js创建简单的凹凸贴图

妖狐艹你老母 2022-05-13 11:22 303阅读 0赞

有时候我们需要某个场景或者物体突出其凹凸特征，让物体看起来更有层次感，怎么办？Three.js的许多材质就提供了凹凸贴图的属性，下面笔者以THREE.MeshPhongMaterial为例，演示如何对一个立方体进行凹凸贴图：

function textureBump() {
            let texture1 = new THREE.TextureLoader().load("textures/brick_bump.jpg");//凹凸
            let texture2 = new THREE.TextureLoader().load("textures/brick-wall.jpg");//打底
            let geometry = new THREE.BoxGeometry(10, 10, 10, 30, 30, 30);
            let material = new THREE.MeshPhongMaterial({
                map: texture2,
                bumpMap: texture1,
                bumpScale: 0.3
            });
    
            boxMesh = new THREE.Mesh(geometry, material);
            scene.add(boxMesh);
        }

上述代码利用了THREE.MeshPhoneMaterial的map和bumpMap属性对立方体进行贴图，本文将其实现为一个小demo，并添加了一个调节凹凸程度的菜单栏，不同凹凸程度实现效果如下：

![70][]![70 1][]

** demo代码:**

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>天空盒贴图</title>
        <script type="text/javascript" src="build/three.js"></script>
        <script type="text/javascript" src="js/controls/OrbitControls.js"></script>
        <script type="text/javascript" src="js/libs/stats.js"></script>
        <script type="text/javascript" src="js/libs/dat.gui.min.js"></script>
        <style>
            body {
                margin: 0px;
                overflow: hidden;
            }
        </style>
    </head>
    <body>
    <script type="text/javascript" >
        let container1 = document.createElement('div');
        document.body.appendChild(container1);
    
        let container2 = document.createElement('div');
        document.body.appendChild(container2);
    
        let scene = undefined;
        let renderer = undefined;
        let camera = undefined;
        let directionalLight = ambientLight = undefined;
        let controls = undefined;
        let stats = undefined;
        let boxMesh = undefined;
    
        let guiFields = {
            "bumpScale": 0.3
        };
    
        main();
        render();
    
        function main() {
            initScene();
            initRenderer(container1);
            initGUI();
            initCamera();
            initLight();
            initControls();
            textureBump();
            initStats(container2);
            window.addEventListener('resize', onWindowResize, false);
        }
    
        function initScene() {
            scene = new THREE.Scene();
        }
    
        function initCamera() {
            camera = new THREE.PerspectiveCamera(60, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 5, 35);
            camera.lookAt(scene.position);
        }
    
        function initRenderer(container1) {
            renderer = new THREE.WebGLRenderer({antialias:true});
            renderer.setClearColor(0xffffff, 1.0);
            renderer.setSize(window.innerWidth, window.innerHeight);
            container1.appendChild(renderer.domElement);
        }
    
        function initGUI() {
            let gui = new dat.GUI();
            gui.add(guiFields, 'bumpScale', 0, 1).onChange(function (e) {
                boxMesh.material.bumpScale = e;
            });
        }
    
        function initLight() {
            ambientLight = new THREE.AmbientLight(0xffffff, 0.35);
            scene.add(ambientLight);
    
            directionalLight = new THREE.DirectionalLight(0xffffff);
            directionalLight.position.set(10, 10, 10);
            scene.add(directionalLight);
        }
    
        function initControls() {
            controls = new THREE.OrbitControls(camera, renderer.domElement);
            controls.autoRotate = false;
            controls.enableKeys = true;
        }
    
        function textureBump() {
            let texture1 = new THREE.TextureLoader().load("textures/brick_bump.jpg");
            let texture2 = new THREE.TextureLoader().load("textures/brick-wall.jpg");
            let geometry = new THREE.BoxGeometry(10, 10, 10, 30, 30, 30);
            let material = new THREE.MeshPhongMaterial({
                map: texture2,
                bumpMap: texture1,
                bumpScale: 0.3
            });
    
            boxMesh = new THREE.Mesh(geometry, material);
    
            scene.add(boxMesh);
        }
    
        function initStats(container2) {
            stats = new Stats();
            stats.setMode(0);
    
            stats.domElement.style.position = 'absolute';
            stats.domElement.style.left = '0px';
            stats.domElement.style.top = '0px';
    
            container2.appendChild(stats.domElement);
        }
    
        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight);
        }
    
        function render() {
            controls.update();
            stats.update();
            requestAnimationFrame(render);
            renderer.render(scene, camera);
        }
    
    </script>
    </body>
    </html>

[70]: https://img-blog.csdn.net/20180912160546662?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3MzM4OTgz/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: /images/20220513/73da5464f184449b96d807802b0feab3.png