three.js 实现风暴云特效

2023-10-22 16:12| 来源: 网络整理| 查看: 265

前言

大家好，这里是 CSS兼WebGL 魔法使——alphardex。

本文我们将用three.js来实现风暴云特效，以下是最终实现的效果图

让我们开始吧！

预备知识

为了实现这个特效，我们先简要了解一下FBM吧

FBM中文意思是分形布朗运动，另一种称呼是分形噪声（说明它也属于噪声的一种）。它常用于描绘各种自然之中的形状（山脉、云层、河流等）。概念是在一个for循环内叠加几次噪声（往往是6次，相当于一个八度octave），并在叠加的同时升高频率，降低振幅。以下是一个简易的fbm实现的噪声图案

#pragma glslify:centerUv=require(../modules/centerUv) #pragma glslify:snoise=require(glsl-noise/simplex/2d) uniform float uTime; uniform vec2 uMouse; uniform vec2 uResolution; varying vec2 vUv; varying vec3 vPosition; #define OCTAVES 6 float fbm(vec2 p){ float sum=0.; float amp=.5; for(int i=0;i

【本文地址】

公司简介

联系我们