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

最新推荐文章于 2024-06-14 16:24:31 发布

「已注销」

最新推荐文章于 2024-06-14 16:24:31 发布

阅读量2.4k

点赞数 2

本文链接：https://blog.csdn.net/ithanmang/article/details/80795134

版权

通过查看文档，scene场景中有两个方法可以添加雾化的效果。
本示例的浏览地址：https://ithanmang.gitee.io/threejs/home/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,</