ThreeJS入门（005）：THREE.FogExp2 知识详解，示例代码

还是大剑师兰特

于 2024-09-17 00:00:00 发布

阅读量549

点赞数 19

分类专栏： # ThreeJS综合教程200+ 文章标签： threejs入门 threejs教程 threejs基础大剑师

本文链接：https://blog.csdn.net/cuclife/article/details/141965405

版权

ThreeJS综合教程200+ 专栏收录该内容

8 篇文章 5 订阅

订阅专栏

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

在这里插入图片描述

查看本专栏目录 - 本文是第 005篇入门文章

文章目录

THREE.FogExp2 详解

THREE.FogExp2 是 Three.js 中用于模拟指数雾效果的一个类。指数雾效果是一种基于距离的雾效，它会使远处的物体逐渐被雾的颜色所取代，但这种效果是以指数的方式递增的。这意味着，随着物体离相机越来越远，雾的效果会迅速增强，导致远处的物体很快被雾的颜色覆盖。

构造函数

THREE.FogExp2 的构造函数如下：

const fog = new THREE.FogExp2(color, density);

color (0x000000)：雾的颜色，通常是一个十六进制颜色值。例如，0x00ff00 表示绿色。
density (0.00025)：雾的密度，决定了雾效的衰减速率。密度值越大，雾效增加的速度越快；反之，则越慢。

示例代码

下面是一个简单的示例，展示了如何在 Three.js 场景中使用 THREE.FogExp2：

// 创建一个场景
const scene = new THREE.Scene();

// 创建一个透视相机
const camera = new THREE.PerspectiveCamera(
    75,
    window.innerWidth / window.innerHeight,
    0.1,
    1000
);
camera.position.z = 5;

// 创建一个 WebGL 渲染器
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

// 创建网格模型
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// 创建指数雾效果
const fog = new THREE.FogExp2(0x808080, 0.005); // 灰色的指数雾，密度为 0.005
scene.fog = fog;

// 渲染循环
function animate() {
    requestAnimationFrame(animate);

    // 更新立方体的旋转
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    // 渲染场景
    renderer.render(scene, camera);
}

animate();