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

有时候我们需要某个场景或者物体突出其凹凸特征，让物体看起来更有层次感，怎么办？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，并添加了一个调节凹凸程度的菜单栏，不同凹凸程度实现效果如下：

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>

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

猜你喜欢