threejs+webgl打造一个三维噪点魔法球烟雾动画效果代码-html代码-BFW代码库

threejs+webgl打造一个三维噪点魔法球烟雾动画效果代码

代码语言：html

所属分类：三维

代码描述：threejs+webgl打造一个三维噪点魔法球烟雾动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  <meta name="viewport" content="width=device-width, initial-scale=1">
  
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/aqua-1.5.5.css">
  
<style>
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  margin: 0;
}

:root {
  --blue-grad-4: linear-gradient(45deg, #93a5cf 0%, #e4efe9 100%);
}

.bg-blue-grad-4 {
  background: var(--blue-grad-4);
}
</style>


</head>

<body >
  <div class="relative w-screen h-screen">
  <div class="noise-marble w-screen h-screen bg-blue-grad-4"></div>
</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.126.js"></script>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/OrbitControls.126.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/GLTFLoader.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/Stats-16.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/RGBELoader.js"></script>
      <script >






const noiseMarbleVertexTopShader = `
varying vec3 vPosition;
varying vec3 vDirection;
`;
const noiseMarbleVertexMainShader = `
vPosition=position;
vDirection=position-cameraPosition;
`;
const noiseMarbleFragmentTopShader = `
uniform sampler2D uHeightMap;
uniform vec3 uColor1;
uniform vec3 uColor2;
uniform float uDepth;
uniform float uSmooth;
uniform float uTime;
uniform float uSpeed;
uniform sampler2D uDisplacementMap;
uniform float uStrength;
uniform float uSlice;

varying vec3 vPosition;
varying vec3 vDirection;
`;
const noiseMarbleFragmentMainShader = `
float rayMarch(vec3 eye,vec3 ray){
    float iter=64.;
    float ratio=1./iter;
    vec3 p=eye;
    float depth=0.;
   .........完整代码请登录后点击上方下载按钮下载查看