27.使用bumpMap创建凹凸效果

最新推荐文章于 2022-11-21 17:39:40 发布

sheerhr

最新推荐文章于 2022-11-21 17:39:40 发布

阅读量225

点赞数

分类专栏： three.js

本文链接：https://blog.csdn.net/qq_24871849/article/details/112661922

版权

three.js 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>

<html>

<head>
    <title>Example 10.02 - Bump maps</title>
    <script type="text/javascript" src="../libs/three.js"></script>

    <script type="text/javascript" src="../libs/stats.js"></script>
    <script type="text/javascript" src="../libs/dat.gui.js"></script>
    <style>
        body {
            /* set margin to 0 and overflow to hidden, to go fullscreen */
            margin: 0;
            overflow: hidden;
        }
    </style>
</head>

<body>

    <div id="Stats-output">
    </div>
    <!-- Div which will hold the Output -->
    <div id="WebGL-output">
    </div>

    <!-- Javascript code that runs our Three.js examples -->
    <script type="text/javascript">
        // once everything is loaded, we run our Three.js stuff.
        function init() {

            var stats = initStats();

            // create a scene, that will hold all our elements such as objects, cameras and lights.
            var scene = new THREE.Scene();

            // create a camera, which defines where we're looking at.
            var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 1000);

            // create a render and set the size
            var webGLRenderer = new THREE.WebGLRenderer();
            webGLRenderer.setClearColor(new THREE.Color(0xEEEEEE, 1.0));
            webGLRenderer.setSize(window.innerWidth, window.innerHeight);
            webGLRenderer.shadowMapEnabled = true;

            var sphere1 = createMesh(new THREE.BoxGeometry(15, 15, 2), "stone.jpg");
            sphere1.rotation.y = -0.5;
            sphere1.position.x = 12;
            scene.add(sphere1);

            var sphere2 = createMesh(new THREE.BoxGeometry(15, 15, 2), "stone.jpg", "stone-bump.jpg");
            sphere2.rotation.y = 0.5;
            sphere2.position.x = -12;
            scene.add(sphere2);
            console.log(sphere2.geometry.faceVertexUvs);

            var floorTex = THREE.ImageUtils.loadTexture("../assets/textures/general/floor-wood.jpg");
            var plane = new THREE.Mesh(new THREE.BoxGeometry(200, 100, 0.1, 30), new THREE.MeshPhongMaterial({
                color: 0x3c3c3c,
                map: floorTex
            }));
            plane.position.y = -7.5;
            plane.rotation.x = -0.5 * Math.PI;
            scene.add(plane);

            // position and point the camera to the center of the scene
            camera.position.x = 00;
            camera.position.y = 12;
            camera.position.z = 28;
            camera.lookAt(new THREE.Vector3(0, 0, 0));

            var ambiLight = new THREE.AmbientLight(0x242424);
            scene.add(ambiLight);

            var light = new THREE.SpotLight();
            light.position.set(0, 30, 30);
            light.intensity = 1.2;
            scene.add(light);

            // add the output of the renderer to the html element
            document.getElementById("WebGL-output").appendChild(webGLRenderer.domElement);

            // call the render function
            var step = 0;

            //        var polyhedron = createMesh(new THREE.PolyhedronGeometry(vertices, faces, controls.radius, controls.detail));

            // setup the control gui
            var controls = new function() {
                this.bumpScale = 0.2;
                this.changeTexture = "weave";
                this.rotate = false;

                this.changeTexture = function(e) {
                    var texture = THREE.ImageUtils.loadTexture("../assets/textures/general/" + e + ".jpg");
                    sphere2.material.map = texture;
                    sphere1.material.map = texture;

                    var bump = THREE.ImageUtils.loadTexture("../assets/textures/general/" + e + "-bump.jpg");
                    sphere2.material.bumpMap = bump;
                };

                this.updateBump = function(e) {
                    console.log(sphere2.material.bumpScale);
                    sphere2.material.bumpScale = e;
                }
            };


            var gui = new dat.GUI();
            gui.add(controls, "bumpScale", -2, 2).onChange(controls.updateBump);
            gui.add(controls, "changeTexture", ['stone', 'weave']).onChange(controls.changeTexture);
            gui.add(controls, "rotate");


            render();

            function createMesh(geom, imageFile, bump) {
                var texture = THREE.ImageUtils.loadTexture("../assets/textures/general/" + imageFile);
                geom.computeVertexNormals();
                var mat = new THREE.MeshPhongMaterial();
                mat.map = texture;
                if (bump) {
                    var bump = THREE.ImageUtils.loadTexture("../assets/textures/general/" + bump);
                    mat.bumpMap = bump;
                    mat.bumpScale = 0.2;
                    console.log('d');
                }


                // create a multimaterial
                var mesh = new THREE.Mesh(geom, mat);

                return mesh;
            }

            function render() {
                stats.update();

                if (controls.rotate) {
                    sphere1.rotation.y -= 0.01;
                    sphere2.rotation.y += 0.01;
                }

                //            sphere1.rotation.y=step+=0.01;
                //            sphere1.rotation.x=step;
                //            sphere2.rotation.y=step;
                //            sphere2.rotation.x=step;

                // render using requestAnimationFrame
                requestAnimationFrame(render);
                webGLRenderer.render(scene, camera);
            }

            function initStats() {

                var stats = new Stats();
                stats.setMode(0); // 0: fps, 1: ms

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

                document.getElementById("Stats-output").appendChild(stats.domElement);

                return stats;
            }
        }
        window.onload = init;
    </script>
</body>

</html>

sheerhr

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
27.使用bumpMap创建凹凸效果

<!DOCTYPE html><html><head> <title>Example 10.02 - Bump maps</title> <script type="text/javascript" src="../libs/three.js"></script> <script type="text/javascript" src="../libs/stats.js"><
复制链接

扫一扫