06 - three.js 笔记 - 在场景中添加雾化效果

通过查看文档，scene场景中有两个方法可以添加雾化的效果。
本示例的浏览地址：http://www.ithanmang.com/threejshome/201806/20180624/03-foggy%20scene.html
这里写图片描述
分别是：线性雾（Fog()），和指数雾（FogExp2()）.
查看three.js源码可得知，fog 是scene的属性，因此可以直接初始化。

因此添加雾化效果的方式

var scene = new THREE.Scene();
// 定义线性雾，密度随着距离的增加而线性增长
scene.fog = new THREE.Fog( 0xffffff, 0.015, 100);

参数：hex：雾的颜色，near：场景添加雾的最小距离，far：雾化效果的截止距离。

示例源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>向场景中添加雾化效果</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
        }
    </style>

    <script src="../libs/jquery-1.9.1.js"></script>
    <script src="../libs/build/three.min.js"></script>
    <script src="../libs/examples/js/libs/dat.gui.min.js"></script>
    <script src="../libs/examples/js/libs/stats.min.js"></script>

</head>
<body>
<div id="WebGL-output"></div>
<div id="Stats-output"></div>

<script>

    $(function () {

        var stats = initStats();

        var scene = new THREE.Scene();
        // 定义线性雾，密度随着距离的增加而线性增长
        scene.fog = new THREE.Fog( 0xffffff, 0.015, 100);

        var camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);
        camera.position.set(-30, 40, 30);
        camera.lookAt(scene.position);

        var webGlRenderer = new THREE.WebGLRenderer();

        webGlRenderer.antialias = true;
        webGlRenderer.autoClear = true;
        webGlRenderer.setClearColor(0xEEEEEE);
        webGlRenderer.setSize(window.innerWidth, window.innerHeight);
        webGlRenderer.shadowMap.enabled = true;
        webGlRenderer.shadowMap.type = THREE.PCFSoftShadowMap;

        $("#WebGL-output").append(webGlRenderer.domElement);

        var planeGeometry = new THREE.PlaneGeometry(60, 40, 1, 1);
        var planeMaterial = new THREE.MeshLambertMaterial({color: 0xffffff});
        var plane = new THREE.Mesh(planeGeometry, planeMaterial);

        plane.receiveShadow = true;
        plane.rotation.x = -0.5 * Math.PI;
        scene.add(plane);

        var ambientLight = new THREE.AmbientLight(0x0C0C0C);
        scene.add(ambientLight);

        var spotLight = new THREE.SpotLight(0xFFFFFF);
        spotLight.position.set(-40, 60, -10);
        spotLight.castShadow = true;
        spotLight.shadow.mapSize.height = 2048;
        spotLight.shadow.mapSize.width = 2048;
        scene.add(spotLight);

        var controls = new function () {
            this.rotationSpeed = 0.02;
            this.numberOfObjects = scene.children.length;
            this.color = scene.fog.color.getStyle();
            this.near = scene.fog.near;
            this.far = scene.fog.far;

            this.removeCube = function () {
                var allChildren = scene.children;
                var lastObject = allChildren[allChildren.length - 1];

                if (lastObject instanceof THREE.Mesh) {
                    scene.remove(lastObject);
                    this.numberOfObjects = scene.children.length;
                }
                ;
            };

            this.addCube = function () {

                var cubeSize = Math.ceil(Math.random() * 3);
                var cubeGeometry = new THREE.CubeGeometry(cubeSize, cubeSize, cubeSize);
                var cubeMaterial = new THREE.MeshLambertMaterial({color: Math.random() * 0xffffff});
                var cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
                cube.castShadow = true;
                cube.receiveShadow = true;

                // 让随机出现的小立方位置体限制在平面之内
                cube.position.x = -30 + Math.round((Math.random() * planeGeometry.parameters.width));
                cube.position.y = 5 + Math.round((Math.random() * 5));
                cube.position.z = -20 + Math.round((Math.random() * planeGeometry.parameters.height));

                scene.add(cube);
                this.numberOfObjects = scene.children.length;
            };
        };

        var gui = new dat.GUI();
        gui.add(controls, 'rotationSpeed', 0, 0.5);
        gui.add(controls, 'addCube');
        gui.add(controls, 'removeCube');
        gui.add(controls, 'numberOfObjects').listen();

        var fogGui = gui.addFolder("Fog");
        fogGui.addColor(controls,'color').onChange(function (e) {
            scene.fog.color.setStyle(e);
        });
        fogGui.add(controls,'near',0,1);
        fogGui.add(controls,'far',0,10000);

        function render() {
            stats.update();
            // traverse 方法 在这个对象（scene）和所有子对象(children)像上执行回调
            scene.traverse(function (e) {
                if (e instanceof THREE.Mesh && e != plane) {
                    e.rotation.x += controls.rotationSpeed;
                    e.rotation.y += controls.rotationSpeed;
                    e.rotation.z += controls.rotationSpeed;
                }
            });
            webGlRenderer.render(scene, camera);
        }

        // 初始化性能插件
        function initStats() {
            var stats = new Stats();

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

            $("#Stats-output").append(stats.domElement);

            return stats;
        }

        function animate() {
            render();
            requestAnimationFrame(animate);
        }

        animate();

    });

</script>

</body>
</html>

06 - three.js 笔记 - 在场景中添加雾化效果

示例源码

猜你喜欢